開発者ツール
Angular CLI

Building Angular apps

You can build your Angular CLI application or library with the ng build command. This will compile your TypeScript code to JavaScript, as well as optimize, bundle, and minify the output as appropriate.

ng build only executes the builder for the build target in the default project as specified in angular.json. Angular CLI includes four builders typically used as build targets:

Builder Purpose
@angular-devkit/build-angular:browser Bundles a client-side application for use in a browser with Webpack.
@angular-devkit/build-angular:browser-esbuild Bundles a client-side application for use in a browser with esbuild. See browser-esbuild documentation for more information.
@angular-devkit/build-angular:application Builds an application with a client-side bundle, a Node server, and build-time prerendered routes with esbuild.
@angular-devkit/build-angular:ng-packagr Builds an Angular library adhering to Angular Package Format.

Applications generated by ng new use @angular-devkit/build-angular:application by default. Libraries generated by ng generate library use @angular-devkit/build-angular:ng-packagr by default.

You can determine which builder is being used for a particular project by looking up the build target for that project.

      
{  "projects": {    "my-app": {      "architect": {        // `ng build` invokes the Architect target named `build`.        "build": {          "builder": "@angular-devkit/build-angular:application",        },        "serve": {  }        "test": {  }      }    }  }}

This page discusses usage and options of @angular-devkit/build-angular:application.

Output directory

The result of this build process is output to a directory (dist/${PROJECT_NAME} by default).

Configuring size budgets

As applications grow in functionality, they also grow in size. The CLI lets you set size thresholds in your configuration to ensure that parts of your application stay within size boundaries that you define.

Define your size boundaries in the CLI configuration file, angular.json, in a budgets section for each configured environment.

      
{  "configurations": {    "production": {      "budgets": [        {          "type": "initial",          "maximumWarning": "250kb",          "maximumError": "500kb"        },      ]    }  }}

You can specify size budgets for the entire app, and for particular parts. Each budget entry configures a budget of a given type. Specify size values in the following formats:

Size value Details
123 or 123b Size in bytes.
123kb Size in kilobytes.
123mb Size in megabytes.
12% Percentage of size relative to baseline. (Not valid for baseline values.)

When you configure a budget, the builder warns or reports an error when a given part of the application reaches or exceeds a boundary size that you set.

Each budget entry is a JSON object with the following properties:

Property Value
type The type of budget. One of:
Value Details
bundle The size of a specific bundle.
initial The size of JavaScript needed for bootstrapping the application. Defaults to warning at 500kb and erroring at 1mb.
allScript The size of all scripts.
all The size of the entire application.
anyComponentStyle This size of any one component stylesheet. Defaults to warning at 2kb and erroring at 4kb.
anyScript The size of any one script.
any The size of any file.
name The name of the bundle (for type=bundle).
baseline The baseline size for comparison.
maximumWarning The maximum threshold for warning relative to the baseline.
maximumError The maximum threshold for error relative to the baseline.
minimumWarning The minimum threshold for warning relative to the baseline.
minimumError The minimum threshold for error relative to the baseline.
warning The threshold for warning relative to the baseline (min & max).
error The threshold for error relative to the baseline (min & max).

Configuring CommonJS dependencies

Always prefer native ECMAScript modules (ESM) throughout your application and its dependencies. ESM is a fully specified web standard and JavaScript language feature with strong static analysis support. This makes bundle optimizations more powerful than other module formats.

Angular CLI also supports importing CommonJS dependencies into your project and will bundle these dependencies automatically. However, CommonJS modules can prevent bundlers and minifiers from optimizing those modules effectively, which results in larger bundle sizes. For more information, see How CommonJS is making your bundles larger.

Angular CLI outputs warnings if it detects that your browser application depends on CommonJS modules. When you encounter a CommonJS dependency, consider asking the maintainer to support ECMAScript modules, contributing that support yourself, or using an alternative dependency which meets your needs. If the best option is to use a CommonJS dependency, you can disable these warnings by adding the CommonJS module name to allowedCommonJsDependencies option in the build options located in angular.json.

      
"build": {  "builder": "@angular-devkit/build-angular:browser",  "options": {     "allowedCommonJsDependencies": [        "lodash"     ]   }},

Configuring browser compatibility

The Angular CLI uses Browserslist to ensure compatibility with different browser versions. Depending on supported browsers, Angular will automatically transform certain JavaScript and CSS features to ensure the built application does not use a feature which has not been implemented by a supported browser. However, the Angular CLI will not automatically add polyfills to supplement missing Web APIs. Use the polyfills option in angular.json to add polyfills.

Internally, the Angular CLI uses the below default browserslist configuration which matches the browsers that are supported by Angular.

      
last 2 Chrome versionslast 1 Firefox versionlast 2 Edge major versionslast 2 Safari major versionslast 2 iOS major versionsFirefox ESR

To override the internal configuration, run ng generate config browserslist, which generates a .browserslistrc configuration file in the project directory.

See the browserslist repository for more examples of how to target specific browsers and versions. Avoid expanding this list to more browsers. Even if your application code more broadly compatible, Angular itself might not be. You should only ever reduce the set of browsers or versions in this list.

HELPFUL: Use browsersl.ist to display compatible browsers for a browserslist query.