Angular: How to build files which are the same as the files ng serve creates

Question

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.

Answer 1

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).

Answer 2

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