Angular CLI - ng build Command



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.

Advertisements