@angular-devkit/build-angular

What is @angular-devkit/build-angular?

The @angular-devkit/build-angular package is a set of tools and build configurations used to compile and build Angular applications. It is part of the Angular DevKit and is designed to work with the Angular CLI to provide a smooth development experience. It includes features for building, bundling, optimizing, and serving Angular applications.

What are @angular-devkit/build-angular's main functionalities?

Building Angular Applications

Compiles an Angular app into an output directory. The build artifacts will be stored in the dist/ directory by default.

ng build

Development Server

Builds the application and starts a web server. You can view your application in the browser by navigating to the provided localhost address.

ng serve

Code Optimization

Performs ahead-of-time compilation, tree-shaking, minification, and other optimizations to produce a production-ready application.

ng build --prod

Sass/SCSS Compilation

Allows you to use Sass/SCSS stylesheets with your Angular components, which will be compiled to CSS during the build process.

ng build --style=scss

Internationalization (i18n)

Builds the application with i18n support. It can generate multiple versions of your application, one for each locale you support.

ng build --localize

Other packages similar to @angular-devkit/build-angular

webpack

Webpack is a powerful module bundler that can be used for building Angular applications. It is more generic than @angular-devkit/build-angular and can be used with various frameworks and libraries. It requires more configuration but is highly customizable.

parcel-bundler

Parcel is a fast, zero-configuration web application bundler that can also be used with Angular. It is simpler to set up than Webpack but may not offer the same level of control for complex build configurations.

rollup

Rollup is a module bundler for JavaScript that compiles small pieces of code into something larger and more complex, such as a library or application. It is known for its tree-shaking capabilities and is often used for building libraries. It can be used with Angular but is not as integrated as @angular-devkit/build-angular.

gulp

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow. While it can be used to build Angular applications, it is more of a task runner than a specialized Angular build tool and requires more setup for Angular-specific tasks.

README

@angular-devkit/build-angular

This package contains Architect builders used to build and test Angular applications and libraries.

Builders

Name	Description
app-shell	Build an Angular App shell.
browser	Build an Angular application targeting a browser environment.
dev-server	A development server that provides live reloading.
extract-i18n	Extract i18n messages from an Angular application.
karma	Execute unit tests using Karma test runner.
ng-packagr	Build and package an Angular library in Angular Package Format (APF) format using ng-packagr.
server	Build an Angular application targeting a Node.js environment.
protractor	Deprecated - Run end-to-end tests using Protractor framework.

Disclaimer

While the builders when executed via the Angular CLI and their associated options are considered stable, the programmatic APIs are not considered officially supported and are not subject to the breaking change guarantees of SemVer.

Changelog

15.0.0 (2022-11-16)

Breaking Changes

@angular/cli

• The Angular CLI no longer supports 16.10.x, 16.11.x and 16.12.x. Current minimum versions of Node.js are 14.20.0, 16.13.0 and 18.10.0.
• Node.js versions older than 14.20 are no longer supported.
• The 'path' option in schematics schema no longer has a special meaning. Use 'workingDirectory' smart default provider should be used instead.

@schematics/angular

• Removed unused appDir option from Universal and App-Shell schematic. This option can safely be removed if present since it no longer has effect.

• analyticsSharing option in the global angular configuration has been removed without replacement. This option was used to configure the Angular CLI to access to your own users' CLI usage data.

  If this option is used, it can be removed using ng config --global cli.analyticsSharing undefined.

• analytics APIs have been removed without replacement from @angular-devkit/core and @angular-devkit/architect.

@angular-devkit/build-angular

• TypeScript versions older than 4.8.2 are no longer supported.

• The server builder bundleDependencies option has been removed. This option was used pre Ivy. Currently, using this option is unlikely to produce working server bundles.

  The externalDependencies option can be used instead to exclude specific node_module packages from the final bundle.

• • Deprecated support for tilde import has been removed. Please update the imports by removing the ~.

  Before

  @import '~font-awesome/scss/font-awesome';
  

  After

  @import 'font-awesome/scss/font-awesome';
  

  • By default the CLI will use Sass modern API, While not recommended, users can still opt to use legacy API by setting NG_BUILD_LEGACY_SASS=1.

• Internally the Angular CLI now always set the TypeScript target to ES2022 and useDefineForClassFields to false unless the target is set to ES2022 or later in the TypeScript configuration. To control ECMA version and features use the Browerslist configuration.

• require.context are no longer parsed. Webpack specific features are not supported nor guaranteed to work in the future.

• Producing ES5 output is no longer possible. This was needed for Internet Explorer which is no longer supported. All browsers that Angular supports work with ES2015+

• server builder bundleDependencies option now only accept a boolean value.

• Deprecated support for Stylus has been removed. The Stylus package has never reached a stable version and its usage in the Angular CLI is minimal. It's recommended to migrate to another CSS preprocessor that the Angular CLI supports.

@angular-devkit/core

• Workspace projects with missing root is now an error.

@ngtools/webpack

• TypeScript versions older than 4.8.2 are no longer supported.

@schematics/angular

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------ | | 766d4a089 | feat | add migration to remove require calls from karma builder main file | | d8bff4f1e | feat | Added --project-root option to the library schematics | | 597bfea1b | feat | drop polyfills.ts file from new templates | | 1c21e470c | feat | enable error on unknown properties and elements in tests | | f2a0682dc | feat | generate new projects using TypeScript 4.8.2 | | b06421d15 | feat | mark projectRoot as non hidden option in application schematic | | b6897dbb0 | feat | remove karma.conf.js from newly generated projects | | 301b5669a | feat | remove ngOnInit from component template | | 9beb878e2 | feat | remove Browserslist configuration files from projects | | 283b564d1 | feat | remove environment files in new applications | | 56a1e8f9f | feat | remove test.ts file from new projects | | 4e69e8050 | fix | add @angular/localize as type when localize package is installed | | 57d93fb7d | fix | mark project as required option | | 84e3f7727 | fix | remove empty lines | | 316a50d75 | fix | remove TypeScript target from universal schematic | | 69b221498 | refactor | remove deprecated appDir option |

@angular/cli

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------- | | 4827d1b23 | feat | add support for Node.js version 18 | | 4b623461a | feat | drop support for Node.js versions older than 14.20 | | 3dea1fa71 | fix | add unique user id as user parameter in GA | | af07aa340 | fix | add workspace information as part of analytics collection | | 83524f625 | fix | allow ng add to find prerelease versions when CLI is prerelease | | 22955f245 | fix | do not collect analytics when running in non TTY mode | | 35e5f4278 | fix | exclude @angular/localize@<10.0.0 from ng add pa… (#24152) | | 1a584364e | fix | exclude @angular/material@7.x from ng add package discovery | | ff0382718 | fix | respect registry in RC when running update through yarn | | 774d349b7 | refactor | remove deprecated path handler |

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------- | | 639a3071c | refactor | migrate analytics collector to use GA4 | | c969152de | refactor | remove analytics API from core and architect |

@angular-devkit/build-angular

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------- | | 4ead45cab | feat | add ng-server-context when using app-shell builder | | 1c527a9da | feat | add esbuild-based builder initial support for fileReplacements | | 67324b3e5 | feat | add initial incremental code rebuilding to esbuild builder | | 3d94ca21b | feat | add initial watch support to esbuild-based builder | | c592ec584 | feat | amend polyfills option in all builders to support an array of module specifiers | | a95d130ef | feat | auto include @angular/localize/init when found in types | | 979bce45e | feat | auto include @angular/platform-server/init during server builds | | fd4175357 | feat | drop support for TypeScript 4.6 and 4.7 | | 15d3fc6dc | feat | export @angular/platform-server symbols in server bundle | | 05a98c029 | feat | karma builder main option is now optional | | 2b6029245 | feat | providing a karma config is now optional | | 9c13fce16 | feat | remove bundleDependencies from server builder | | 308e3a017 | feat | switch to use Sass modern API | | 1e5d4a750 | feat | use Browserslist to determine ECMA output | | 3ff391738 | fix | account for package.json exports fields with CSS import statements | | 001445982 | fix | account for package.json exports with Sass in esbuild builder | | 6280741ce | fix | add @angular/platform-server as an optional peer dependency | | f9a2c3a12 | fix | allow both script and module sourceTypes to be localized | | 4cb27b803 | fix | avoid attempted resolve of external CSS URLs with esbuild builder | | 192e0e6d7 | fix | correct escaping of target warning text in esbuild builder | | 4fcb0a82b | fix | correctly resolve Sass partial files in node packages | | fb5a66ae6 | fix | fix crash when Sass error occurs | | b6df9c136 | fix | handle conditional exports in scripts and styles option | | 0ee7625d6 | fix | ignore cache path when watching with esbuild builder | | e34bfe5eb | fix | ignore specs in node_modules when finding specs | | f143171fd | fix | only add @angular/platform-server/init when package is installed. | | 3a1970b76 | fix | only import karma when running karma builder | | 8b84c18ed | fix | provide workaround for V8 object spread performance defect | | 7dd122ad5 | fix | rebase Sass url() values when using esbuild-based builder | | 2105964af | fix | resolve transitive dependencies in Sass when using Yarn PNP | | 54e1c01d8 | fix | show file replacement in TS missing file error in esbuild builder | | 6c3f281d9 | fix | show warning when using TypeScript target older then ES2022 in esbuild builder | | 8f8e02c32 | fix | support Yarn PNP resolution in modern SASS API | | fc82e3bec | fix | update browerslist package | | 0d62157a3 | fix | update sourcemaps when rebasing Sass url() functions in esbuild builder | | 1518133db | fix | use relative sourcemap source paths for Sass in esbuild builder | | fb4ead2ce | fix | wait during file watching to improve multi-save rebuilds for esbuild builder | | b059fc735 | fix | warn when components styles sourcemaps are not generated when styles optimization is enabled | | 9d0872fb5 | perf | add initial global styles incremental rebuilds with esbuild builder | | 0fe6b3b75 | perf | add vendor chunking to server builder | | 8c915d414 | perf | avoid extra babel file reads in esbuild builder rebuilds | | 919fe2148 | perf | avoid extra TypeScript emits with esbuild rebuilds | | 92145c4a7 | perf | avoid template diagnostics for declaration files in esbuild builder | | 52db3c000 | perf | minimize Angular diagnostics incremental analysis in esbuild-based builder | | feb06753d | perf | use esbuild-based builder to directly downlevel for await...of | | 9d83fb91b | perf | use Sass worker pool for Sass support in esbuild builder | | 45a94228f | perf | use Uint8Arrays for incremental caching with esbuild-based builder | | f393b0928 | refactor | disable requireContext parsing | | 12931ba8c | refactor | remove deprecated ES5 support | | 7f1017e60 | refactor | remove old bundleDependencies enum logic | | 2ba44a433 | refactor | remove support for Stylus |

@angular-devkit/core

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------- | | ea4c0aa2e | fix | throw error when project has missing root property | | de467f46d | fix | update logger forEach promiseCtor type |

@angular-devkit/schematics

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------ | | 9b07b469b | refactor | remove UpdateBuffer and rename UpdateBuffer2 to UpdateBuffer |

@ngtools/webpack

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------------------------- | | 43bd0abc1 | feat | drop support for TypeScript 4.6 and 4.7 | | 1c1f985b9 | fix | support inline style sourcemaps when using css-loader for component styles |

Special Thanks

Alan Agius, Brent Schmidt, Charles Lyding, Cédric Exbrayat, Dariusz Ostolski, Doug Parker, Günhan Gülsoy, Jason Bedard, Lukas Spirig, Ruslan Lekhman, angular-robot[bot] and minijus

<!-- CHANGELOG SPLIT MARKER -->

<a name="14.2.10"></a>