Angular CLI - ng build Command

Previous
Quiz
Next

The ng build command builds an angular application or library and saves the output into a directory named dist at the given path. In order to use this command, you just have to type it in the terminal while in your Angular project folder. Please note that the applications and libraries are built using different CLI builders.

These builders are handler functions used by an internal tool of Angular called Architect, as defined inside angular.json file. The Angular CLI commands use this Architect to run complex processes, such as building, testing, or serving your application.

Syntax

Syntax of the ng build command is as given below −

ng build <project> [options]
Or,
ng b <project> [options]

Arguments

The ng build command accepts a single argument:

Sr.No. Argument & Syntax Description
1 <project> The name of the application or library to be built.

Options

Options are the optional parameters of ng build command. The table given below shows those options −

Sr.No. Option & Syntax Description
1 --aot=true|false By default, its value it "true" which means the application or libraries are built using Ahead of Time compilation.
2 --baseHref=baseHref It specifies the base URL for the application being built.
3 --app-shell=true|false When "true", it will generate an application shell during build time.
4 --browser It is a String that specifies the full path for the browser entry point to the application. Note that the path is relative to the current directory.
5 --clear-screen=true|false

Use this option to clear the terminal screen during rebuilds automatically.

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

It is a String that defines the crossorigin attribute setting of elements for 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. It is of type String.
10 --define This option is of two types: String and Array. It is used to define global identifiers.
11 --external-dependencies If you want to exclude external dependencies from being bundled, use this option. The dependencies are passed in an array.
12 --extractLicenses=true|false

Extract all licenses in a separate file.

Default: true.
13 --i18n-duplicate-translation It is a String that defines how to handle duplicate translations for i18n.
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. It is of type String.
17 --localize=true|false This option is used to translate the bundles in one or more locales.
18 --inline-style-language This option specifies the stylesheet language.
19 --namedChunks=true|false

Use file name for lazy loaded chunks.

Default: false.
20 --output-mode To define mode: static or server.
21 --optimization=true|false When "true", it 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, write output to a folder named dist/ in the current project.
24 --poll A number that defines the file watching poll time period in milliseconds.
25 --polyfills The full path for the polyfills file, relative to the current workspace. It accepts value of the type array.
26 --preserveSymlinks=true|false

Do not use the real path when resolving modules.

Default: false.
27 --prerender=true|false To prerender pages of your application during build time.
28 --progress=true|false

Log progress to the console while building.

Default: true.
29 --server The path of server entry point, relative to current workspace. It is of type String.
30 --serviceWorker Generates a service worker config for production builds.
31 --ssr=true|false

To enable Server side render.

Default: false.
32 --sourceMap=true|false

Produce source maps.

Default: false.
33 --statsJson=true|false

Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.

Default: false.
34 --subresourceIntegrity=true|false

Enables the use of subresource integrity validation.

Default: false.
35 --tsConfig=tsConfig It is a string that sets the full path for the TypeScript configuration file, relative to the current workspace.
36 --verbose=true|false

Adds more details to output logging.

Default: false.
37 --watch=true|false

Run build when files change.

Default: false.
38 --webWorkerTsConfig=webWorkerTsConfig TypeScript configuration for Web Worker modules.
39 --allowed-common-js-dependencies It is an array of CommonJS or AMD packages. They can be used without a build time warning. If you want to allow all, use '*'.

Example

Let's use the ng build command to build our angular project named flex-app. You may see the output in dist folder of your project.

PS D:\Angular\flex-app> ng build
Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-VGVZJP5O.js      | main          | 180.94 kB |                48.47 kB
polyfills-FFHMD2TL.js | polyfills     |  34.52 kB |                11.28 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes

                      | Initial total | 215.46 kB |                59.75 kB

Application bundle generation complete. [9.530 seconds]

Output location: D:\Angular\flex-app\dist\flex-app
Print Page
Previous
Next
Advertisements