How to use the Angular CLI build command line

Created

The command can be used to build a project of type "application" or "library". When used to build a library, a different builder is invoked, and only the ts-config, configuration, and watch options are applied. All other options apply only to building applications.

Start with the production build:

production build
ng build
ng b
ng build --configuration=production
Compiling @angular/core : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.36 MB
polyfills.js        | polyfills     | 128.77 kB
main.js             | main          |  55.85 kB
runtime.js          | runtime       |   6.15 kB
styles.css          | styles        | 118 bytes

                    | Initial Total |   2.54 MB

Build at: 2021-06-28T03:27:03.978Z - Hash: f06216c42fb3364520f2 - Time: 22783ms

Base url for the application being built.

--base-href
ng build --output-path output --base-href /tools/
ng b --output-path output --base-href /tools/
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

The Angular CLI build Help Commands and Options

Usage: 
  ng build <project> [options]
  ng b <project> [options]

Arguments:
<project>
The name of the project to build. Can be an application or a library.
Options:
--allowed-common-js-dependencies
A list of CommonJS packages that are allowed to be used without a build time warning.
--aot default:true
Build using Ahead of Time compilation.
--base-href
Base url for the application being built.
--build-optimizer default:true
Enables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.
--common-chunk default:true
Generate a seperate bundle containing code used across multiple bundles.
--configuration
One or more named builder configurations as a comma-separated list as specified in the "configurations" section of angular.json.
The builder uses the named configurations to run the given target.
--cross-origin default:none
Define the crossorigin attribute setting of elements that provide CORS support.
--delete-output-path default:true
Delete the output path before building.
--deploy-url
URL where files will be deployed.
--extract-css default:true
Deprecated: Deprecated since version 11.0. No longer required to disable CSS extraction for HMR.Extract CSS from global styles into '.css' files instead of '.js'.
--extract-licenses default:true
Extract all licenses in a separate file.
--help default:false
Shows a help message for this command in the console.
--i18n-missing-translation default:warning
How to handle missing translations for i18n.
--index
Configures the generation of the application's HTML index.
--inline-style-language default:css
The stylesheet language to use for the application's inline component styles.
--localize
Translate the bundles in one or more locales.
--main
The full path for the main entry point to the app, relative to the current workspace.
--named-chunks default:false
Use file name for lazy loaded chunks.
--ngsw-config-path
Path to ngsw-config.json.
--optimization default:true
Enables optimization of the build output. Including minification of scripts and styles, tree-shaking, dead-code elimination, inlining of critical CSS and fonts inlining.
--output-hashing default:none
Define the output filename cache-busting hashing mode.
--output-path
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.
--poll
Enable and define the file watching poll time period in milliseconds.
--polyfills
The full path for the polyfills file, relative to the current workspace.
--preserve-symlinks
Do not use the real path when resolving modules. If unset then will default to true if NodeJS option --preserve-symlinks is set.
--prod
Deprecated: Use --configuration production instead.Shorthand for "--configuration=production". Set 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.
--progress default:true
Log progress to the console while building.
--resources-output-path
The path where style resources will be placed, relative to outputPath.
--service-worker default:false
Generates a service worker config for production builds.
--show-circular-dependencies default:false
Deprecated: The recommended method to detect circular dependencies in project code is to use either a lint rule or other external tooling. Show circular dependency warnings on builds.
--source-map default:false
Output source maps for scripts and styles.
--stats-json default:false
Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.
--subresource-integrity default:false
Enables the use of subresource integrity validation.
--ts-config
The full path for the TypeScript configuration file, relative to the current workspace.
--vendor-chunk default:false
Generate a seperate bundle containing only vendor libraries. This option should only used for development.
--verbose default:false
Adds more details to output logging.
--watch default:false
Run build when files change.
--web-worker-ts-config
TypeScript configuration for Web Worker modules.

Related Tags