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-dependenciesA list of CommonJS packages that are allowed to be used without a build time warning.--aot default:trueBuild using Ahead of Time compilation.--base-hrefBase url for the application being built.--build-optimizer default:trueEnables '@angular-devkit/build-optimizer' optimizations when using the 'aot' option.--common-chunk default:trueGenerate a seperate bundle containing code used across multiple bundles.--configurationOne 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:noneDefine the crossorigin attribute setting of elements that provide CORS support.--delete-output-path default:trueDelete the output path before building.--deploy-urlURL where files will be deployed.--extract-css default:trueDeprecated: 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:trueExtract all licenses in a separate file.--help default:falseShows a help message for this command in the console.--i18n-missing-translation default:warningHow to handle missing translations for i18n.--indexConfigures the generation of the application's HTML index.--inline-style-language default:cssThe stylesheet language to use for the application's inline component styles.--localizeTranslate the bundles in one or more locales.--mainThe full path for the main entry point to the app, relative to the current workspace.--named-chunks default:falseUse file name for lazy loaded chunks.--ngsw-config-pathPath to ngsw-config.json.--optimization default:trueEnables 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:noneDefine the output filename cache-busting hashing mode.--output-pathThe 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.--pollEnable and define the file watching poll time period in milliseconds.--polyfillsThe full path for the polyfills file, relative to the current workspace.--preserve-symlinksDo not use the real path when resolving modules. If unset then will default to true if NodeJS option --preserve-symlinks is set.--prodDeprecated: 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:trueLog progress to the console while building.--resources-output-pathThe path where style resources will be placed, relative to outputPath.--service-worker default:falseGenerates a service worker config for production builds.--show-circular-dependencies default:falseDeprecated: 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:falseOutput source maps for scripts and styles.--stats-json default:falseGenerates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.--subresource-integrity default:falseEnables the use of subresource integrity validation.--ts-configThe full path for the TypeScript configuration file, relative to the current workspace.--vendor-chunk default:falseGenerate a seperate bundle containing only vendor libraries. This option should only used for development.--verbose default:falseAdds more details to output logging.--watch default:falseRun build when files change.--web-worker-ts-configTypeScript configuration for Web Worker modules.