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:
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"
:
{
"build"
:
{
"builder"
:
"@angular-devkit/build-angular:application"
,
…
}
,
"serve"
:
{
…
}
"test"
:
{
…
}
…
}
}
}
}
This page discusses usage and options of
@angular-devkit/build-angular:application
.
The result of this build process is output to a directory (
dist/${PROJECT_NAME}
by default).
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:
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:
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"
]
…
}
…
}
,
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 versions
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox 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.