chore: upgrade Angular to 22 and Ionic to 9

.browserslistrc

@@ -8,8 +8,4 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-Chrome >=107
-Firefox >=106
-Edge >=107
-Safari >=16.1
-iOS >=16.1
+baseline widely available on 2026-05-07

.eslintrc.json

@@ -1,46 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": ["projects/**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts"],
-      "parserOptions": {
-        "project": ["tsconfig.json"],
-        "createDefaultProgram": true
-      },
-      "extends": [
-        "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {
-        "@angular-eslint/component-class-suffix": [
-          "error",
-          {
-            "suffixes": ["Page", "Component"]
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
-        ],
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "app",
-            "style": "camelCase"
-          }
-        ]
-      }
-    },
-    {
-      "files": ["*.html"],
-      "extends": ["plugin:@angular-eslint/template/recommended"],
-      "rules": {}
-    }
-  ]
-}

AGENTS.md

@@ -6,8 +6,8 @@ Court Pilot is a badminton umpire rotation and court-assignment application. It
 
 ## Technology
 
-- Angular 20 with standalone components and strict TypeScript
-- Ionic Angular 8 UI components
+- Angular 22 with standalone components and strict TypeScript
+- Ionic Angular 9 UI components
 - Angular signals and RxJS
 - Dexie 4 / IndexedDB for local persistence
 - Angular CDK drag and drop
@@ -45,7 +45,7 @@ Do not manually edit generated output or installed dependencies:
 ## Implementation conventions
 
 - Preserve strict TypeScript and strict Angular template checks.
-- Use standalone Angular components and import Ionic components from `@ionic/angular/standalone`.
+- Use standalone Angular components and import Ionic components from `@ionic/angular`.
 - Prefer `inject()` for dependency injection, matching current components and services.
 - Keep persistent-data access in services rather than directly in page components.
 - Expose reactive Dexie queries through signals when following an existing service pattern.

README.md

@@ -4,7 +4,7 @@ Court Pilot is a local-first web and desktop application for managing badminton
 
 ## Current stack
 
-- Angular 20 and Ionic Angular 8
+- Angular 22 and Ionic Angular 9
 - Dexie / IndexedDB local persistence
 - Angular CDK drag and drop
 - Tauri 2 desktop application

docs/development.md

@@ -5,7 +5,7 @@
 ### Web development
 
 - NVM
-- Node.js `lts/jod` (Node.js 22), matching `.nvmrc` and the release workflow
+- Node.js `lts/jod` (at least Node.js 22.22.3), matching `.nvmrc` and the release workflow
 - npm
 - Ionic CLI available as `ionic`
 
@@ -40,6 +40,10 @@ This also works in noninteractive Bash sessions that do not load `.bashrc`.
 Run each block from the project root. Stop if loading NVM or selecting Node fails;
 do not fall back to the system Node version.
 
+Angular 22 requires TypeScript 6.0 and Node.js 22.22.3 or newer on the
+Node.js 22 line. If your installed `lts/jod` is older, run `nvm install lts/jod`
+after loading Bash NVM.
+
 Install exact project dependencies with:
 
 ```bash
@@ -99,6 +103,29 @@ For VS Code, install the recommended `esbenp.prettier-vscode` extension, select
 
 Prettier is currently an editor workflow; the repository does not declare a Prettier npm dependency or formatting script. Do not claim a CLI formatting check exists unless one is added later.
 
+## Dependency compatibility
+
+Angular major upgrades must run `ng update` one major at a time. The Angular
+21 and 22 migrations preserve Zone.js with `provideZoneChangeDetection()`
+and explicitly select `ChangeDetectionStrategy.Eager` for existing components.
+Ionic 9 standalone components are imported from `@ionic/angular`.
+
+ESLint 10 uses `eslint.config.cjs`; the old `.eslintrc.json` format is no longer
+supported. The flat configuration retains the Angular template and selector rules.
+Unused legacy ESLint plugins and the unused Jasmine spec reporter were removed.
+Tests use the replacement `@angular/platform-browser/testing` API, so the
+deprecated `@angular/platform-browser-dynamic` package is no longer needed.
+The unused `@angular/animations` package was also removed; Ionic manages its
+own animations.
+
+The browser target follows Angular 22's widely available Baseline date,
+2026-05-07. Older browser versions outside that baseline are no longer targeted.
+
+Two scoped npm overrides apply upstream security fixes: Angular's build package
+uses Vite 8.3.5 or newer within v8, and Capacitor's Xcode parser uses UUID 11.1.1
+or newer within v11. Xcode uses the compatible CommonJS `uuid.v4()` API.
+Revisit these overrides when upstream packages include the patched versions.
+
 ## Tauri workflow
 
 Run Tauri commands through the npm script:

docs/testing.md

@@ -4,6 +4,10 @@
 
 Angular unit tests use Jasmine and Karma. Test files are colocated with their subjects as `*.spec.ts`. Karma launches Chrome by default and keeps running in watch mode for local development.
 
+Jasmine is kept on the compatible 6.x line. Jasmine 7 does not support Karma
+or Zone.js. The npm overrides make Karma adapters use the same Jasmine core
+as the app rather than installing an older nested copy.
+
 ## Local test commands
 
 These examples target Bash and run from the project root. Complete the

eslint.config.cjs

@@ -0,0 +1,37 @@
+const { defineConfig } = require('eslint/config');
+const angular = require('angular-eslint');
+
+module.exports = defineConfig(
+  { ignores: ['projects/**', 'www/**', 'coverage/**'] },
+  {
+    files: ['src/**/*.ts'],
+    extends: angular.configs.tsRecommended,
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.json'],
+        tsconfigRootDir: __dirname
+      }
+    },
+    processor: angular.processInlineTemplates,
+    rules: {
+      // Preserve existing Ionic page updates while retaining Zone.js.
+      '@angular-eslint/prefer-on-push-component-change-detection': 'off',
+      '@angular-eslint/component-class-suffix': [
+        'error',
+        { suffixes: ['Page', 'Component'] }
+      ],
+      '@angular-eslint/component-selector': [
+        'error',
+        { type: 'element', prefix: 'app', style: 'kebab-case' }
+      ],
+      '@angular-eslint/directive-selector': [
+        'error',
+        { type: 'attribute', prefix: 'app', style: 'camelCase' }
+      ]
+    }
+  },
+  {
+    files: ['src/**/*.html'],
+    extends: angular.configs.templateRecommended
+  }
+);

package.json

@@ -14,58 +14,68 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.28",
-    "@angular/cdk": "^20.2.14",
-    "@angular/common": "^20.3.28",
-    "@angular/compiler": "^20.3.28",
-    "@angular/core": "^20.3.28",
-    "@angular/forms": "^20.3.28",
-    "@angular/platform-browser": "^20.3.28",
-    "@angular/platform-browser-dynamic": "^20.3.28",
-    "@angular/router": "^20.3.28",
-    "@capacitor/app": "8.1.0",
-    "@capacitor/core": "8.3.4",
+    "@angular/cdk": "^22.2.4",
+    "@angular/common": "^22.2.3",
+    "@angular/compiler": "^22.2.3",
+    "@angular/core": "^22.2.3",
+    "@angular/forms": "^22.2.3",
+    "@angular/platform-browser": "^22.2.3",
+    "@angular/router": "^22.2.3",
+    "@capacitor/app": "8.1.2",
+    "@capacitor/core": "8.5.3",
     "@capacitor/haptics": "8.0.2",
-    "@capacitor/keyboard": "8.0.3",
-    "@capacitor/status-bar": "8.0.2",
-    "@ionic/angular": "^8.0.0",
-    "@tauri-apps/plugin-os": "^2.3.2",
-    "@tauri-apps/plugin-process": "^2.3.1",
-    "@tauri-apps/plugin-updater": "^2.10.1",
-    "dexie": "^4.4.2",
-    "ionicons": "^7.0.0",
+    "@capacitor/keyboard": "8.0.6",
+    "@capacitor/status-bar": "8.0.4",
+    "@ionic/angular": "^9.0.9",
+    "@tauri-apps/plugin-os": "^2.4.0",
+    "@tauri-apps/plugin-process": "^2.4.0",
+    "@tauri-apps/plugin-updater": "^2.14.0",
+    "dexie": "^4.4.7",
+    "ionicons": "^8.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.16.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.3.34",
-    "@angular-eslint/builder": "^20.3.0",
-    "@angular-eslint/eslint-plugin": "^20.3.0",
-    "@angular-eslint/eslint-plugin-template": "^20.3.0",
-    "@angular-eslint/schematics": "^20.3.0",
-    "@angular-eslint/template-parser": "^20.3.0",
-    "@angular/cli": "^20.3.34",
-    "@angular/compiler-cli": "^20.3.28",
-    "@angular/language-service": "^20.3.28",
-    "@capacitor/cli": "8.3.4",
-    "@ionic/angular-toolkit": "^12.0.0",
-    "@tauri-apps/cli": "^2.11.2",
-    "@types/jasmine": "~5.1.0",
-    "@typescript-eslint/eslint-plugin": "^8.18.0",
-    "@typescript-eslint/parser": "^8.18.0",
-    "eslint": "^9.16.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.2.1",
-    "eslint-plugin-prefer-arrow": "1.2.2",
-    "jasmine-core": "~5.1.0",
-    "jasmine-spec-reporter": "~5.0.0",
+    "@angular-devkit/build-angular": "^22.2.4",
+    "@angular-eslint/builder": "^22.6.0",
+    "@angular-eslint/eslint-plugin": "^22.6.0",
+    "@angular-eslint/eslint-plugin-template": "^22.6.0",
+    "@angular-eslint/schematics": "^22.6.0",
+    "@angular-eslint/template-parser": "^22.6.0",
+    "@angular/cli": "^22.2.4",
+    "@angular/compiler-cli": "^22.2.3",
+    "@angular/language-service": "^22.2.3",
+    "@capacitor/cli": "8.5.3",
+    "@ionic/angular-toolkit": "^13.0.0",
+    "@tauri-apps/cli": "^2.12.4",
+    "@types/jasmine": "~6.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.72.0",
+    "@typescript-eslint/parser": "^8.72.0",
+    "eslint": "^10.13.0",
+    "istanbul-lib-instrument": "^6.0.3",
+    "jasmine-core": "~6.3.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.9.0"
+    "karma-jasmine-html-reporter": "~2.3.0",
+    "typescript": "~6.0.3",
+    "angular-eslint": "^22.6.0"
   },
-  "description": "Manage court officials"
+  "description": "Manage court officials",
+  "overrides": {
+    "karma-jasmine": {
+      "jasmine-core": "$jasmine-core"
+    },
+    "karma-jasmine-html-reporter": {
+      "jasmine-core": "$jasmine-core"
+    },
+    "@angular/build": {
+      "vite": "^8.3.5"
+    },
+    "xcode": {
+      "uuid": "^11.1.1"
+    }
+  }
 }

src/app/app.component.ts

@@ -1,10 +1,10 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import {
   AlertController,
   IonApp,
   IonRouterOutlet,
   LoadingController
-} from '@ionic/angular/standalone';
+} from '@ionic/angular';
 import { check, DownloadEvent } from '@tauri-apps/plugin-updater';
 import { isTauri } from '@tauri-apps/api/core';
 import { platform } from '@tauri-apps/plugin-os';
@@ -15,6 +15,7 @@ import { ThemeService } from './services/theme.service';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [IonApp, IonRouterOutlet]
 })
 export class AppComponent {

src/app/tab1/tab1.page.html

@@ -21,19 +21,25 @@
       </ion-col>
       <ion-col>
         <ion-item [lines]="'none'">
-          <ion-label class="ion-text-center"> {{ 'umpire' | translate }} </ion-label>
+          <ion-label class="ion-text-center">
+            {{ 'umpire' | translate }}
+          </ion-label>
         </ion-item>
       </ion-col>
       @if (serviceJudgeEnabled()) {
       <ion-col>
         <ion-item [lines]="'none'">
-          <ion-label class="ion-text-center"> {{ 'serviceJudge' | translate }} </ion-label>
+          <ion-label class="ion-text-center">
+            {{ 'serviceJudge' | translate }}
+          </ion-label>
         </ion-item>
       </ion-col>
       }
       <ion-col size="2" sizeLg="1"></ion-col>
     </ion-row>
-    @for (item of [].constructor(settings()?.numberOfCourts); track $index) {
+    @for (item of
+    [].constructor($safeNavigationMigration(settings()?.numberOfCourts)); track
+    $index) {
     <ion-row>
       <ion-col [size]="1" class="court-number">
         <ion-list>
@@ -119,19 +125,25 @@
     <ion-row>
       <ion-col [size]="!serviceJudgeEnabled() ? 6 : 4">
         <ion-item color="primary">
-          <ion-label class="ion-text-center"> {{ 'umpires' | translate }} </ion-label>
+          <ion-label class="ion-text-center">
+            {{ 'umpires' | translate }}
+          </ion-label>
         </ion-item>
       </ion-col>
       @if (serviceJudgeEnabled()) {
       <ion-col [size]="4">
         <ion-item color="primary">
-          <ion-label class="ion-text-center"> {{ 'serviceJudges' | translate }} </ion-label>
+          <ion-label class="ion-text-center">
+            {{ 'serviceJudges' | translate }}
+          </ion-label>
         </ion-item>
       </ion-col>
       }
       <ion-col [size]="!serviceJudgeEnabled() ? 6 : 4">
         <ion-item color="medium">
-          <ion-label class="ion-text-center"> {{ 'notOnDuty' | translate }} </ion-label>
+          <ion-label class="ion-text-center">
+            {{ 'notOnDuty' | translate }}
+          </ion-label>
         </ion-item>
       </ion-col>
     </ion-row>

src/app/tab1/tab1.page.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { signal } from '@angular/core';
-import { AlertController } from '@ionic/angular/standalone';
+import { AlertController } from '@ionic/angular';
 import { CourtServiceJudge, CourtUmpire, Settings, Umpire } from 'db';
 import { Tab1Page } from './tab1.page';
 import { SettingsService } from '../services/settings-service';

src/app/tab1/tab1.page.ts

@@ -1,4 +1,9 @@
-import { Component, computed, inject } from '@angular/core';
+import {
+  Component,
+  computed,
+  inject,
+  ChangeDetectionStrategy
+} from '@angular/core';
 import {
   IonHeader,
   IonToolbar,
@@ -13,7 +18,7 @@ import {
   IonIcon,
   IonButton,
   AlertController
-} from '@ionic/angular/standalone';
+} from '@ionic/angular';
 import { SettingsService } from '../services/settings-service';
 import { UmpireService } from '../services/umpire.service';
 import { Umpire } from 'db';
@@ -27,7 +32,6 @@ import {
   CdkDropList,
   CdkDropListGroup
 } from '@angular/cdk/drag-drop';
-import { CommonModule } from '@angular/common';
 import { CourtUmpireService } from '../services/court.umpire.service';
 import { CourtServiceJudgeService } from '../services/court.service.judge.service';
 import { addIcons } from 'ionicons';
@@ -40,6 +44,7 @@ import { TranslationService } from '../i18n/translation.service';
   templateUrl: 'tab1.page.html',
   styleUrls: ['tab1.page.scss'],
   providers: [FullnamePipe],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     IonButton,
     IonIcon,
@@ -56,7 +61,6 @@ import { TranslationService } from '../i18n/translation.service';
     FullnamePipe,
     CdkDropList,
     CdkDrag,
-    CommonModule,
     CdkDragPlaceholder,
     CdkDropListGroup,
     TranslatePipe

src/app/tab2/tab2.page.ts

@@ -1,4 +1,9 @@
-import { Component, inject, ViewChild } from '@angular/core';
+import {
+  Component,
+  inject,
+  ViewChild,
+  ChangeDetectionStrategy
+} from '@angular/core';
 import {
   IonHeader,
   IonToolbar,
@@ -18,7 +23,7 @@ import {
   IonCol,
   IonLabel,
   AlertController
-} from '@ionic/angular/standalone';
+} from '@ionic/angular';
 import { UmpireService } from '../services/umpire.service';
 import { Umpire } from 'db';
 import { addIcons } from 'ionicons';
@@ -35,6 +40,7 @@ import { TranslationService } from '../i18n/translation.service';
   templateUrl: 'tab2.page.html',
   styleUrls: ['tab2.page.scss'],
   providers: [FullnamePipe],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     IonLabel,
     IonCol,

src/app/tab3/tab3.page.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import {
   IonHeader,
   IonToolbar,
@@ -14,7 +14,7 @@ import {
   IonSelect,
   IonSelectOption,
   IonLabel
-} from '@ionic/angular/standalone';
+} from '@ionic/angular';
 import { SettingsService } from '../services/settings-service';
 import { CourtUmpireService } from '../services/court.umpire.service';
 import { CourtServiceJudgeService } from '../services/court.service.judge.service';
@@ -29,6 +29,7 @@ import { ThemePreference, ThemeService } from '../services/theme.service';
   selector: 'app-tab3',
   templateUrl: 'tab3.page.html',
   styleUrls: ['tab3.page.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     IonRow,
     IonCol,

src/app/tabs/tabs.page.ts

@@ -1,11 +1,16 @@
-import { Component, EnvironmentInjector, inject } from '@angular/core';
+import {
+  Component,
+  EnvironmentInjector,
+  inject,
+  ChangeDetectionStrategy
+} from '@angular/core';
 import {
   IonTabs,
   IonTabBar,
   IonTabButton,
   IonIcon,
   IonLabel
-} from '@ionic/angular/standalone';
+} from '@ionic/angular';
 import { addIcons } from 'ionicons';
 import { gridOutline, peopleOutline, settingsOutline } from 'ionicons/icons';
 import { TranslatePipe } from '../i18n/translation.pipe';
@@ -14,6 +19,7 @@ import { TranslatePipe } from '../i18n/translation.pipe';
   selector: 'app-tabs',
   templateUrl: 'tabs.page.html',
   styleUrls: ['tabs.page.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, TranslatePipe]
 })
 export class TabsPage {

src/main.ts

@@ -1,14 +1,21 @@
+import { provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
-import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router';
-import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
+import {
+  RouteReuseStrategy,
+  provideRouter,
+  withPreloading,
+  PreloadAllModules
+} from '@angular/router';
+import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular';
 
 import { routes } from './app/app.routes';
 import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, {
   providers: [
+    provideZoneChangeDetection(),
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     provideIonicAngular(),
-    provideRouter(routes, withPreloading(PreloadAllModules)),
-  ],
+    provideRouter(routes, withPreloading(PreloadAllModules))
+  ]
 });

src/test.ts

@@ -3,12 +3,12 @@
 import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
+  BrowserTestingModule,
+  platformBrowserTesting
+} from '@angular/platform-browser/testing';
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
+  BrowserTestingModule,
+  platformBrowserTesting()
 );

src/zone-flags.ts

@@ -2,5 +2,4 @@
  * Prevents Angular change detection from
  * running with certain Web Component callbacks
  */
-// eslint-disable-next-line no-underscore-dangle
 (window as any).__Zone_disable_customElements = true;

tsconfig.app.json

@@ -5,11 +5,14 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

tsconfig.json

@@ -2,7 +2,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
+    "paths": { "db": ["./db.ts"] },
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
@@ -14,11 +14,10 @@
     "sourceMap": true,
     "declaration": false,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "importHelpers": true,
     "target": "es2022",
     "module": "es2020",
-    "lib": ["es2021", "dom"],
     "skipLibCheck": true,
     "useDefineForClassFields": false
   },

tsconfig.spec.json

@@ -3,16 +3,16 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/test.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }