@angular-devkit/build-angular
Advanced tools
Package description
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 buildDevelopment 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 serveCode Optimization
Performs ahead-of-time compilation, tree-shaking, minification, and other optimizations to produce a production-ready application.
ng build --prodSass/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=scssInternationalization (i18n)
Builds the application with i18n support. It can generate multiple versions of your application, one for each locale you support.
ng build --localizeWebpack 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.
Changelog
13.1.0 (2021-12-09)
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------ |
| 56f802b7d | feat | ask to install angular-eslint when running ng lint in new projects |
| ecd9fb5c7 | feat | provide more detailed error for not found builder |
| 0b6071af3 | fix | ng doc does open browser on Windows |
| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------- | | d5d9f042f | feat | add VS Code configurations when generating a new workspace | | f95cc8281 | feat | generate new projects using TypeScript 4.5 | | 21809e14c | feat | loosen project name validation |
| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------ | | 339bab06c | feat | generate new projects using TypeScript 4.5 |
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------------- |
| bc8563760 | feat | add estimated transfer size to build output report |
| bc17cf0cd | feat | colorize file raw sizes based on failing budgets |
| 3c681b68d | feat | set dir attribute when using localization |
| 6d0f99a2d | feat | support JSON comments in dev-server proxy configuration file |
| 9300545e6 | feat | watch i18n translation files with dev server |
| 9bacba342 | fix | differentiate components and global styles using file query instead of filename |
| 7408511da | fix | display cleaner errors |
| d55fc62ef | fix | fallback to use language ID to set the dir attribute |
| 4c288b8bd | fix | lazy modules bundle budgets |
| 562dc6a89 | fix | prefer ES2015 entrypoints when application targets ES2019 or lower |
| ac66e400c | fix | Sass compilation in StackBlitz webcontainers |
| e1bac5bbb | fix | update Angular peer dependencies to v13.1 prerelease |
| 789ddfaeb | perf | disable webpack backwards compatible APIs |
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------- |
| 5402f99f8 | fix | add cjs and mjs to passthrough files |
| 10d4ede2d | fix | handle promise rejection during Angular program analyzes |
Alan Agius, Charles Lyding, Doug Parker, Ferdinand Malcher, Joey Perrott and Ruslan Lekhman
<!-- CHANGELOG SPLIT MARKER --><a name="12.2.14"></a>
Readme
This package contains Architect builders used to build and test Angular applications and libraries.
| 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. |
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.
FAQs
Angular Webpack Build Facade
The npm package @angular-devkit/build-angular receives a total of 2,142,124 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
Emerging ransomware groups drive a surge in activity in early 2024, with increasing software supply chain attacks predicted to impact critical industries reliant on third-party software.
Security News
In June 2023, Google sold all Google Domains accounts to Squarespace but more than a dozen customers have had their domains hijacked in the last week due to weak security defaults and migration issues.
![Massive Automated Spam Campaign Abuses GitHub to Flood npm Registry with Thousands of Garbage Tea[.]xyz Packages](https://cdn.sanity.io/images/cgdhsj6q/production/a74d1072ff2bb5cb96a404be58a649931ced2ba5-1024x1024.webp?w=400&fit=max&auto=format)
Security News
In a reprisal of their previous Tea[.]xyz spam campaign, a new wave of thousands of garbage packages are hitting npm, to artificially inflate the number of dependents for spammers' projects.