julien
c8e2fba13e
Rewrites all 12 frontend ADRs from a custom structure to the MADR 2.1.2 template required by the VS Code ADR Manager extension: bullet metadata (Status/Date), standardised section headings, "Chosen option: X, because Y" wording, and explicit Pros/Cons blocks per option.
44 lines
1.9 KiB
Markdown
44 lines
1.9 KiB
Markdown
# Use the esbuild-based Angular application builder
|
||
|
||
- Status: accepted
|
||
- Date: 2026-04-26
|
||
|
||
## Context and Problem Statement
|
||
|
||
Angular 17 introduced a new application builder (`@angular/build:application`) based on esbuild and Vite, replacing the legacy webpack-based `@angular-devkit/build-angular:browser` builder. Which builder should be used for development and production builds?
|
||
|
||
## Considered Options
|
||
|
||
- `@angular/build:application` — esbuild-based (Angular 17+)
|
||
- `@angular-devkit/build-angular:browser` — webpack-based (legacy)
|
||
|
||
## Decision Outcome
|
||
|
||
Chosen option: "`@angular/build:application`", because it is the Angular-recommended builder since v17, delivers significantly faster builds, and is required for certain schema-level features such as `stylePreprocessorOptions.sass.silenceDeprecations`.
|
||
|
||
### Positive Consequences
|
||
|
||
- Build times are 3–5× faster than the webpack builder for development and production.
|
||
- Native ESM output with better code splitting.
|
||
- Aligns with Angular's recommended toolchain for v17+.
|
||
|
||
### Negative Consequences
|
||
|
||
- Webpack-specific configuration options (custom plugins, loaders) no longer apply. Not an issue for this project.
|
||
- The `sass` sub-option under `stylePreprocessorOptions` is specific to this builder's schema; the Karma test builder uses a stricter schema and does not support it.
|
||
|
||
## Pros and Cons of the Options
|
||
|
||
### `@angular/build:application` (esbuild)
|
||
|
||
- Good, because significantly faster cold builds and incremental rebuilds.
|
||
- Good, because Angular-recommended default since v17.
|
||
- Good, because required for `sass.silenceDeprecations` support.
|
||
- Bad, because webpack plugin ecosystem is not compatible.
|
||
|
||
### `@angular-devkit/build-angular:browser` (webpack)
|
||
|
||
- Good, because supports custom webpack configuration.
|
||
- Bad, because deprecated direction; slower builds.
|
||
- Bad, because does not support the `sass.silenceDeprecations` option.
|