I'm optimizing my Angular application and using webpack-bundle-analyzer to inspect the size of bundles. When I run ng build --stats-json it creates bundle.js files and creates a json file which webpack-bundle-analyzer parses. This works as expected, but is there a way to build angular application without optimizations which ng build performs, i.e. get the files which are the same files ng serve produces. I want this because my application is really big and it takes like 15 seconds to reload it while developing. So I would like to be able to inspect these files as well.
Angular: How to build files which are the same as the files ng serve creates
Viewed 1745
3 Answers
Unfortunately you can't, because ng serve works in memory and does not write to disk.
As a workaround you can use your browser's debugger or visit your dev server under the /webpack-dev-server path (i.e. if you're running angular on port 4200, go to http://localhost:4200/webpack-dev-server).
Another way to optimize your application would be using the combination of lazyloading modules with libraries. That would really split your application in separate artifacts reducing your load time.
See here about the libraries: https://github.com/angular/angular-cli/wiki/stories-create-library
I always use this command line to get the raw files, without optimizations (but with a shorter build time):
ng build --stats-json --source-map=false --build-optimizer=false
Consider adding it to your package.json in the scripts section.
See the full list of command line options in the official angular cli build documentation.
AOT is default for prod, but not for serve and build. So you should not have to turn it off manually, usually:
JIT compilation is the default when you run the build-only or the build-and-serve-locally CLI commands
[...]
The --prod meta-flag compiles with AOT by default.
Related