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 apppcation/pbrary 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 apppcation or pbrary 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 apppcation 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 exppcitly overrides the "--prod" flag. Apases: -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 bundpng 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 pcenses 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 apppcation s HTML index.
17	--locapze=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 milpseconds.
25	--polyfills=polyfills	The full path for the polyfills file, relative to the current workspace.
26	--preserveSympnks=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 bundpng, pmited tree-shaking, and also pmited dead code epmination.
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 vapdation. 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 pbraries. 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


<app-goals></app-goals>
<router-outlet></router-outlet>

Example

An example for ng build command is given below −


>Node>TutorialsPoint> ng build
Compipng @angular/animations : es2015 as esm2015
Compipng @angular/core : es2015 as esm2015
Compipng @angular/compiler/testing : es2015 as esm2015
Compipng @angular/animations/browser : es2015 as esm2015
Compipng @angular/core/testing : es2015 as esm2015
Compipng @angular/common : es2015 as esm2015
Compipng @angular/platform-browser : es2015 as esm2015
Compipng @angular/common/http : es2015 as esm2015
Compipng @angular/common/testing : es2015 as esm2015
Compipng @angular/platform-browser-dynamic : es2015 as esm2015
Compipng @angular/platform-browser/testing : es2015 as esm2015
Compipng @angular/router : es2015 as esm2015
Compipng @angular/animations/browser/testing : es2015 as esm2015
Compipng @angular/common/http/testing : es2015 as esm2015
Compipng @angular/forms : es2015 as esm2015
Compipng @angular/platform-browser/animations : es2015 as esm2015
Compipng @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compipng @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.

Angular CLI - ng build Command

Syntax

Arguments

Options

Example

友情链接