@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

16.2.0 (2023-08-09)

@angular-devkit/build-angular

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------------- | | e6b377436 | feat | add ssr option in application builder | | c05c83be7 | feat | add initial application builder implementation | | 095f5aba6 | feat | add initial support for server bundle generation using esbuild | | cb165a75d | feat | add pre-rendering (SSG) and App-shell support generation to application builder | | 2a3fc6846 | feat | add preload hints based on transitive initial files | | 099cec758 | feat | add support for serving SSR with dev-server when using the application builder | | 449e21b3a | fix | correctly load dev server assets with vite 4.4.0+ | | f42f10135 | fix | ensure preload hints for external stylesheets are marked as styles | | 7defb3635 | fix | ensure that server dependencies are loaded also in ssr entrypoint | | 05f31bd28 | fix | prevent race condition in setting up sass worker pool | | 5048f6e82 | fix | Set chunk names explicitly | | 974748cdf | perf | filter postcss usage based on content in esbuild builder | | 61a652d91 | perf | inject Sass import/use directive importer information when resolving | | a0a2c7aef | perf | only load browserslist in babel preset if needed | | 6bfd1800e | perf | use in-memory Sass module resolution cache |

<!-- CHANGELOG SPLIT MARKER -->

<a name="16.1.8"></a>