Retrieving all lost HTML files from Angular dist folder

Question

I have no idea how this happened, but somehow, I lost all my HTML files from my Angular project some time after I created a dist folder ( ng build ) and pushed it to my EC2 server. Is there any way to get the contents from the dist folder on the server back into the project?

Answer 1

I was able to fix the issue, manually.

What I did

I learned that index.html is located in dist/index.html . From there, it was simply copy, paste, and remove the row of <script> tags.

The other HTML files were more tedious. I had to Ctrl+F for their names, in dist/main.js , go to the module.exports line in the anonymous function right after, copy the whole string (it's literally the entire file's contents on one line), paste it into a new file of that filename created where it was, and replace literal \\\\n , \\\\r\\\\n with actual newline character (enable regular expansions in the find-and-replace feature of your text editor), and escaped \\" with actual " .

I did have to find and manually revive some CSS and TypeScript files, but it was done the same way (the TypeScript can be found within that extremely long line in dist/main.js.map , although you have to really know what you're looking for, and the patience/persistence to find it. Luckily, there were only a few lines of TypeScript I was missing.)

I'm lucky this project is nascent.

Answer 2

In a MEAN app, I created a client folder in the root directory, then copied and pasted the dist folder there. Don't forget to change your static path in your server file:

app.use(express.static(__dirname + '/client/dist/pet-shelter')); // moving dist to client folder

Let me know what solution you came up with? Mine seems primitive.