Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Restore Angular 4 project from dist folder

Tags:

angular

So I accidentally deleted my Angular 4 project but I still have dist folder with all bundles and code packed. So is there any way I can restore all the project layout so I can continue coding in my editor or is it gone forever? Thanks.

like image 845
petar11199 Avatar asked Dec 21 '17 17:12

petar11199


2 Answers

No.

If you do not have project files, you cannot reverse-engineer Angular application to get source back. You can take a peek at compiled code to get some business logic if it's not too tied with Angular's view engine (which it shouldn't be if you've been developing with best practices) and try restoring that, though.

It's like trying to go back to 2 + 3 from having only 5. You have no idea if it was 3 + 2, 1 + 4, 4 + 1. Angular compiles your application, and there's no 1-1 mapping. Especially when you consider that you've also been using TypeScript. Angular's build output it two compilers and a bundler away from original. Irreversible.

Here's a more detailed breakdown of how compilation looks like.

  1. Your Angular code written in TypeScript is being compiled to a different TypeScript code by Angular compiler. This process in theory might or might not be reversible, depending on how Angular's compiler works (I'm in no position to speak about that).
  2. Then TypeScript is compiled down to JavaScript. This is irreversible
  3. A bundler (such as Webpack, Rollup, SystemJS or Parcel) messes with your code, including who-knows how many plugins mess with your code. Most of them are irreversible. Actual bundling might be reversible depending on implementation.
  4. Resulting bundles (or a single one) are minified. Irreversibility of this also depends on how heavy the minification was. For example, if you're using Google's Closure Compiler with advanced settings, getting back the original code is irreversible by definition.
like image 184
Lazar Ljubenović Avatar answered Sep 21 '22 01:09

Lazar Ljubenović


Deploy the app code in the Dist folder, and then use Google Chrome Developer tools (F12). Under debugger tab, look under webpack -> src It will show all typescript files. you can copy and past the code provided.

like image 37
Johnny Swingdice Avatar answered Sep 21 '22 01:09

Johnny Swingdice