Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@angular-devkit/build-angular
Advanced tools
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.
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
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 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 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 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.
This package contains Architect builders used to build and test Angular applications and libraries.
Name | Description |
---|---|
application | Build an Angular application targeting a browser and server environment using esbuild. |
app-shell | Build an Angular App shell. |
browser | Build an Angular application targeting a browser environment using Webpack. |
browser-esbuild | Build an Angular application targeting a browser environment using esbuild. |
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. |
prerender | Prerender pages of your application. Prerendering is the process where a dynamic page is processed at build time generating static HTML. |
server | Build an Angular application targeting a Node.js environment. |
ssr-dev-server | A development server which offers live reload during development, but uses server-side rendering. |
protractor | Deprecated - Run end-to-end tests using Protractor framework. |
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.
18.0.0 (2024-05-22)
ng doc
command has been removed without a replacement. To perform searches, please visit www.angular.devBy default, the index.html file is no longer emitted in the browser directory when using the application builder with SSR. Instead, an index.csr.html file is emitted. This change is implemented because in many cases server and cloud providers incorrectly treat the index.html file as a statically generated page. If you still require the old behavior, you can use the index
option to specify the output
file name.
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/my-app",
"index": {
"input": "src/index.html",
"output": "index.html"
}
}
}
}
The support for the legacy Sass build pipeline, previously accessible via NG_BUILD_LEGACY_SASS
when utilizing webpack-based builders, has been removed.
NodePackageLinkTask
in @angular-devkit/schematics
. A custom task should be created instead.| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------- |
| ac3019570 | feat | add ng dev
alias to ng serve
|
| 4087728c3 | feat | support for Node.js v22 |
| 41ab6c8c3 | fix | add --version
option |
| df4dde95d | fix | add @angular/build
package to update group list |
| 1039f6d79 | fix | change update guide link to angular.dev |
| f4670fcb1 | fix | eliminate prompts during ng version
command |
| a99ec6a54 | fix | keep cli package first in update package group metadata |
| dd786d495 | fix | only add --version option on default command |
| 03eee0545 | refactor | remove ng doc
command |
| c7b208555 | refactor | remove support for Node.js versions <18.19.1 and <20.11.1 |
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------------- |
| b2ac5fac7 | feat | allow application migration to use new build package in projects where possible |
| 6530aa11b | feat | replace assets
with public
directory |
| 725883713 | feat | use eventCoalescing option by default (standalone bootstrap) |
| 508d97da7 | feat | use ngZoneEventCoalescing option by default (module bootstrap) |
| f452589e2 | feat | use TypeScript bundler module resolution for new projects |
| 95a4d6ee5 | fix | add less dependency in application migration if needed |
| c46aa084f | fix | add postcss dependency in application migration if needed |
| 157329384 | fix | add spaces around eventCoalescing option |
| 23cc337aa | fix | keep deployUrl option when migrating to application builder |
| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------- | | ddd08efef | fix | resolve builder aliases from containing package |
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
| 53c319aaa | feat | add support for the poll
option in the library builder |
| 83d1d233a | feat | enhance Sass rebasing importer for resources URL defined in variables and handling of external paths |
| d51cb598a | feat | inject event-dispatch in SSR HTML page |
| 0b03829bc | feat | move i18n extraction for application builder to new build system package |
| 4ffe07aa2 | feat | move Vite-based dev-server for application builder to new build system package |
| d1c632af9 | feat | support native async/await when app is zoneless |
| 37fc7f0cc | fix | disable Vite prebundling when script optimizations are enabled |
| 2acf95a94 | fix | do not generate an index.html
file in the browser directory when using SSR. |
| 8a54875cb | fix | handle wrapping of class expressions emitted by esbuild |
| 97973059e | refactor | remove Sass legacy implementation |
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | -------- | ------------------------------- |
| 797584583 | refactor | deprecate NodePackageLinkTask
|
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------------------ |
| 810d213e1 | feat | introduce new official build system package |
| b7a0792b3 | fix | add a maximum rendering timeout for SSG |
| 411115303 | fix | add console note about development server raw file size |
| 921fa7cf4 | fix | add missing ansi-colors
and picomatch
dependencies |
| 791cf75af | fix | check both potential build packages in Angular version check |
| 4d7cd5e3e | fix | correctly wrap class expressions with static properties or blocks emitted by esbuild |
| 57f448a0f | fix | decode URL pathname decoding during SSG fetch |
| 940e382db | fix | disable Vite prebundling when script optimizations are enabled |
| 70dbc7a6e | fix | emit error for invalid self-closing element in index HTML |
| 44b401747 | fix | ensure input index HTML file triggers rebuilds when changed |
| dff4deaeb | fix | ensure recreated files are watched |
| 17931166d | fix | format sizes using decimal byte units consistently |
| 2085365e0 | fix | only generate shallow preload links for initial files |
| 33cd47c85 | fix | properly configure headers for media resources and HTML page |
| d10fece2c | fix | properly rebase Sass url() values with leading interpolations |
| 3f2963835 | perf | add persistent caching of JavaScript transformations |
| a15eb7d1c | perf | improve rebuild time for file loader usage with prebundling |
<a name="17.3.8"></a>
FAQs
Angular Webpack Build Facade
The npm package @angular-devkit/build-angular receives a total of 2,250,867 weekly downloads. As such, @angular-devkit/build-angular popularity was classified as popular.
We found that @angular-devkit/build-angular demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.