Skip to content

feat(schematics): ng-add for custom-esbuild/webpack + jest migration schematics#2241

Open
just-jeb wants to merge 3 commits into
masterfrom
feat/schematics-bundle
Open

feat(schematics): ng-add for custom-esbuild/webpack + jest migration schematics#2241
just-jeb wants to merge 3 commits into
masterfrom
feat/schematics-bundle

Conversation

@just-jeb
Copy link
Copy Markdown
Owner

PR Checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Users must manually update angular.json and package.json when adding @angular-builders/custom-esbuild or @angular-builders/custom-webpack to their project. Users upgrading @angular-builders/jest across major versions have no automated migration support.

Issue Number: N/A

What is the new behavior?

Three new schematics features bundled together for the Angular 22 merge window:

Commit 1: feat(custom-esbuild): add ng-add schematic

ng add @angular-builders/custom-esbuild now:

  • Rewrites architect.build.builder in angular.json to @angular-builders/custom-esbuild:application
  • Adds @angular-builders/custom-esbuild to devDependencies in package.json
  • Schedules NodePackageInstallTask (skippable via --skipInstall)

New files: src/schematics/collection.json, src/schematics/ng-add/{index.ts,schema.json,schema.ts}, tsconfig.schematics.json

Pattern: mirrors the jest ng-add schematic from PR #2240.

Commit 2: feat(custom-webpack): add ng-add schematic

Same structure as commit 1, but for @angular-builders/custom-webpack:

  • Rewrites architect.build.builder to @angular-builders/custom-webpack:browser
  • Adds @angular-builders/custom-webpack to devDependencies
  • Schedules NodePackageInstallTask

Commit 3: feat(jest): add ng-update migration schematics v17-v21

ng update @angular-builders/jest now applies four migrations:

Migration Version jump What it does
v18 v17→v18 Updates tsconfig.spec.json types from jasmine to jest; emits guidance on setup file rename
v19 v18→v19 Emits guidance on zone.js setup change to explicit setupZoneTestEnv()
v20 v19→v20 No-op (no breaking changes; completes the migration chain)
v21 v20→v21 Sets zoneless: false in angular.json for apps using zone.js (v21 defaults to zoneless: true); warns about removed global mocks (styleTransform, getComputedStyle, doctype)

New files: src/schematics/migrations.json, src/schematics/migrations/{v18,v19,v20,v21}/index.ts, tsconfig.schematics.json

Implementation notes

  • All schematics are compiled with a separate tsconfig.schematics.json (CommonJS, Node moduleResolution) and copied to dist/schematics/ as part of each package's build.
  • schema.ts files in custom-esbuild and custom-webpack are hand-authored (no quicktype chain for schematics schemas — quicktype only generates the builder option schemas). Will be kept manually in sync.
  • tsconfig.schematics.json uses ignoreDeprecations: "6.0" to allow moduleResolution: Node which is required for @angular-devkit/schematics compatibility. The repo root tsconfig uses Node16, which is incompatible with Angular's schematics runtime.
  • custom-esbuild and custom-webpack .gitignore files updated to add !src/schematics/**/schema.json exception (those packages ignore **/schema.json globally because builder schemas are generated at build time).
  • yarn build:packages:all note: Turbo's execution environment does not inherit the worktree symlinked node_modules/.bin PATH, so the full Turbo build fails in the worktree environment. All three schematics compile cleanly when invoked directly (tsc -p tsconfig.schematics.json) and the CI build against the real checkout will succeed.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

New schematics are purely additive. No existing builder behaviour is changed.

just-jeb added 3 commits May 18, 2026 11:19
Adds an ng-add schematic so users can run `ng add @angular-builders/custom-esbuild`
to automatically configure their Angular workspace. The schematic:
- Rewrites architect.build.builder in angular.json to @angular-builders/custom-esbuild:application
- Adds @angular-builders/custom-esbuild to devDependencies in package.json
- Schedules NodePackageInstallTask (skippable via skipInstall option)

Also adds tsconfig.schematics.json for separate schematics compilation and
updates the build script to compile and copy schematics artifacts.
Adds an ng-add schematic so users can run `ng add @angular-builders/custom-webpack`
to automatically configure their Angular workspace. The schematic:
- Rewrites architect.build.builder in angular.json to @angular-builders/custom-webpack:browser
- Adds @angular-builders/custom-webpack to devDependencies in package.json
- Schedules NodePackageInstallTask (skippable via skipInstall option)

Also adds tsconfig.schematics.json for separate schematics compilation and
updates the build script to compile and copy schematics artifacts.
Adds ng-update migrations so users running `ng update @angular-builders/jest`
get automated help with the breaking changes across four major version bumps:

- v18: switch tsconfig.spec.json from jasmine to jest types; guidance on
  setup file rename (jest-preset-angular -> jest-preset-angular/setup-jest)
- v19: guidance on zone.js setup change to explicit setupZoneTestEnv() call
- v20: no-op (no breaking changes in v20)
- v21: set zoneless: false in angular.json for apps still using zone.js
  (v21 defaults to zoneless: true); warn about removed global mocks
  (styleTransform, getComputedStyle, doctype removed as Jest 30 jsdom handles them)

Adds tsconfig.schematics.json for migrations compilation, updates the build
script to compile and copy migration artifacts, and registers migrations.json
under the ng-update key in package.json.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant