What is bundling in Angular ?

When ng -serve -o command executed angular application bundles all small files in different bundles. Bundles are very important for running an application faster. Angular CLI runs WebPack for building and bundling angular applications. When Angular CLI runs Webpack to build and bundle all JavaScript and CSS code, it creates below files:

inline.bundle.js	WebPack runtime. Required for WebPack to do its job
main.bundle.js	All the application code that we write
polyfills.bundle.js	Browser Polyfills
styles.bundle.js	Styles used by the application
vendor.bundle.js	Angular and 3rd party vendor files

A real-world application is made up of many components. Each component code has .ts,.html,.spec.ts,.css files. And all .ts file when build happens gets transpiled to JavaScript i.e to a .js file. So an angular application is a collection of many small files. An angular application also contains third party vendor code files like Angular, jQuery, Bootstrap etc.  All these files are bundled to few .js files when build happens. When we execute ng -s -o all these small files are bundled but are not written to out directory due to which we can not deploy or use this code in any other server. By default, this generated the code which can only able to run in the local system.

If you want to build the application which can be used for deploying in testing or production environment then we need to build the application with ng build --prod or ng  build --dev

When -- ng build prod executed all bundled code is written to dist folder. We can copy all the code from "dist" folder to any other server like Test, Staging or production server.

In addition, it is also minified, uglified and tree-shaked to remove any code that we are not referencing in our application. So the bundler size is further reduced. As web browsers have a limitation on how many scripts or CSS files they can download simultaneously, bundling will help for faster execution.