Angular CLI - ng build Command

This chapter explains the syntax, argument and options of ng build command along with an example.
The syntax for ng build command is as follows −
ng build <project> [options]
ng b <project> [options]

ng build command compiles an angular application/library into an output directory named dist at given path. 
The argument for ng build command is as follows −
Options are optional parameters.
Build using Ahead of Time compilation.
Default: false.
Enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.
Default: false.
Use a separate bundle containing code used across multiple bundles.
Default: false.
A named build target, as specified in the "configurations" section of angular.json. Each named target is accompanied by a configuration of option defaults for that target. Setting this explicitly overrides the "--prod" flag.
Aliases: -c.
Define the crossorigin attribute setting of elements that provide CORS support.
Default: none.
Delete the output path before building.
Default: true.
Concatenate modules with Rollup before bundling them with Webpack.
Default: false.
Extract css from global styles into css files instead of js ones.
Default: false.
Extract all licenses in a separate file.
Default: false.
Run the TypeScript type checker in a forked process.
Default: true.
Shows a help message for this command in the console.
Default: false.
How to handle missing translations for i18n.
Default: warning.
Use file name for lazy loaded chunks.
Default: true.
Define the output filename cache-busting hashing mode.
Default: none.
Do not use the real path when resolving modules.
Default: false.
Log progress to the console while building.
Default: true.
Generates a service worker config for production builds.
Default: false.
Show circular dependency warnings on builds.
Default: true.
Output sourcemaps.
Default: true.
Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.
Default: false.
Enables the use of subresource integrity validation.
Default: false.
Use a separate bundle containing only vendor libraries.
Default: true.
Adds more details to output logging.
Default: true.
Run build when files change.
Default: false.
First, move to an angular project updated using ng generate command. Replace content of app.component.html with following contents and then, run the command. This chapter is available at https://www.tutorialspoint.com/angular_cli/angular_cli_ng_generate.htm.
<app-goals></app-goals>
<router-outlet></router-outlet>
An example for ng build command is given below −
\>Node\>TutorialsPoint> ng build
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 12.4 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 13.9 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 61.4 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 65 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.67 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.11 MB [initial] [rendered]
Date: 2020-06-04T01:31:35.612Z - Hash: d5fd9371cdc40ae353bc - Time: 210494ms

Here ng build command has built our project TutorialsPoint successfully.

    16 Lectures 
     1.5 hours 

 Anadi Sharma

    28 Lectures 
     2.5 hours 

 Anadi Sharma

    11 Lectures 
     7.5 hours 

 SHIVPRASAD KOIRALA

    16 Lectures 
     2.5 hours 

 Frahaan Hussain

    69 Lectures 
     5 hours 

 Senol Atac

    53 Lectures 
     3.5 hours 

 Senol Atac
 Print
 Add Notes
 Bookmark this page