Merge pull request #682 from keymanapp/chore/ng-upgrade

chore: upgrade Angular to v22.0

Author: mcdurdin

.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-lock.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/package.json

@@ -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/agent-detail/agent-detail.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.component.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/app.module.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/assigned-issues/assigned-issues.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 {