chore: upgrade Angular to v22.0, node to v24.0

.github/workflows/master_com-keyman-status.yml

@@ -19,7 +19,7 @@ jobs:
     - name: Set up Node.js version
       uses: actions/setup-node@v1
       with:
-        node-version: '20.x'
+        node-version: '24.x'
 
     - name: npm install, build, and test
       run: |

.github/workflows/staging_com-keyman-staging-status.yml

@@ -19,7 +19,7 @@ jobs:
     - name: Set up Node.js version
       uses: actions/setup-node@v1
       with:
-        node-version: '22.x'
+        node-version: '24.x'
 
     - name: npm ci + build - public
       run: |

.github/workflows/test.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Set up Node.js version
         uses: actions/setup-node@v1
         with:
-          node-version: '20.x'
+          node-version: '24.x'
 
       - name: npm install, build, and test
         run: |

public/package.json

@@ -11,14 +11,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.1.6",
-    "@angular/common": "^21.1.6",
-    "@angular/compiler": "^21.1.6",
-    "@angular/core": "^21.1.6",
-    "@angular/forms": "^21.1.6",
-    "@angular/platform-browser": "^21.1.6",
-    "@angular/platform-browser-dynamic": "^21.1.6",
-    "@angular/router": "^21.1.6",
+    "@angular/animations": "^22.0.2",
+    "@angular/common": "^22.0.2",
+    "@angular/compiler": "^22.0.2",
+    "@angular/core": "^22.0.2",
+    "@angular/forms": "^22.0.2",
+    "@angular/platform-browser": "^22.0.2",
+    "@angular/platform-browser-dynamic": "^22.0.2",
+    "@angular/router": "^22.0.2",
     "@sentry/angular": "^10.36.0",
     "@sentry/tracing": "^6.2.3",
     "bootstrap": "^5.3.8",
@@ -31,15 +31,16 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^21.1.6",
-    "@angular/cli": "^21.1.6",
-    "@angular/compiler-cli": "^21.1.6",
-    "@angular/language-service": "^21.1.6",
+    "@angular/build": "^22.0.3",
+    "@angular/cli": "^22.0.3",
+    "@angular/compiler-cli": "^22.0.2",
+    "@angular/language-service": "^22.0.2",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^12.11.1",
+    "@types/node": "^26.0.0",
     "angular-eslint": "20.2.0",
     "eslint": "^9.33.0",
+    "istanbul-lib-instrument": "^6.0.3",
     "jasmine-core": "~5.6.0",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.4",
@@ -48,7 +49,6 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
     "ts-node": "~7.0.0",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "8.40.0"
+    "typescript": "~6.0.3"
   }
 }

public/src/app/agent-detail/agent-detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { platforms, PlatformSpec } from '../../../../shared/platforms';
 import { PopupCoordinatorService } from '../popup-coordinator.service';
 import { PopupComponent } from '../popup/popup.component';
@@ -9,6 +9,7 @@ import { Status } from '../status/status.interface';
     selector: 'app-agent-detail',
     templateUrl: './agent-detail.component.html',
     styleUrls: ['./agent-detail.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class AgentDetailComponent extends PopupComponent implements OnInit {

public/src/app/app.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class AppComponent {

public/src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from "@angular/platform-browser";
 import {
   provideHttpClient,
   withInterceptorsFromDi,
+  withXhr
 } from "@angular/common/http";
 import { ErrorHandler, NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
@@ -83,7 +84,7 @@ import { ServiceStatePopupComponent } from "./service-state-popup/service-state-
   ],
   providers: [
     VisibilityService,
-    provideHttpClient(withInterceptorsFromDi()),
+    provideHttpClient(withXhr(), withInterceptorsFromDi()),
 
     // Enable Sentry error reporting
     {

public/src/app/assigned-issues/assigned-issues.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { getAuthorAvatarUrl } from '../../../../shared/users';
 import { issueLabelScopes } from "../../../../shared/issue-labels";
@@ -12,6 +12,7 @@ import { dataModel } from '../data/data.model';
     selector: 'app-assigned-issues',
     templateUrl: './assigned-issues.component.html',
     styleUrls: ['./assigned-issues.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class AssignedIssuesComponent {

public/src/app/box-pr-author/box-pr-author.component.ts

@@ -1,10 +1,11 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { getAuthorAvatarUrl } from '../../../../shared/users';
 
 @Component({
     selector: 'app-box-pr-author',
     templateUrl: './box-pr-author.component.html',
     styleUrls: ['./box-pr-author.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class BoxPrAuthorComponent implements OnInit {

public/src/app/box-pr-base/box-pr-base.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
     selector: 'app-box-pr-base',
     templateUrl: './box-pr-base.component.html',
     styleUrls: ['./box-pr-base.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class BoxPrBaseComponent implements OnInit {

public/src/app/box-pr-platform/box-pr-platform.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
     selector: 'app-box-pr-platform',
     templateUrl: './box-pr-platform.component.html',
     styleUrls: ['./box-pr-platform.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class BoxPrPlatformComponent implements OnInit {

public/src/app/box-pr-project/box-pr-project.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
     selector: 'app-box-pr-project',
     templateUrl: './box-pr-project.component.html',
     styleUrls: ['./box-pr-project.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class BoxPrProjectComponent implements OnInit {

public/src/app/box-pr-status/box-pr-status.component.ts

@@ -1,9 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
     selector: 'app-box-pr-status',
     templateUrl: './box-pr-status.component.html',
     styleUrls: ['./box-pr-status.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class BoxPrStatusComponent implements OnInit {

public/src/app/build-queue/build-queue.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { platforms, PlatformSpec } from '../../../../shared/platforms';
 import { PopupCoordinatorService } from '../popup-coordinator.service';
 import { PopupComponent } from '../popup/popup.component';
@@ -8,6 +8,7 @@ import { VisibilityService } from '../visibility/visibility.service';
     selector: 'app-build-queue',
     templateUrl: './build-queue.component.html',
     styleUrls: ['./build-queue.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class BuildQueueComponent extends PopupComponent implements OnInit {

public/src/app/clipboard/clipboard.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
 
 /*interface ClipboardItem {
   readonly types: string[];
@@ -19,6 +19,7 @@ declare var ClipboardItem: {
     selector: 'app-clipboard',
     templateUrl: './clipboard.component.html',
     styleUrls: ['./clipboard.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class ClipboardComponent implements OnInit {

public/src/app/community-queue/community-queue.component.html

@@ -4,7 +4,7 @@
     [link]="'https://community.software.sil.org/c/keyman'"
     [title]="'Open Topics'"
     [unfixedCount]="countOfNewPosts()"
-    [count]="queue?.length"
+    [count]="$safeNavigationMigration(queue?.length)"
     [label]="'Open Topics'"
   [class]="hasNewTopics() ? 'has-error' : hasNewPosts() ? 'has-warning' : 'is-empty'"></app-count-box>
 

public/src/app/community-queue/community-queue.component.ts

@@ -1,5 +1,5 @@
 import { DatePipe } from '@angular/common';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { PopupCoordinatorService } from '../popup-coordinator.service';
 import { PopupComponent } from '../popup/popup.component';
@@ -11,6 +11,7 @@ import { communityUserIds } from '../../../../shared/users';
     selector: 'app-community-queue',
     templateUrl: './community-queue.component.html',
     styleUrls: ['./community-queue.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class CommunityQueueComponent extends PopupComponent implements OnInit {

public/src/app/contributions-home/contributions-home.component.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ServiceIdentifier } from '../../../../shared/services';
 import { Status, EMPTY_STATUS } from '../status/status.interface';
@@ -10,6 +10,7 @@ import { StatusService } from '../status/status.service';
     templateUrl: './contributions-home.component.html',
     styleUrls: ['./contributions-home.component.css'],
     providers: [StatusService],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class ContributionsHomeComponent implements OnInit {

public/src/app/contributions-tab/contributions-tab.component.html

@@ -140,7 +140,7 @@
           </th>
           @for (day of sprintDays; track day) {
             <td>
-              @for (post of status?.communitySite?.[user.login] | filterObjectByDate: day.date; track post) {
+              @for (post of $safeNavigationMigration(status?.communitySite?.[user.login]) | filterObjectByDate: day.date; track post) {
                 <span>
                   <a class='contribution-issue' href='{{post.url}}' target='_blank'>{{post.topic_id}}#{{post.post_number}}
                     <div class="contribution-detail">

public/src/app/contributions-tab/contributions-tab.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { issueLabelScopes } from '../../../../shared/issue-labels';
 import { getUserAvatarUrl, getTz } from '../../../../shared/users';
 import { appState } from '../../state';
@@ -11,6 +11,7 @@ import { repoShortNameFromGithubUrl } from '../utility/repoShortNameFromGithubUr
     selector: 'app-contributions-tab',
     templateUrl: './contributions-tab.component.html',
     styleUrls: ['./contributions-tab.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class ContributionsTabComponent implements OnInit, OnChanges, OnDestroy {

public/src/app/contributions/contributions.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, Output, EventEmitter, ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter, ChangeDetectorRef, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { getUserAvatarUrl, getTz } from '../../../../shared/users';
 import { appState } from '../../state';
 import { dataModel } from '../data/data.model';
@@ -7,6 +7,7 @@ import { dataModel } from '../data/data.model';
     selector: 'app-contributions',
     templateUrl: './contributions.component.html',
     styleUrls: ['./contributions.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class ContributionsComponent implements OnInit, OnDestroy {

public/src/app/count-box/count-box.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
     selector: 'app-count-box',
     templateUrl: './count-box.component.html',
     styleUrls: ['./count-box.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class CountBoxComponent implements OnInit {

public/src/app/deploy-box/deploy-box.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnChanges, Input } from '@angular/core';
+import { Component, OnInit, OnChanges, Input, ChangeDetectionStrategy } from '@angular/core';
 import { ServiceIdentifier } from '../../../../shared/services';
 import { compare as versionCompare } from "compare-versions";
 import { PopupComponent } from '../popup/popup.component';
@@ -14,6 +14,7 @@ interface DeployTarget {
     selector: 'app-deploy-box',
     templateUrl: './deploy-box.component.html',
     styleUrls: ['./deploy-box.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class DeployBoxComponent extends PopupComponent implements OnInit, OnChanges {

public/src/app/home/home.component.html

@@ -41,7 +41,7 @@
 
         @if (showAgents) {
           <span class="navbar-agents">
-            <app-build-queue [status]="status" [queue]="status?.teamCityQueue"></app-build-queue>
+            <app-build-queue [status]="status" [queue]="$safeNavigationMigration(status?.teamCityQueue)"></app-build-queue>
             @for (agent of status?.teamCityAgents; track agent) {
               <app-agent-detail [status]="status" [agent]="agent"></app-agent-detail>
             }

public/src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { NgZone, Component } from '@angular/core';
+import { NgZone, Component, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { StatusService } from '../status/status.service';
 import { ServiceIdentifier } from '../../../../shared/services';
@@ -14,6 +14,7 @@ import { buildVersion } from '../../../../shared/version';
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css'],
     providers: [StatusService],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class HomeComponent {

public/src/app/issue-list/issue-list.component.html

@@ -2,17 +2,17 @@
   @if (!isNav) {
     <app-count-box
       [repo]="repo"
-      [title]="milestone?.title"
+      [title]="$safeNavigationMigration(milestone?.title)"
       [unfixedCount]="getUnfixedIssueCount()"
-      [count]="milestone?.count"
-      [label]="platform?.id ? platform?.id+'/' : null"
+      [count]="$safeNavigationMigration(milestone?.count)"
+      [label]="platform?.id ? $safeNavigationMigration(platform?.id)+'/' : null"
       [alwaysShow]="view == 'all'"
     [class]="repo == '*' || repo == 'keyboards' || repo == 'lexical-models' || milestone?.title == 'Tests' ? 'milestone-all' : 'milestone-'+milestone?.id"></app-count-box>
   }
 
   @if (isNav) {
     <span class="navbar-new-issues">
-      <a target='_blank' href="https://github.com/keymanapp/keyman/issues?q=is%3Aopen+is%3Aissue+-label%3Aandroid/+-label%3Aios/+-label%3Alinux/+-label%3Amac/+-label%3Adeveloper/+-label%3Aweb/+-label%3Awindows/+-label%3Acommon/+-label%3Acore/" class="label hide-if-zero {{errorClassIfNonZero(issues?.length)}}">New issues: {{issues?.length}}</a>
+      <a target='_blank' href="https://github.com/keymanapp/keyman/issues?q=is%3Aopen+is%3Aissue+-label%3Aandroid/+-label%3Aios/+-label%3Alinux/+-label%3Amac/+-label%3Adeveloper/+-label%3Aweb/+-label%3Awindows/+-label%3Acommon/+-label%3Acore/" class="label hide-if-zero {{errorClassIfNonZero($safeNavigationMigration(issues?.length))}}">New issues: {{issues?.length}}</a>
     </span>
   }
 

public/src/app/issue-list/issue-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { labelColor } from '../utility/labelColor';
 import { PopupCoordinatorService } from '../popup-coordinator.service';
@@ -12,6 +12,7 @@ import { IssueView } from '../../state';
     selector: 'app-issue-list',
     templateUrl: './issue-list.component.html',
     styleUrls: ['./issue-list.component.css'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: false
 })
 export class IssueListComponent extends PopupComponent implements OnInit {