Update Angular to v22, adopt OnPush, and modernize tooling

.github/workflows/build.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          node-version: 20.x
+          node-version: 24.x
           cache: npm
 
       - name: Install dependencies

.github/workflows/deploy.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
-          node-version: 20.x
+          node-version: 24.x
           cache: npm
 
       - name: Install dependencies

README.md

@@ -12,7 +12,7 @@ Checkout the project at [devtoolbox.raymondsplinter.com][app-url]
 
 ## Built with
 
-This is an [Angular][angular-url] 20 project, designed with Angular Material. To learn more about these, checkout the following resources:
+This is an [Angular][angular-url] 22 project, designed with Angular Material. To learn more about these, checkout the following resources:
 
 - [Angular][angular-docs-url] - Learn about Angular and its core concepts.
 - [Angular Material][angular-material-url] - Learn about Angular Material and its components.

cypress.config.ts

@@ -1,6 +1,7 @@
 import {defineConfig} from "cypress"
 
 export default defineConfig({
+  allowCypressEnv: false,
   e2e: {
     "baseUrl": "http://localhost:4200"
   },

cypress/tsconfig.json

@@ -5,6 +5,7 @@
   ],
   "compilerOptions": {
     "sourceMap": false,
+    "rootDir": ".",
     "types": [
       "cypress",
       "cypress-real-events"

eslint.config.js

@@ -1,15 +1,16 @@
 // @ts-check
 import js from "@eslint/js";
 import plugin from "@typescript-eslint/eslint-plugin";
-import angular from "@angular-eslint/eslint-plugin";
-import angularTemplate from "@angular-eslint/eslint-plugin-template";
 import tsParser from "@typescript-eslint/parser";
-import templateParser from "@angular-eslint/template-parser";
+import angular from "angular-eslint";
+
+const withFiles = (configs, files) => configs.map((config) => ({ ...config, files }));
 
 export default [
   {
     ignores: ["projects/**/*", "node_modules/**/*", "dist/**/*", "coverage/**/*"]
   },
+  ...withFiles(angular.configs.tsRecommended, ["**/*.ts"]),
   {
     files: ["**/*.ts"],
     languageOptions: {
@@ -44,13 +45,11 @@ export default [
       }
     },
     plugins: {
-      "@typescript-eslint": plugin,
-      "@angular-eslint": angular
+      "@typescript-eslint": plugin
     },
     rules: {
       ...js.configs.recommended.rules,
       ...plugin.configs.recommended.rules,
-      ...angular.configs.recommended.rules,
       "@angular-eslint/directive-selector": [
         "error",
         {
@@ -69,18 +68,7 @@ export default [
       ]
     }
   },
-  {
-    files: ["**/*.html"],
-    languageOptions: {
-      parser: templateParser
-    },
-    plugins: {
-      "@angular-eslint/template": angularTemplate
-    },
-    rules: {
-      ...angularTemplate.configs.recommended.rules,
-      ...angularTemplate.configs.accessibility.rules
-    }
-  }
+  ...withFiles(angular.configs.templateRecommended, ["**/*.html"]),
+  ...withFiles(angular.configs.templateAccessibility, ["**/*.html"])
 ];