Upgrade the Angular client to 22 with Vitest

CLAUDE.md

@@ -1,6 +1,6 @@
 # Argos — Claude Code Instructions
 
-Argos is a real-time telemetry platform for Northeastern Electric Racing (NER). Angular 21 frontend (`angular-client/`) and Rust backend (`scylla-server/`), with schema tooling in `charybdis/` and MQTT broker config in `siren-base/`.
+Argos is a real-time telemetry platform for Northeastern Electric Racing (NER). Angular 22 frontend (`angular-client/`) and Rust backend (`scylla-server/`), with schema tooling in `charybdis/` and MQTT broker config in `siren-base/`.
 
 ## Local Development
 
@@ -13,7 +13,7 @@ Argos is a real-time telemetry platform for Northeastern Electric Racing (NER).
 
 ## Testing
 
-- Frontend: `cd angular-client && ng test` (Karma/Jasmine).
+- Frontend: `cd angular-client && ng test` (Vitest).
 - Backend: `cd scylla-server && cargo test` (unit tests); `./integration_test.sh` also runs the database-backed integration tests.
 - Lint and format (frontend): `npx prettier --check "src/**/*.{ts,html,scss}" && npx ng lint`.
 - Build (backend): `cargo build`.

angular-client/angular.json

@@ -18,7 +18,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": {
               "base": "dist/angular-client"
@@ -60,7 +60,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "angular-client:build:production"
@@ -72,20 +72,16 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "angular-client:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:unit-test",
           "options": {
-            "main": "src/test-setup.ts",
             "tsConfig": "tsconfig.spec.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["@angular/material/prebuilt-themes/rose-red.css", "src/styles.css"],
-            "scripts": [],
-            "karmaConfig": "karma.conf.js"
+            "providersFile": "src/test-setup.ts"
           }
         },
         "lint": {

angular-client/eslint.config.js

@@ -2,7 +2,8 @@
 const eslint = require('@eslint/js');
 const tseslint = require('typescript-eslint');
 const angular = require('angular-eslint');
-const rxjsAngularX = require('eslint-plugin-rxjs-angular-x');
+// ESM-only since 1.0, so require() returns the module namespace.
+const rxjsAngularX = require('eslint-plugin-rxjs-angular-x').default;
 
 module.exports = tseslint.config(
   {
@@ -49,6 +50,9 @@ module.exports = tseslint.config(
           style: 'kebab-case'
         }
       ],
+      // Angular 22 defaults to OnPush; components pinned to Eager by the v22 migration keep their
+      // old behaviour until they move to OnPush (#863).
+      '@angular-eslint/prefer-on-push-component-change-detection': 'off',
       'guard-for-in': 'error',
       'prefer-arrow-callback': 'error',
       'no-unsafe-negation': ['error', { enforceForOrderingRelations: true }],