Support Angular 21

MIGRATION.MD

@@ -1,3 +1,65 @@
+# Migration from version 20 to version 21
+
+## Breaking Changes
+
+### Jest Builder: TypeScript Configuration Required
+
+Users of `@angular-builders/jest` must update their `tsconfig.spec.json` to include `module` and `moduleResolution` settings. See the Jest builder section below for details.
+
+## Custom ESBuild builder
+
+- Updated to support Angular 21's `@angular/build` schema changes
+- The `buildTarget` and `tsConfig` properties are no longer required in the unit-test builder (matching Angular 21's changes)
+
+## Custom Webpack builder
+
+- No breaking changes (except for updating to Angular 21)
+
+## Jest builder
+
+**Breaking Change:** `jest-preset-angular` has been updated from v14 to v16 to support Angular 21.
+
+### Required Changes
+
+1. **Update Jest to v30** - `jest-preset-angular` v16 requires Jest 30:
+   ```bash
+   npm install --save-dev jest@^30.0.0 jest-environment-jsdom@^30.0.0 jsdom@^26.0.0
+   ```
+
+2. **Update `tsconfig.spec.json`** - Angular 21 uses `moduleResolution: "bundler"` by default, which is incompatible with Jest running in Node.js:
+   ```json
+   {
+     "extends": "./tsconfig.json",
+     "compilerOptions": {
+       "module": "Node16",
+       "moduleResolution": "Node16",
+       "isolatedModules": true
+     }
+   }
+   ```
+
+### Builder Schema Changes
+
+The following builder options have been **removed** (Jest 30 no longer supports them):
+- `browser` - Removed from Jest 30
+- `init` - Removed from Jest 30
+- `mapCoverage` - Was deprecated, now removed
+- `testURL` - Removed (use `testEnvironmentOptions.url` in jest config instead)
+- `timers` - Removed (use `fakeTimers` in jest config instead)
+
+The following builder options have been **renamed**:
+- `configPath` → `config` (now also supports inline JSON configuration in addition to file paths)
+- `testPathPattern` → `testPathPatterns` (now accepts multiple patterns)
+
+The following **defaults have changed**:
+- `testRunner` - Default changed from `jasmine2` to `jest-circus/runner`
+- `globalMocks` - Default changed from `["styleTransform", "matchMedia"]` to `["matchMedia"]`. The `styleTransform`, `getComputedStyle`, and `doctype` mocks have been removed as Jest 30's jsdom now supports these natively.
+- `zoneless` - New option, defaults to `true` for Angular 21+ zoneless applications. Set to `false` if your app uses zone.js change detection.
+
+For more details, see the [Jest 30 changelog](https://jestjs.io/blog/2024/11/14/jest-30) and [jest-preset-angular v16 changelog](https://github.com/thymikee/jest-preset-angular/blob/main/CHANGELOG.md).
+
+---
+
 # Migration from version 19 to version 20
 
 ## Breaking Changes

README.md

@@ -2,7 +2,7 @@
 
 The purpose of this repository is to consolidate all the community builders for Angular build facade.
 
-## The latest version of all the builders requires Angular CLI 20
+## The latest version of all the builders requires Angular CLI 21
 
 Builders' and Angular **major** versions **must** match.
 
@@ -13,6 +13,7 @@ Builders' and Angular **major** versions **must** match.
 <details>
   <summary>Click to expand</summary>
 
+- [Version 20](https://github.com/just-jeb/angular-builders/tree/20.x.x)
 - [Version 19](https://github.com/just-jeb/angular-builders/tree/19.x.x)
 - [Version 18](https://github.com/just-jeb/angular-builders/tree/18.x.x)
 - [Version 17](https://github.com/just-jeb/angular-builders/tree/17.x.x)

examples/bazel/package.json

@@ -7,6 +7,6 @@
   "private": true,
   "devDependencies": {
     "@angular-builders/bazel": "workspace:*",
-    "@angular/cli": "^20.0.2"
+    "@angular/cli": "^21.0.0"
   }
 }

examples/custom-esbuild/sanity-esbuild-app-esm/package.json

@@ -16,25 +16,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "20.3.11",
-    "@angular/common": "20.3.14",
-    "@angular/compiler": "20.3.15",
-    "@angular/core": "20.3.11",
-    "@angular/forms": "20.3.11",
-    "@angular/platform-browser": "20.3.11",
-    "@angular/platform-browser-dynamic": "20.3.11",
-    "@angular/router": "20.3.11",
+    "@angular/animations": "21.0.5",
+    "@angular/common": "21.0.5",
+    "@angular/compiler": "21.0.5",
+    "@angular/core": "21.0.5",
+    "@angular/forms": "21.0.5",
+    "@angular/platform-browser": "21.0.5",
+    "@angular/platform-browser-dynamic": "21.0.5",
+    "@angular/router": "21.0.5",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
     "zone.js": "0.15.1"
   },
   "devDependencies": {
     "@angular-builders/custom-esbuild": "workspace:*",
-    "@angular-devkit/build-angular": "20.3.9",
+    "@angular-devkit/build-angular": "21.0.3",
     "@angular-eslint/builder": "20.6.0",
-    "@angular/cli": "20.3.9",
-    "@angular/compiler-cli": "20.3.11",
-    "@angular/language-service": "20.3.11",
+    "@angular/cli": "21.0.3",
+    "@angular/compiler-cli": "21.0.5",
+    "@angular/language-service": "21.0.5",
     "@eslint/js": "^9.29.0",
     "@types/node": "20.17.12",
     "angular-eslint": "20.6.0",

examples/custom-esbuild/sanity-esbuild-app-esm/src/main.ts

@@ -1,6 +1,7 @@
+import { provideZoneChangeDetection } from "@angular/core";
 import { bootstrapApplication } from '@angular/platform-browser';
 
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig);
+bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]});

examples/custom-esbuild/sanity-esbuild-app-esm/tsconfig.json

@@ -14,15 +14,11 @@
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ],
     "skipLibCheck": true
   },
   "angularCompilerOptions": {

examples/custom-esbuild/sanity-esbuild-app/package.json

@@ -12,25 +12,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "20.3.11",
-    "@angular/common": "20.3.14",
-    "@angular/compiler": "20.3.15",
-    "@angular/core": "20.3.11",
-    "@angular/forms": "20.3.11",
-    "@angular/platform-browser": "20.3.11",
-    "@angular/platform-browser-dynamic": "20.3.11",
-    "@angular/router": "20.3.11",
+    "@angular/animations": "21.0.5",
+    "@angular/common": "21.0.5",
+    "@angular/compiler": "21.0.5",
+    "@angular/core": "21.0.5",
+    "@angular/forms": "21.0.5",
+    "@angular/platform-browser": "21.0.5",
+    "@angular/platform-browser-dynamic": "21.0.5",
+    "@angular/router": "21.0.5",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
     "zone.js": "0.15.1"
   },
   "devDependencies": {
     "@angular-builders/custom-esbuild": "workspace:*",
-    "@angular-devkit/build-angular": "20.3.9",
+    "@angular-devkit/build-angular": "21.0.3",
     "@angular-eslint/builder": "20.6.0",
-    "@angular/cli": "20.3.9",
-    "@angular/compiler-cli": "20.3.11",
-    "@angular/language-service": "20.3.11",
+    "@angular/cli": "21.0.3",
+    "@angular/compiler-cli": "21.0.5",
+    "@angular/language-service": "21.0.5",
     "@eslint/js": "^9.29.0",
     "@types/node": "20.17.12",
     "angular-eslint": "20.6.0",

examples/custom-esbuild/sanity-esbuild-app/src/main.ts

@@ -1,6 +1,7 @@
+import { provideZoneChangeDetection } from "@angular/core";
 import { bootstrapApplication } from '@angular/platform-browser';
 
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig);
+bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]});

examples/custom-esbuild/sanity-esbuild-app/tsconfig.json

@@ -14,15 +14,11 @@
     "declaration": false,
     "downlevelIteration": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ],
     "skipLibCheck": true
   },
   "angularCompilerOptions": {

examples/custom-webpack/full-cycle-app/package.json

@@ -12,25 +12,25 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "20.3.11",
-    "@angular/common": "20.3.14",
-    "@angular/compiler": "20.3.15",
-    "@angular/core": "20.3.11",
-    "@angular/forms": "20.3.11",
-    "@angular/platform-browser": "20.3.11",
-    "@angular/platform-browser-dynamic": "20.3.11",
-    "@angular/router": "20.3.11",
+    "@angular/animations": "21.0.5",
+    "@angular/common": "21.0.5",
+    "@angular/compiler": "21.0.5",
+    "@angular/core": "21.0.5",
+    "@angular/forms": "21.0.5",
+    "@angular/platform-browser": "21.0.5",
+    "@angular/platform-browser-dynamic": "21.0.5",
+    "@angular/router": "21.0.5",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
     "zone.js": "0.15.1"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "workspace:*",
-    "@angular-devkit/build-angular": "20.3.9",
+    "@angular-devkit/build-angular": "21.0.3",
     "@angular-eslint/builder": "20.6.0",
-    "@angular/cli": "20.3.9",
-    "@angular/compiler-cli": "20.3.11",
-    "@angular/language-service": "20.3.11",
+    "@angular/cli": "21.0.3",
+    "@angular/compiler-cli": "21.0.5",
+    "@angular/language-service": "21.0.5",
     "@eslint/js": "^9.29.0",
     "@types/jasmine": "5.1.5",
     "@types/node": "20.17.12",

examples/custom-webpack/full-cycle-app/src/main.ts

@@ -1,4 +1,4 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from '@app/app.component';
 import { environment } from '@environment';
@@ -7,4 +7,4 @@ if (environment.production) {
   enableProdMode();
 }
 
-bootstrapApplication(AppComponent);
+bootstrapApplication(AppComponent, {providers: [provideZoneChangeDetection()]});

examples/custom-webpack/full-cycle-app/tsconfig.json

@@ -6,21 +6,23 @@
     "sourceMap": true,
     "declaration": false,
     "module": "es2022",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "resolveJsonModule": true,
     "importHelpers": true,
     "target": "es2022",
     "useDefineForClassFields": false,
-    "lib": [
-      "es2022",
-      "dom"
-    ],
     "paths": {
-      "@app/*": ["src/app/*"],
-      "@environment": ["src/environments/environment.ts"],
-      "@project": ["package.json"]
+      "@app/*": [
+        "src/app/*"
+      ],
+      "@environment": [
+        "src/environments/environment.ts"
+      ],
+      "@project": [
+        "package.json"
+      ]
     }
   }
 }

examples/custom-webpack/sanity-app-esm/package.json

@@ -16,23 +16,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "20.3.11",
-    "@angular/common": "20.3.14",
-    "@angular/compiler": "20.3.15",
-    "@angular/core": "20.3.11",
-    "@angular/forms": "20.3.11",
-    "@angular/platform-browser": "20.3.11",
-    "@angular/platform-browser-dynamic": "20.3.11",
-    "@angular/router": "20.3.11",
+    "@angular/animations": "21.0.5",
+    "@angular/common": "21.0.5",
+    "@angular/compiler": "21.0.5",
+    "@angular/core": "21.0.5",
+    "@angular/forms": "21.0.5",
+    "@angular/platform-browser": "21.0.5",
+    "@angular/platform-browser-dynamic": "21.0.5",
+    "@angular/router": "21.0.5",
     "rxjs": "7.8.2",
     "tslib": "2.8.1",
     "zone.js": "0.15.1"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "workspace:*",
-    "@angular-devkit/build-angular": "20.3.9",
-    "@angular/cli": "20.3.9",
-    "@angular/compiler-cli": "20.3.11",
+    "@angular-devkit/build-angular": "21.0.3",
+    "@angular/cli": "21.0.3",
+    "@angular/compiler-cli": "21.0.5",
     "@cypress/schematic": "4.1.4",
     "@types/jasmine": "5.1.5",
     "@types/node": "20.17.12",