从dist文件夹恢复Angular 4项目

Question

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.

Answer 1

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.

Answer 2

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.