”;
This chapter explains the syntax, argument and options of ng build command along with an example.
Syntax
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.
Arguments
The argument for ng build command is as follows −
| Sr.No. | Argument & Syntax | Description |
|---|---|---|
| 1 | <project> | The name of the application or library to be built. |
Options
Options are optional parameters.
| Sr.No. | Option & Syntax | Description |
|---|---|---|
| 1 | –aot=true|false |
Build using Ahead of Time compilation.
Default: false.
|
| 2 | –baseHref=baseHref | Base url for the application being built. |
| 3 | –buildEventLog=buildEventLog | EXPERIMENTAL Output file path for Build Event Protocol events. |
| 4 | –buildOptimizer=true|false |
Enables ”@angular-devkit/build-optimizer” optimizations when using the ”aot” option.
Default: false. |
| 5 | –commonChunk=true|false |
Use a separate bundle containing code used across multiple bundles.
Default: false.
|
| 6 | –configuration=configuration |
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. |
| 7 | –crossOrigin=none|anonymous|use-credentials |
Define the crossorigin attribute setting of elements that provide CORS support.
Default: none. |
| 8 | –deleteOutputPath=true|false |
Delete the output path before building.
Default: true.
|
| 9 | –deployUrl=deployUrl | URL where files will be deployed. |
| 10 | –experimentalRollupPass=true|false |
Concatenate modules with Rollup before bundling them with Webpack.
Default: false. |
| 11 | –extractCss=true|false |
Extract css from global styles into css files instead of js ones.
Default: false.
|
| 12 | –extractLicenses=true|false |
Extract all licenses in a separate file.
Default: false.
|
| 13 | –forkTypeChecker=true|false |
Run the TypeScript type checker in a forked process.
Default: true.
|
| 14 | –help=true|false|json|JSON |
Shows a help message for this command in the console.
Default: false.
|
| 15 | –i18nMissingTranslation=warning|error|ignore |
How to handle missing translations for i18n.
Default: warning.
|
| 16 | –index=index | Configures the generation of the application”s HTML index. |
| 17 | –localize=true|false | |
| 18 | –main=main | The full path for the main entry point to the app, relative to the current workspace. |
| 19 | –namedChunks=true|false |
Use file name for lazy loaded chunks.
Default: true.
|
| 20 | –ngswConfigPath=ngswConfigPath | Path to ngsw-config.json. |
| 21 | –optimization=true|false | Enables optimization of the build output. |
| 22 | –outputHashing=none|all|media|bundles |
Define the output filename cache-busting hashing mode.
Default: none.
|
| 23 | –outputPath=outputPath | The full path for the new output directory, relative to the current workspace. By default, writes output to a folder named dist/ in the current project. |
| 24 | –poll | Enable and define the file watching poll time period in milliseconds. |
| 25 | –polyfills=polyfills | The full path for the polyfills file, relative to the current workspace. |
| 26 | –preserveSymlinks=true|false |
Do not use the real path when resolving modules.
Default: false.
|
| 27 | –prod=true|false | Shorthand for “–configuration=production”. When true, sets the build configuration to the production target. By default, the production target is set up in the workspace configuration such that all builds make use of bundling, limited tree-shaking, and also limited dead code elimination. |
| 28 | –progress=true|false |
Log progress to the console while building.
Default: true.
|
| 27 | –resourcesOutputPath=resourcesOutputPath | The path where style resources will be placed, relative to outputPath. |
| 28 | –serviceWorker=true|false |
Generates a service worker config for production builds.
Default: false.
|
| 29 | –showCircularDependencies=true|false |
Show circular dependency warnings on builds.
Default: true.
|
| 30 | –sourceMap=true|false |
Output sourcemaps.
Default: true.
|
| 31 | –statsJson=true|false |
Generates a ”stats.json” file which can be analyzed using tools such as ”webpack-bundle-analyzer”.
Default: false.
|
| 32 | –subresourceIntegrity=true|false |
Enables the use of subresource integrity validation.
Default: false.
|
| 33 | –tsConfig=tsConfig | The full path for the TypeScript configuration file, relative to the current workspace. |
| 34 | –vendorChunk=true|false |
Use a separate bundle containing only vendor libraries.
Default: true.
|
| 35 | –verbose=true|false |
Adds more details to output logging.
Default: true. |
| 36 | –watch=true|false |
Run build when files change.
Default: false. |
| 37 | –webWorkerTsConfig=webWorkerTsConfig | TypeScript configuration for Web Worker modules. |
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>
Example
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.
”;