The angular-cli is a great way to build your Angular app but what it does can be a mystery. What are those files it generates?

Let’s see…

inline.bundle.js

This is a webpack loader. A tiny file with Webpack utilities that are needed to load the other files.

vendor.bundle.js

This file contains any libraries imported into your app (app.module), including the Angular libraries. Third party libraries imported into your app also get compiled into this file (e.g. lodash, moment etc).

*Warning* this file is HUGE after a dev compile (ng build) because it contains everything required to compile Angular in the browser. Always run a prod build (ng build –prod) before releasing your app to production. A prod build runs the Ahead of Time (AoT) compilation and performs tree-shaking.

main.bundle.js

This is where the action happens. This file contains all your code.

polyfills.bundle.js

This one should be self explanatory. It contains all the polyfills you declare in your polyfills.ts file.

scripts.build.js

This one should also be self explanatory. It contains the scripts you declare in the scripts section of your angular-cli.json file:

"scripts": [
   "../node_modules/jquery/dist/jquery.min.js",
   "../node_modules/bootstrap/js/alert.js",
   "../Scripts/global-error-handler.js",
   "../Scripts/responsive-bootstrap-toolkit.js"
],