Some weeks ago, I’ve been in Bari by a customer, and we passed two days in optimizing Angular-CLI build process in an advanced scenario. The back-end was realized with Asp.Net Core and from this experience, I would extract some blog posts, this is only the first one.

After porting the project from a Gulp configuration, based on old-style SystemJS, to Webpack with Angular-CLI, at the first build the application does not start. We were afraid that some legacy dependencies were not bundled in the final package because the application started without problems with the ng servecommand.

While we were investigating this issue, we have discovered, thanks to  Gianluca, a wonderful tool called Webpack Bundle Analyzer (https://www.npmjs.com/package/webpack-bundle-analyzer), that shows the content of the bundle in a visual report in the browser. The usage is very simple:

• Create an Angular-CLI build with the command ng build –prod –stats-json (–prod is optional, it works fine also with –dev). It will generate the classical build output with an additional file, stats.json, with all the information about the build process.
• In the root project, install the package in the development dependencies: npm install –save-dev webpack-bundle-analyzer.
• Add to package.json a script as “build-bundle-report”: “webpack-bundle-analyzer dist/stats.json” and execute the command npm run build-bundle-report

This is the result:

You can explore the bundle zooming in and out the various block and checking if all the packages you need are in the bundle. In the end, the problem was not the bundle, but this was useful to exclude the problem.

Happy coding!