Building Angular Project - ng build

Angular project build process involves compiling the TypeScript files and packaging the JavaScript into chunks. Angular CLI uses the term chunk instead of bundle for a JavaScript file produced by the build process. To build the angular project enter the below command inside project's directory having tsconfig.json

ng build

By default, CLI builds Angular projects in development mode. JavaScript files will not compress and obfuscated. You can debug the JavaScript files. Any of the below two commands can be used to build project for production mode.

ng build -prod

ng build --target=production

Where it is normal build or production build, the compiled files will be placed in the dist directory. This contains JavaScript files (*.js), source maps (*.js.map), index.html, and a favicon.ico file. This dist directory should be used to deploy into servers.

JavaScript file produced by the build process are called as chunks. CLI packages the compiled code into different chunks to improve loading performance. In this example, there are five chunks located in the dist directory:

1. main.js : Contains code compiled from the main TypeScript files 

2. polyfills.js : Provides polyfills, which allow browsers to access advanced features 

3. runtime.js : Contains code that Webpack needs to load chunks 

4. styles.js : Sets the styles used in the application 

5. vendor.js : Contains the Angular libraries 

By loading all these chunks (JS files) into html page using <script> we can use the angular features. Here in our application we can use <app-root>. The largest chunk is vendor.js. On my system, this occupies 2.28 MB in development mode and 1.14 MB in production mode. One advantage of using Webpack (CLI) is that it enables chunk caching. This means that the browser will load the cached chunk only once and use its code throughout the application instead of reloading the chunk every time it's needed.

ng build flags

ng build accepts a number of flags that configure how the operation should be performed. Table below lists these flags and provides a description of each.