chore: upgrade angular 21

apps/chrome-devtools/package.json

@@ -29,14 +29,14 @@
     "dist/"
   ],
   "devDependencies": {
-    "@angular-devkit/build-angular": "~20.3.13",
-    "@angular-devkit/schematics": "~20.3.13",
-    "@angular/cli": "~20.3.13",
-    "@angular/compiler": "~20.3.15",
-    "@angular/compiler-cli": "~20.3.15",
+    "@angular-devkit/build-angular": "~21.0.2",
+    "@angular-devkit/schematics": "~21.0.2",
+    "@angular/cli": "~21.0.2",
+    "@angular/compiler": "~21.0.3",
+    "@angular/compiler-cli": "~21.0.3",
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.0",
-    "@nx/eslint-plugin": "~21.6.0",
-    "@nx/jest": "~21.6.0",
+    "@nx/eslint-plugin": "~22.3.3",
+    "@nx/jest": "~22.3.3",
     "@o3r/build-helpers": "workspace:~",
     "@o3r/eslint-config": "workspace:~",
     "@o3r/eslint-plugin": "workspace:~",
@@ -45,13 +45,14 @@
     "@o3r/rules-engine": "workspace:~",
     "@o3r/test-helpers": "workspace:~",
     "@playwright/test": "~1.57.0",
-    "@schematics/angular": "~20.3.13",
+    "@schematics/angular": "~21.0.2",
+    "@standard-schema/spec": "~1.0.0",
     "@stylistic/eslint-plugin": "~5.6.0",
     "@types/chrome": "^0.1.0",
     "@types/jest": "~30.0.0",
     "@types/tinycolor2": "^1.4.6",
     "@typescript-eslint/parser": "~8.51.0",
-    "angular-eslint": "~20.6.0",
+    "angular-eslint": "~21.0.1",
     "archiver": "^7.0.0",
     "chokidar": "^4.0.3",
     "chrome-webstore-upload": "^4.0.3",
@@ -74,11 +75,11 @@
     "jest-junit": "~16.0.0",
     "jest-preset-angular": "~16.0.0",
     "jest-util": "~30.2.0",
-    "jsdom": "^26.1.0",
+    "jsdom": "~27.3.0",
     "jsonc-eslint-parser": "~2.4.0",
     "lighthouse": "~13.0.0",
     "minimist": "^1.2.6",
-    "nx": "~21.6.0",
+    "nx": "~22.3.3",
     "playwright-lighthouse": "~4.0.0",
     "rimraf": "^6.0.1",
     "ts-jest": "~29.4.0",
@@ -90,19 +91,19 @@
     "@agnos-ui/angular-bootstrap": "~0.9.0",
     "@agnos-ui/core-bootstrap": "~0.9.0",
     "@amadeus-it-group/tansu": "~2.0.0",
-    "@angular/animations": "~20.3.15",
-    "@angular/common": "~20.3.15",
-    "@angular/core": "~20.3.15",
-    "@angular/forms": "~20.3.15",
-    "@angular/localize": "~20.3.15",
-    "@angular/platform-browser": "~20.3.15",
-    "@angular/platform-browser-dynamic": "~20.3.15",
-    "@angular/router": "~20.3.15",
+    "@angular/animations": "~21.0.3",
+    "@angular/common": "~21.0.3",
+    "@angular/core": "~21.0.3",
+    "@angular/forms": "~21.0.3",
+    "@angular/localize": "~21.0.3",
+    "@angular/platform-browser": "~21.0.3",
+    "@angular/platform-browser-dynamic": "~21.0.3",
+    "@angular/router": "~21.0.3",
     "@design-factory/design-factory": "~20.0.0",
-    "@ng-bootstrap/ng-bootstrap": "^19.0.0",
-    "@ng-select/ng-select": "~20.0.0",
-    "@ngrx/entity": "~20.1.0",
-    "@ngrx/store": "~20.1.0",
+    "@ng-bootstrap/ng-bootstrap": "~20.0.0",
+    "@ng-select/ng-select": "~21.1.0",
+    "@ngrx/entity": "~21.0.0",
+    "@ngrx/store": "~21.0.0",
     "@o3r/application": "workspace:~",
     "@o3r/components": "workspace:~",
     "@o3r/configuration": "workspace:~",
@@ -117,7 +118,6 @@
     "bootstrap": "5.3.7",
     "rxjs": "^7.8.1",
     "tinycolor2": "^1.6.0",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.15.0"
+    "tslib": "^2.6.2"
   }
 }

apps/chrome-devtools/project.json

@@ -47,7 +47,6 @@
           "fonts": true
         },
         "polyfills": [
-          "zone.js",
           "@angular/localize/init"
         ],
         "styles": [
@@ -100,7 +99,6 @@
           "fonts": true
         },
         "polyfills": [
-          "zone.js",
           "@angular/localize/init"
         ],
         "styles": [

apps/chrome-devtools/src/app-components.main.ts

@@ -1,9 +1,17 @@
+import {
+  provideZonelessChangeDetection,
+} from '@angular/core';
 import {
   bootstrapApplication,
 } from '@angular/platform-browser';
 import {
   App,
 } from './app-components/app';
 
-// eslint-disable-next-line no-console -- Generated by Angular
-bootstrapApplication(App).catch((err) => console.error(err));
+bootstrapApplication(App, {
+  providers: [
+    provideZonelessChangeDetection()
+  ]
+})
+  // eslint-disable-next-line no-console -- only logger available
+  .catch((err) => console.error(err));

apps/chrome-devtools/src/app-devtools.main.ts

@@ -1,9 +1,17 @@
+import {
+  provideZonelessChangeDetection,
+} from '@angular/core';
 import {
   bootstrapApplication,
 } from '@angular/platform-browser';
 import {
   App,
 } from './app-devtools/app';
 
-// eslint-disable-next-line no-console -- Generated by Angular
-bootstrapApplication(App).catch((err) => console.error(err));
+bootstrapApplication(App, {
+  providers: [
+    provideZonelessChangeDetection()
+  ]
+})
+  // eslint-disable-next-line no-console -- only logger available
+  .catch((err) => console.error(err));

apps/chrome-devtools/testing/setup-jest.ts

@@ -1,5 +1,5 @@
 import {
-  setupZoneTestEnv,
-} from 'jest-preset-angular/setup-env/zone';
+  setupZonelessTestEnv,
+} from 'jest-preset-angular/setup-env/zoneless';
 
-setupZoneTestEnv();
+setupZonelessTestEnv();

apps/github-cascading-app/package.json

@@ -23,19 +23,19 @@
   },
   "devDependencies": {
     "@actions/github": "^6.0.0",
-    "@angular-devkit/schematics": "~20.3.13",
-    "@angular/animations": "~20.3.15",
-    "@angular/common": "~20.3.15",
-    "@angular/compiler": "~20.3.15",
-    "@angular/compiler-cli": "~20.3.15",
-    "@angular/core": "~20.3.15",
-    "@angular/platform-browser": "~20.3.15",
-    "@angular/platform-browser-dynamic": "~20.3.15",
+    "@angular-devkit/schematics": "~21.0.2",
+    "@angular/animations": "~21.0.3",
+    "@angular/common": "~21.0.3",
+    "@angular/compiler": "~21.0.3",
+    "@angular/compiler-cli": "~21.0.3",
+    "@angular/core": "~21.0.3",
+    "@angular/platform-browser": "~21.0.3",
+    "@angular/platform-browser-dynamic": "~21.0.3",
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.0",
-    "@nx/eslint": "~21.6.0",
-    "@nx/eslint-plugin": "~21.6.0",
-    "@nx/jest": "~21.6.0",
-    "@nx/js": "~21.6.0",
+    "@nx/eslint": "~22.3.3",
+    "@nx/eslint-plugin": "~22.3.3",
+    "@nx/jest": "~22.3.3",
+    "@nx/js": "~22.3.3",
     "@o3r/eslint-config": "workspace:~",
     "@o3r/eslint-plugin": "workspace:~",
     "@o3r/test-helpers": "workspace:~",
@@ -46,7 +46,7 @@
     "@types/node": "~24.10.0",
     "@types/semver": "^7.3.13",
     "@typescript-eslint/parser": "~8.51.0",
-    "angular-eslint": "~20.6.0",
+    "angular-eslint": "~21.0.1",
     "cpy-cli": "^6.0.0",
     "ejs": "~3.1.9",
     "eslint": "~9.39.0",
@@ -67,14 +67,13 @@
     "jest-util": "~30.2.0",
     "jsonc-eslint-parser": "~2.4.0",
     "nock": "^14.0.0",
-    "nx": "~21.6.0",
+    "nx": "~22.3.3",
     "rxjs": "^7.8.1",
     "smee-client": "^5.0.0",
     "ts-jest": "~29.4.0",
     "tslib": "^2.6.2",
     "typescript": "~5.9.2",
-    "typescript-eslint": "~8.51.0",
-    "zone.js": "~0.15.0"
+    "typescript-eslint": "~8.51.0"
   },
   "engines": {
     "node": "^20.19.0 || ^22.17.0 || ^24.0.0"

apps/palette-generator/package.json

@@ -21,17 +21,17 @@
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.0",
     "@figma/eslint-plugin-figma-plugins": "^0.16.0",
     "@figma/plugin-typings": "^1.107.0",
-    "@nx/eslint-plugin": "~21.6.0",
-    "@nx/jest": "~21.6.0",
+    "@nx/eslint-plugin": "~22.3.3",
+    "@nx/jest": "~22.3.3",
     "@o3r/build-helpers": "workspace:~",
     "@o3r/eslint-plugin": "workspace:~",
     "@o3r/test-helpers": "workspace:~",
-    "@schematics/angular": "~20.3.13",
+    "@schematics/angular": "~21.0.2",
     "@stylistic/eslint-plugin": "~5.6.0",
     "@types/jest": "~30.0.0",
     "@types/node": "~24.10.0",
     "@typescript-eslint/parser": "~8.51.0",
-    "angular-eslint": "~20.6.0",
+    "angular-eslint": "~21.0.1",
     "cpy-cli": "^6.0.0",
     "esbuild": "~0.25.1",
     "eslint": "~9.39.0",

apps/showcase/package.json

@@ -33,27 +33,27 @@
     "@ama-sdk/core": "workspace:~",
     "@ama-sdk/schematics": "workspace:~",
     "@amadeus-it-group/tansu": "~2.0.0",
-    "@angular/animations": "~20.3.15",
-    "@angular/cdk": "~20.2.14",
-    "@angular/common": "~20.3.15",
-    "@angular/compiler": "~20.3.15",
-    "@angular/core": "~20.3.15",
-    "@angular/forms": "~20.3.15",
-    "@angular/localize": "~20.3.15",
-    "@angular/platform-browser": "~20.3.15",
-    "@angular/platform-browser-dynamic": "~20.3.15",
-    "@angular/router": "~20.3.15",
+    "@angular/animations": "~21.0.3",
+    "@angular/cdk": "~21.0.2",
+    "@angular/common": "~21.0.3",
+    "@angular/compiler": "~21.0.3",
+    "@angular/core": "~21.0.3",
+    "@angular/forms": "~21.0.3",
+    "@angular/localize": "~21.0.3",
+    "@angular/platform-browser": "~21.0.3",
+    "@angular/platform-browser-dynamic": "~21.0.3",
+    "@angular/router": "~21.0.3",
     "@commitlint/types": "^20.2.0",
     "@design-factory/design-factory": "~20.0.0",
     "@formatjs/intl-numberformat": "~9.1.0",
-    "@ng-bootstrap/ng-bootstrap": "^19.0.0",
-    "@ng-select/ng-select": "~20.0.0",
-    "@ngrx/effects": "~20.1.0",
-    "@ngrx/entity": "~20.1.0",
-    "@ngrx/store": "~20.1.0",
-    "@ngrx/store-devtools": "~20.1.0",
+    "@ng-bootstrap/ng-bootstrap": "~20.0.0",
+    "@ng-select/ng-select": "~21.1.0",
+    "@ngrx/effects": "~21.0.0",
+    "@ngrx/entity": "~21.0.0",
+    "@ngrx/store": "~21.0.0",
+    "@ngrx/store-devtools": "~21.0.0",
     "@ngx-translate/core": "~16.0.4",
-    "@nx/jest": "~21.6.0",
+    "@nx/jest": "~22.3.3",
     "@o3r-training/showcase-sdk": "workspace:~",
     "@o3r-training/training-tools": "workspace:~",
     "@o3r/apis-manager": "workspace:~",
@@ -87,10 +87,10 @@
     "intl-messageformat": "~11.0.0",
     "jest-preset-angular": "~16.0.0",
     "jest-util": "~30.2.0",
-    "jsdom": "^26.1.0",
-    "marked": "^15.0.0",
+    "jsdom": "~27.3.0",
+    "marked": "~17.0.0",
     "monaco-editor": "~0.54.0",
-    "ngx-markdown": "^20.0.0",
+    "ngx-markdown": "~21.0.1",
     "ngx-monaco-editor-v2": "^20.0.0",
     "ngx-monaco-tree": "~20.1.0",
     "pixelmatch": "^7.0.0",
@@ -101,20 +101,19 @@
     "sass-loader": "^16.0.0",
     "ts-jest": "~29.4.0",
     "tslib": "^2.6.2",
-    "typescript": "~5.9.2",
-    "zone.js": "~0.15.0"
+    "typescript": "~5.9.2"
   },
   "devDependencies": {
     "@ama-styling/style-dictionary": "workspace:~",
     "@amadeus-it-group/kassette": "^1.7.0",
-    "@angular-devkit/architect": "0.2003.13",
-    "@angular-devkit/build-angular": "~20.3.13",
-    "@angular-devkit/core": "~20.3.13",
-    "@angular-devkit/schematics": "~20.3.13",
-    "@angular/cli": "~20.3.13",
-    "@angular/compiler-cli": "~20.3.15",
+    "@angular-devkit/architect": "~0.2100.2",
+    "@angular-devkit/build-angular": "~21.0.2",
+    "@angular-devkit/core": "~21.0.2",
+    "@angular-devkit/schematics": "~21.0.2",
+    "@angular/cli": "~21.0.2",
+    "@angular/compiler-cli": "~21.0.3",
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.0",
-    "@nx/eslint-plugin": "~21.6.0",
+    "@nx/eslint-plugin": "~22.3.3",
     "@o3r-training/training-sdk": "workspace:~",
     "@o3r/build-helpers": "workspace:~",
     "@o3r/eslint-config": "workspace:~",
@@ -123,14 +122,15 @@
     "@o3r/test-helpers": "workspace:~",
     "@o3r/testing": "workspace:~",
     "@playwright/test": "~1.57.0",
-    "@schematics/angular": "~20.3.13",
+    "@schematics/angular": "~21.0.2",
+    "@standard-schema/spec": "~1.0.0",
     "@stylistic/eslint-plugin": "~5.6.0",
     "@types/bootstrap": "^5.2.10",
     "@types/jest": "~30.0.0",
     "@types/node": "~24.10.0",
     "@typescript-eslint/parser": "~8.51.0",
     "@webcontainer/api": "~1.6.0",
-    "angular-eslint": "~20.6.0",
+    "angular-eslint": "~21.0.1",
     "concurrently": "^9.1.0",
     "eslint": "~9.39.0",
     "eslint-import-resolver-node": "~0.3.9",
@@ -149,7 +149,7 @@
     "jest-junit": "~16.0.0",
     "jest-preset-angular": "~16.0.0",
     "jest-util": "~30.2.0",
-    "jsdom": "^26.1.0",
+    "jsdom": "~27.3.0",
     "jsonc-eslint-parser": "~2.4.0",
     "lighthouse": "~13.0.0",
     "minimist": "^1.2.6",

apps/showcase/project.json

@@ -55,7 +55,6 @@
         "index": "apps/showcase/src/index.html",
         "browser": "apps/showcase/src/main.ts",
         "polyfills": [
-          "zone.js",
           "@angular/localize/init"
         ],
         "tsConfig": "apps/showcase/tsconfig.app.json",

apps/showcase/src/app/app-module.ts

@@ -9,6 +9,7 @@ import localeFR from '@angular/common/locales/fr';
 import {
   isDevMode,
   NgModule,
+  provideZonelessChangeDetection,
   SecurityContext,
 } from '@angular/core';
 import {
@@ -79,6 +80,7 @@ import {
   CLIPBOARD_OPTIONS,
   MARKED_EXTENSIONS,
   provideMarkdown,
+  SANITIZE,
 } from 'ngx-markdown';
 import {
   MonacoEditorModule,
@@ -172,6 +174,7 @@ export function localizationConfigurationFactory(): Partial<LocalizationConfigur
     MonacoEditorModule.forRoot()
   ],
   providers: [
+    provideZonelessChangeDetection(),
     provideCustomComponents(new Map(), withComponent('exampleDatePickerFlavorHebrew', DatePickerHebrewInputPres)),
     { provide: MESSAGE_FORMAT_CONFIG, useValue: {} },
     { provide: LOGGER_CLIENT_TOKEN, useValue: new ConsoleLogger() },
@@ -197,7 +200,7 @@ export function localizationConfigurationFactory(): Partial<LocalizationConfigur
         }
       ],
       /* Templates are only internal, no need to sanitize */
-      sanitize: SecurityContext.NONE
+      sanitize: { provide: SANITIZE, useValue: SecurityContext.NONE }
     }),
     { provide: NGX_MONACO_EDITOR_CONFIG, useValue: { baseUrl: `${location.origin}${location.pathname}assets/monaco/min/vs` } }
   ],