Files
adastra_app/docs/decisions/0007-build-tool-angular-cli-esbuild.md
T
julien c8e2fba13e docs(adr): convert all ADRs to MADR 2.1.2 format
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.
2026-04-26 16:50:34 +02:00

1.9 KiB
Raw Blame History

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 35× 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.