chore: upgrade Angular to 22 and Ionic to 9

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