Update project to Angular v22

.github/workflows/pr-checks.yml

@@ -12,14 +12,14 @@ jobs:
       - uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 10
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
           cache: 'pnpm'
 
       - name: Install dependencies

.npmrc

@@ -1 +1 @@
-use-node-version=20.14.0
+use-node-version=24.21.0

README.md

@@ -29,7 +29,7 @@ For more details, refer to the related article: [Supercharging Angular apps for
 
 ## Update to version 19
 
-The project utilises Angular version 19 and most of its latest features. If you want to review the changes so as to utilise the latest features in your project too, here is the related PR: [Update project to Angular v19](https://github.com/dimeloper/angular-optimization/pull/9).
+The project utilises Angular version 22 and most of its latest features. For reference, the earlier upgrade to v19 is available here: [Update project to Angular v19](https://github.com/dimeloper/angular-optimization/pull/9).
 
 ## Performance measurements
 

angular.json

@@ -24,7 +24,6 @@
             "outputPath": "dist/angular-optimization-examples",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
@@ -98,5 +97,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

eslint.config.mjs

@@ -1,9 +1,8 @@
-import angular from '@angular-eslint/eslint-plugin';
-import angularTemplate from '@angular-eslint/eslint-plugin-template';
-import angularParser from '@angular-eslint/template-parser';
-import tsParser from '@typescript-eslint/parser';
+// @ts-check
+import angular from 'angular-eslint';
+import tseslint from 'typescript-eslint';
 
-export default [
+export default tseslint.config(
   // Ignore patterns
   {
     ignores: [
@@ -17,17 +16,14 @@ export default [
   // TypeScript files configuration
   {
     files: ['**/*.ts'],
+    extends: [...angular.configs.tsRecommended],
     languageOptions: {
-      parser: tsParser,
       parserOptions: {
         project: ['./tsconfig.json', './e2e/tsconfig.json'],
       },
     },
-    plugins: {
-      '@angular-eslint': angular,
-    },
+    processor: angular.processInlineTemplates,
     rules: {
-      ...angular.configs.recommended.rules,
       '@angular-eslint/component-selector': [
         'error',
         {
@@ -50,14 +46,6 @@ export default [
   // HTML template files configuration
   {
     files: ['**/*.html'],
-    languageOptions: {
-      parser: angularParser,
-    },
-    plugins: {
-      '@angular-eslint/template': angularTemplate,
-    },
-    rules: {
-      ...angularTemplate.configs.recommended.rules,
-    },
-  },
-];
+    extends: [...angular.configs.templateRecommended],
+  }
+);

package.json

@@ -11,7 +11,6 @@
     "lint": "ng lint",
     "format": "prettier --write \"src/**/*.{ts,html,scss}\"",
     "format:check": "prettier --check \"src/**/*.{ts,html,scss}\"",
-    "serve:ssr:angular-optimization-examples": "node dist/angular-optimization-examples/server/server.mjs",
     "audit:bad-pages": "unlighthouse --site https://ng-pokedex-optimization.netlify.app --urls /pokedex-bad/,/pokemon-bad/ivysaur/,/pokemon-bad/charizard/",
     "audit:optimized-pages": "unlighthouse --site https://ng-pokedex-optimization.netlify.app --urls /pokedex-optimized/,/pokemon-optimized/ivysaur/,/pokemon-optimized/charizard/",
     "bundle-report": "ng build --configuration production --source-map && source-map-explorer dist/*.js",
@@ -31,56 +30,44 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.8",
-    "@angular/cdk": "19.2.11",
-    "@angular/common": "^19.2.8",
-    "@angular/compiler": "^19.2.8",
-    "@angular/core": "^19.2.8",
-    "@angular/forms": "^19.2.8",
-    "@angular/material": "19.0.5",
-    "@angular/platform-browser": "^19.2.8",
-    "@angular/platform-browser-dynamic": "^19.2.8",
-    "@angular/platform-server": "^19.2.8",
-    "@angular/router": "^19.2.8",
-    "@angular/ssr": "^19.2.9",
-    "@netlify/angular-runtime": "^2.1.0",
-    "@ngrx/signals": "^19.1.0",
-    "express": "^4.18.2",
-    "ngx-device-detector": "^9.0.0",
+    "@angular/cdk": "^22.2.0",
+    "@angular/common": "^22.2.0",
+    "@angular/compiler": "^22.2.0",
+    "@angular/core": "^22.2.0",
+    "@angular/forms": "^22.2.0",
+    "@angular/material": "^22.2.0",
+    "@angular/platform-browser": "^22.2.0",
+    "@angular/platform-server": "^22.2.0",
+    "@angular/router": "^22.2.0",
+    "@angular/ssr": "^22.2.0",
+    "@netlify/angular-runtime": "^4.0.0",
+    "@ngrx/signals": "^22.0.1",
+    "ngx-device-detector": "^12.0.0",
     "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.15.0"
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^1.15.1",
-    "@analogjs/vitest-angular": "^1.15.1",
-    "@angular-devkit/build-angular": "^19.2.9",
-    "@angular-eslint/builder": "^19.3.0",
-    "@angular-eslint/eslint-plugin": "^19.3.0",
-    "@angular-eslint/eslint-plugin-template": "^19.3.0",
-    "@angular-eslint/schematics": "^19.3.0",
-    "@angular-eslint/template-parser": "^19.3.0",
-    "@angular/cli": "^19.2.9",
-    "@angular/compiler-cli": "^19.2.8",
-    "@nx/vite": "^20.0.0",
-    "@types/express": "^4.17.17",
+    "@analogjs/vite-plugin-angular": "^2.7.5",
+    "@analogjs/vitest-angular": "^2.7.5",
+    "@angular-devkit/build-angular": "^22.2.0",
+    "@angular/cli": "^22.2.0",
+    "@angular/compiler-cli": "^22.2.0",
     "@types/jasmine": "~5.1.0",
-    "@types/node": "^20.17.10",
-    "@typescript-eslint/eslint-plugin": "^8.31.0",
-    "@typescript-eslint/parser": "^8.31.0",
+    "@types/node": "^24.0.0",
+    "angular-eslint": "^22.5.0",
     "eslint": "^9.25.1",
     "husky": "^9.1.7",
     "jasmine-core": "~5.1.0",
     "jsdom": "^26.1.0",
     "lint-staged": "^16.0.0",
     "prettier": "^3.2.5",
     "source-map-explorer": "^2.5.3",
-    "typescript": "~5.6.3",
-    "vite": "^6.3.3",
-    "vite-tsconfig-paths": "^4.2.0",
-    "vitest": "^3.1.2"
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.70.1",
+    "vite": "^7.3.6",
+    "vitest": "^4.1.0"
   },
   "volta": {
-    "node": "20.18.0"
+    "node": "24.21.0"
   }
 }