chore: upgrade Angular to 22 and Ionic to 9

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;