Update @angular/cli 21.2.10 -> 22.0.4

web-frontend/package.json

@@ -11,18 +11,18 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.2.12",
+    "@angular/animations": "^22.0.4",
     "@angular/cdk": "^21.2.10",
-    "@angular/common": "^21.2.12",
-    "@angular/compiler": "^21.2.12",
-    "@angular/core": "^21.2.12",
-    "@angular/forms": "^21.2.12",
+    "@angular/common": "^22.0.4",
+    "@angular/compiler": "^22.0.4",
+    "@angular/core": "^22.0.4",
+    "@angular/forms": "^22.0.4",
     "@angular/material": "^21.2.10",
-    "@angular/platform-browser": "^21.2.12",
-    "@angular/platform-browser-dynamic": "^21.2.12",
-    "@angular/platform-server": "^21.2.12",
-    "@angular/router": "^21.2.12",
-    "@angular/ssr": "^21.2.10",
+    "@angular/platform-browser": "^22.0.4",
+    "@angular/platform-browser-dynamic": "^22.0.4",
+    "@angular/platform-server": "^22.0.4",
+    "@angular/router": "^22.0.4",
+    "@angular/ssr": "^22.0.4",
     "@novnc/novnc": "^1.5.0",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
@@ -30,18 +30,19 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^21.2.10",
-    "@angular/cli": "^21.2.10",
-    "@angular/compiler-cli": "^21.2.12",
+    "@angular/build": "^22.0.4",
+    "@angular/cli": "^22.0.4",
+    "@angular/compiler-cli": "^22.0.4",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.0",
-    "@types/node": "^18.18.0",
+    "@types/node": "^26.0.1",
+    "istanbul-lib-instrument": "^6.0.3",
     "jasmine-core": "~5.5.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.3"
+    "typescript": "~6.0.3"
   }
 }

web-frontend/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { MatToolbarModule} from '@angular/material/toolbar';
 import { SideNavigationComponent } from "./side-navigation/side-navigation.component";
@@ -12,6 +12,7 @@ import { SideNavigationComponent } from "./side-navigation/side-navigation.compo
     MatToolbarModule
 ],
   templateUrl: './app.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './app.component.scss'
 })
 export class AppComponent {

web-frontend/src/app/app.config.ts

@@ -2,17 +2,17 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
-import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { provideClientHydration, withEventReplay, withNoIncrementalHydration } from '@angular/platform-browser';
 
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withXhr } from '@angular/common/http';
 import { BackendCommunicationService } from './backend-communication.service';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
-    provideClientHydration(withEventReplay()),
-    provideHttpClient(),
+    provideClientHydration(withEventReplay(), withNoIncrementalHydration()),
+    provideHttpClient(withXhr()),
     BackendCommunicationService
     ]
 };

web-frontend/src/app/console/console.component.ts

@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, OnDestroy } from '@angular/core';
+import { Component, AfterViewInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
@@ -25,6 +25,7 @@ import { BackendCommunicationService } from '../backend-communication.service';
     MatProgressSpinnerModule
   ],
   templateUrl: './console.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './console.component.scss'
 })
 export class ConsoleComponent implements AfterViewInit, OnDestroy {

web-frontend/src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatIconModule } from '@angular/material/icon';
@@ -14,6 +14,7 @@ import { BackendCommunicationService } from '../backend-communication.service';
   templateUrl: './dashboard.component.html',
   styleUrl: './dashboard.component.scss',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     MatGridListModule,
     MatMenuModule,

web-frontend/src/app/info/info.component.ts

@@ -11,6 +11,7 @@ import { BackendCommunicationService } from '../backend-communication.service';
   selector: 'app-info',
   imports: [MatListModule, MatDividerModule, MatIconModule, MatDialogModule],
   templateUrl: './info.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './info.component.scss'
 })
 export class InfoComponent {

web-frontend/src/app/side-navigation/side-navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { AsyncPipe } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -19,6 +19,7 @@ import { BackendCommunicationService } from '../backend-communication.service';
   templateUrl: './side-navigation.component.html',
   styleUrl: './side-navigation.component.scss',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     MatToolbarModule,
     MatButtonModule,

web-frontend/src/app/system-information/system-information.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { BackendCommunicationService } from '../backend-communication.service';
 
 
@@ -6,6 +6,7 @@ import { BackendCommunicationService } from '../backend-communication.service';
   selector: 'app-system-information',
   templateUrl: './system-information.component.html',
   styleUrl: './system-information.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: []
 })
 export class SystemInformationComponent {

web-frontend/tsconfig.app.json

@@ -15,5 +15,13 @@
   ],
   "include": [
     "src/**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

web-frontend/tsconfig.spec.json

@@ -11,5 +11,13 @@
   "include": [
     "src/**/*.spec.ts",
     "src/**/*.d.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }