update Angular to latest Version

src/ClientApp/package.json

@@ -12,15 +12,15 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.2.4",
+    "@angular/animations": "^22.0.1",
-    "@angular/common": "^21.2.4",
+    "@angular/common": "^22.0.1",
-    "@angular/compiler": "^21.2.4",
+    "@angular/compiler": "^22.0.1",
-    "@angular/core": "^21.2.4",
+    "@angular/core": "^22.0.1",
-    "@angular/forms": "^21.2.4",
+    "@angular/forms": "^22.0.1",
-    "@angular/localize": "^21.2.4",
+    "@angular/localize": "^22.0.1",
-    "@angular/platform-browser": "^21.2.4",
+    "@angular/platform-browser": "^22.0.1",
-    "@angular/platform-browser-dynamic": "^21.2.4",
+    "@angular/platform-browser-dynamic": "^22.0.1",
-    "@angular/router": "^21.2.4",
+    "@angular/router": "^22.0.1",
     "@auth0/angular-jwt": "^5.2.0",
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
@@ -29,10 +29,11 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^21.2.2",
+    "@angular/build": "^22.0.0",
-    "@angular/cli": "^21.2.2",
+    "@angular/cli": "^22.0.0",
-    "@angular/compiler-cli": "^21.2.4",
+    "@angular/compiler-cli": "^22.0.1",
     "@types/jasmine": "~5.1.0",
+    "istanbul-lib-instrument": "^6.0.3",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
@@ -41,6 +42,6 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "puppeteer": "^24.43.0",
-    "typescript": "~5.9.3"
+    "typescript": "~6.0.3"
   }
 }

src/ClientApp/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, ChangeDetectionStrategy} from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import {FooterComponent} from "./presentation/components/footer/footer.component";
 import {ToastComponent} from "./presentation/shared/toast/toast.component";
@@ -10,6 +10,7 @@ import {DarkModeService} from "./infrastructure/services/dark-mode.service";
   imports: [RouterOutlet, FooterComponent, ToastComponent, HeaderComponent],
   templateUrl: './app.component.html',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './app.component.scss'
 })
 export class AppComponent {

src/ClientApp/src/app/app.config.ts

@@ -4,10 +4,10 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 import {provideHttpClient, withFetch, withInterceptors} from "@angular/common/http";
 import {tokenInterceptor} from "./presentation/interceptors/token.interceptor";
-import {provideClientHydration, withEventReplay} from "@angular/platform-browser";
+import {provideClientHydration, withEventReplay, withNoIncrementalHydration} from "@angular/platform-browser";
 
 export const appConfig: ApplicationConfig = {
   providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),
     provideHttpClient(withFetch(), withInterceptors([tokenInterceptor
-    ])), provideClientHydration(withEventReplay())]
+    ])), provideClientHydration(withEventReplay(), withNoIncrementalHydration())]
 };

src/ClientApp/src/app/infrastructure/services/auth-service.spec.ts

@@ -1,5 +1,5 @@
 import {TestBed} from '@angular/core/testing';
-import {provideHttpClient} from '@angular/common/http';
+import {provideHttpClient, withXhr} from '@angular/common/http';
 import {AuthService} from './auth-service';
 
 describe('AuthService', () => {
@@ -8,7 +8,7 @@ describe('AuthService', () => {
   beforeEach(() => {
     localStorage.clear();
     TestBed.configureTestingModule({
-      providers: [provideHttpClient()]
+      providers: [provideHttpClient(withXhr())]
     });
     service = TestBed.inject(AuthService);
   });

src/ClientApp/src/app/infrastructure/services/reset-password.service.spec.ts

@@ -1,5 +1,5 @@
 import {TestBed} from '@angular/core/testing';
-import {provideHttpClient} from '@angular/common/http';
+import {provideHttpClient, withXhr} from '@angular/common/http';
 import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
 import {ResetPasswordService} from './reset-password.service';
 import {environment} from '../../../environments/environment.development';
@@ -11,7 +11,7 @@ describe('ResetPasswordService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
-        provideHttpClient(),
+        provideHttpClient(withXhr()),
         provideHttpClientTesting(),
       ]
     });

src/ClientApp/src/app/infrastructure/services/user.service.spec.ts

@@ -1,5 +1,5 @@
 import {TestBed} from '@angular/core/testing';
-import {provideHttpClient} from '@angular/common/http';
+import {provideHttpClient, withXhr} from '@angular/common/http';
 import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
 import {UserService} from './user.service';
 import {environment} from '../../../environments/environment.development';
@@ -11,7 +11,7 @@ describe('UserService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [
-        provideHttpClient(),
+        provideHttpClient(withXhr()),
         provideHttpClientTesting(),
       ]
     });

src/ClientApp/src/app/presentation/authentication/forget-password-popup/forget-password-popup.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, inject, Output} from '@angular/core';
+import {Component, EventEmitter, inject, Output, ChangeDetectionStrategy} from '@angular/core';
 import {FormsModule} from "@angular/forms";
 import {ResetPasswordService} from "../../../infrastructure/services/reset-password.service";
 import {ToastService} from "../../../infrastructure/services/toast.service";
@@ -10,6 +10,7 @@ import {LoadingService} from "../../../infrastructure/services/loading.service";
     FormsModule
   ],
   templateUrl: './forget-password-popup.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './forget-password-popup.component.scss'
 })
 export class ForgetPasswordPopupComponent {

src/ClientApp/src/app/presentation/authentication/login/login.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, ChangeDetectionStrategy} from '@angular/core';
 import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
 import {Router, RouterLink} from "@angular/router";
 import ValidateForm from "../../../infrastructure/utilities/validate-form";
@@ -18,6 +18,7 @@ import {Title} from "@angular/platform-browser";
 ],
   templateUrl: './login.component.html',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './login.component.scss'
 })
 export class LoginComponent {

src/ClientApp/src/app/presentation/authentication/register/register.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, ChangeDetectionStrategy} from '@angular/core';
 import {Router, RouterLink} from "@angular/router";
 import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
 
@@ -17,6 +17,7 @@ import {Title} from "@angular/platform-browser";
 ],
   templateUrl: './register.component.html',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './register.component.scss'
 })
 export class RegisterComponent {

src/ClientApp/src/app/presentation/authentication/reset-password/reset-password.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject, OnInit} from '@angular/core';
+import {Component, inject, OnInit, ChangeDetectionStrategy} from '@angular/core';
 import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
 import {ResetPasswordService} from "../../../infrastructure/services/reset-password.service";
 import {ActivatedRoute, Router} from "@angular/router";
@@ -15,6 +15,7 @@ import {PasswordValidator} from "../../../infrastructure/utilities/password-vali
     ReactiveFormsModule
   ],
   templateUrl: './reset-password.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './reset-password.component.scss'
 })
 export class ResetPasswordComponent implements OnInit {

src/ClientApp/src/app/presentation/components/admin-dashboard/admin-dashboard.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import {RouterLink} from "@angular/router";
 
 @Component({
@@ -8,6 +8,7 @@ import {RouterLink} from "@angular/router";
   ],
   templateUrl: './admin-dashboard.component.html',
   styleUrl: './admin-dashboard.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true
 })
 export class AdminDashboardComponent {

src/ClientApp/src/app/presentation/components/footer/footer.component.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ChangeDetectionStrategy} from '@angular/core';
 import {RouterLink} from "@angular/router";
 import {appVersion} from "../../../../environments/version";
 
@@ -7,6 +7,7 @@ import {appVersion} from "../../../../environments/version";
   imports: [RouterLink],
   templateUrl: './footer.component.html',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './footer.component.scss'
 })
 export class FooterComponent {

src/ClientApp/src/app/presentation/components/header/header.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject, OnInit} from '@angular/core';
+import {Component, inject, OnInit, ChangeDetectionStrategy} from '@angular/core';
 import {DarkModeService} from '../../../infrastructure/services/dark-mode.service';
 import {FormsModule} from "@angular/forms";
 import {ActivatedRoute, NavigationEnd, Router, RouterLink} from "@angular/router";
@@ -14,6 +14,7 @@ import {filter} from "rxjs/operators";
 ],
   templateUrl: './header.component.html',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './header.component.scss'
 })
 export class HeaderComponent implements OnInit {

src/ClientApp/src/app/presentation/components/startpage/startpage.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'app-startpage',
   imports: [],
   templateUrl: './startpage.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './startpage.component.scss',
 })
 export class StartpageComponent {

src/ClientApp/src/app/presentation/components/unauthorized/unauthorized.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'app-unauthorized',
   imports: [],
   templateUrl: './unauthorized.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './unauthorized.component.scss',
 })
 export class UnauthorizedComponent {

src/ClientApp/src/app/presentation/components/user-dashboard/user-dashboard.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, ChangeDetectionStrategy} from '@angular/core';
 import {Title} from "@angular/platform-browser";
 import {UserStoreService} from "../../../infrastructure/services/user-store.service";
 import {AuthService} from "../../../infrastructure/services/auth-service";
@@ -7,6 +7,7 @@ import {AuthService} from "../../../infrastructure/services/auth-service";
   selector: 'app-user-dashboard',
   imports: [],
   templateUrl: './user-dashboard.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrl: './user-dashboard.component.scss',
 })
 export class UserDashboardComponent {

src/ClientApp/src/app/presentation/components/user-table/user-table.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, ChangeDetectionStrategy} from '@angular/core';
 import {User} from "../../../domain/entities/user";
 import {UserService} from "../../../infrastructure/services/user.service";
 import {ToastService} from "../../../infrastructure/services/toast.service";
@@ -15,6 +15,7 @@ import {DatePipe, NgClass} from "@angular/common";
   ],
   templateUrl: './user-table.component.html',
   styleUrl: './user-table.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true
 })
 export class UserTableComponent {

src/ClientApp/src/app/presentation/interceptors/token.interceptor.spec.ts

@@ -1,5 +1,5 @@
 import {TestBed} from '@angular/core/testing';
-import {HttpClient, HttpInterceptorFn, provideHttpClient, withInterceptors} from '@angular/common/http';
+import {HttpClient, HttpInterceptorFn, provideHttpClient, withInterceptors, withXhr} from '@angular/common/http';
 import {HttpTestingController, provideHttpClientTesting} from '@angular/common/http/testing';
 import {tokenInterceptor} from './token.interceptor';
 import {AuthService} from '../../infrastructure/services/auth-service';
@@ -15,7 +15,7 @@ describe('tokenInterceptor', () => {
 
     TestBed.configureTestingModule({
       providers: [
-        provideHttpClient(withInterceptors([tokenInterceptor])),
+        provideHttpClient(withXhr(), withInterceptors([tokenInterceptor])),
         provideHttpClientTesting(),
         {provide: AuthService, useValue: authService},
       ]

src/ClientApp/src/app/presentation/shared/popup-modal/popup-modal.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, ChangeDetectionStrategy} from '@angular/core';
 import {NgClass} from "@angular/common";
 
 @Component({
@@ -8,6 +8,7 @@ import {NgClass} from "@angular/common";
   ],
   templateUrl: './popup-modal.component.html',
   styleUrl: './popup-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: true
 })
 export class PopupModalComponent {

src/ClientApp/src/app/presentation/shared/toast/toast.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject} from '@angular/core';
+import {Component, inject, ChangeDetectionStrategy} from '@angular/core';
 import {ToastService} from "../../../infrastructure/services/toast.service";
 
 
@@ -7,6 +7,7 @@ import {ToastService} from "../../../infrastructure/services/toast.service";
   imports: [],
   templateUrl: './toast.component.html',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrls: ['./toast.component.scss']
 })
 export class ToastComponent {

src/ClientApp/tsconfig.app.json

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

src/ClientApp/tsconfig.spec.json

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