Angular builder differences

Local laboratory that compares ngx-build-plus and @angular-builders/custom-webpack across two equivalent Angular 22 shells.

The main result is confirmed: ngx-build-plus@20.0.0 can resolve, compile, and serve Angular 22.0.8 because its @angular-devkit/build-angular peer is open as >=20.0.0. This demonstrates compatibility with the exact lockfile versions, not official support for any future version.

Mental model

Neither package is the bundler. Both are extension layers that sit between Angular Architect and Angular DevKit's Webpack builder:

ng build / ng serve
  -> angular.json target
  -> community builder
  -> @angular-devkit/build-angular
  -> Webpack
  -> application or local server

This distinction helps answer three different questions:

1. Can npm resolve the dependencies?
2. Can the builder compile Angular 22?
3. Can the builder also integrate the development server?

The repository verifies all three separately.

Tested versions

Tool	Version
Angular framework and CLI	22.0.8
@angular-devkit/build-angular	22.0.8
ngx-build-plus	20.0.0
@angular-builders/custom-webpack	22.0.1
Webpack	5.106.2
Node.js	24.15.0
npm	11.12.1

npm versions are pinned in package.json and package-lock.json. No --force, --legacy-peer-deps, overrides, or patches are used.

Quick start

npm ci
npm run verify:dependencies
npm run verify

npm run verify runs production and development builds, the differential scenarios, artifact checks, and smoke tests of the local servers. The latter temporarily use 127.0.0.1:4301 and 127.0.0.1:4302.

Running each shell

npm run serve:ngx
npm run serve:custom-webpack

• shell-ngx-build-plus: http://127.0.0.1:4301
• shell-custom-webpack: http://127.0.0.1:4302

Both applications share the same functional sources. The UI shows the builder because Webpack replaces BUILD_TOOL_NAME and BUILD_TOOL_VERSION during compilation.

Available experiments

Command	What it demonstrates
npm run build:ngx	Angular 22 executed through ngx-build-plus@20
npm run build:custom-webpack	Partial configuration and mergeRules
npm run build:ngx:development	Normal output with a separate runtime.js
npm run build:ngx:single-bundle	singleBundle inlines the runtime into main.js
npm run build:custom-webpack:factory	Factory with the full configuration and target
npm run verify:artifacts	Source parity and semantic build evidence
npm run verify:servers	Independent integration of both serve targets

Observed differences

Area	ngx-build-plus	custom-webpack
Compatibility	README up to Angular 20; DevKit peer >=20	Major 22 aligned with Angular 22
Partial config	extraWebpackConfig	customWebpackConfig.path
Merge	Fixed webpack-merge	mergeRules and replaceDuplicatePlugins
Full control	configHook or plugin	Synchronous/asynchronous factory
Extra lifecycle	pre, config, post	Factory during configuration
Unique capabilities	singleBundle, keepStyles, keepPolyfills	indexTransform, verbose, TypeScript/ESM
serve	Repeats extraWebpackConfig on the target	Reads the configuration from buildTarget

Structure

projects/
  shell-ngx-build-plus/
  shell-custom-webpack/
webpack/
  shared/
  ngx-build-plus/
  custom-webpack/
scripts/
docs/
  overview/
  changelog/

• projects/ holds the two equivalent shells.
• webpack/shared/ holds neutral evidence used by both cases.
• The directory-specific layers show each wrapper's own APIs.
• scripts/ holds integration checks that do not depend on hashes.
• docs/ explains the design and preserves the learning process.

Guided documentation

• Builder architecture
• Initialization and dependency resolution
• Configuration, experiments, and issues
• Verification and evidence limits
• Approved plan

Security and maintenance

npm audit --omit=dev reports zero vulnerabilities. The full audit reports transitive alerts in the Angular CLI toolchain, PostCSS, and Webpack Dev Server; some have no compatible fix. npm audit fix --force is not applied because it would propose major changes and destroy the reproducibility of the experiment.

Webpack is officially deprecated in Angular 22. This laboratory uses it on purpose to study both builders; it is not a general recommendation for starting new applications with Webpack.

Primary sources

• Angular: application builders
• Angular: migrating to the modern build
• ngx-build-plus
• @angular-builders/custom-webpack

License

MIT. See LICENSE.