Upgrade to Angular 14

Issue-ID: PORTALNG-121
Change-Id: Ic0ee5450b1e234036dc567b14da15c8febb06e94
Signed-off-by: Fiete Ostkamp <Fiete.Ostkamp@telekom.de>

3 files changed, 56 insertions, 57 deletions

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index faeb566..854c8fc 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -65,39 +65,38 @@ export function changeConfig() {
 }
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HeaderComponent,
-    ModalContentComponent,
-    SidemenuComponent,
-    PageNotFoundComponent,
-    ConfirmationModalComponent,
-    StatusPageComponent,
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    HttpClientModule,
-    AuthConfigModule,
-    AlertModule,
-    AuthConfigModule,
-    ApiModule.forRoot(changeConfig),
-    OAuthModule.forRoot({ resourceServer: { sendAccessToken: false } }),
-    BrowserAnimationsModule,
-    UserAdministrationModule,
-    DashboardModule,
-    SharedModule,
-    AppStarterModule,
-   ],
-  // { provide: ErrorHandler, useClass: SentryErrorHandler },
-  providers: [
-    { provide: RequestCache, useClass: RequestCacheService },
-    httpInterceptorProviders,
-    { provide: OAuthStorage, useValue: localStorage },
-    LoadingIndicatorService,
-    { provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy },
-  ],
-  bootstrap: [AppComponent],
-  entryComponents: [ModalContentComponent, ConfirmationModalComponent],
+    declarations: [
+        AppComponent,
+        HeaderComponent,
+        ModalContentComponent,
+        SidemenuComponent,
+        PageNotFoundComponent,
+        ConfirmationModalComponent,
+        StatusPageComponent,
+    ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        HttpClientModule,
+        AuthConfigModule,
+        AlertModule,
+        AuthConfigModule,
+        ApiModule.forRoot(changeConfig),
+        OAuthModule.forRoot({ resourceServer: { sendAccessToken: false } }),
+        BrowserAnimationsModule,
+        UserAdministrationModule,
+        DashboardModule,
+        SharedModule,
+        AppStarterModule,
+    ],
+    // { provide: ErrorHandler, useClass: SentryErrorHandler },
+    providers: [
+        { provide: RequestCache, useClass: RequestCacheService },
+        httpInterceptorProviders,
+        { provide: OAuthStorage, useValue: localStorage },
+        LoadingIndicatorService,
+        { provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy },
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule {}
diff --git a/src/app/helpers/helpers.ts b/src/app/helpers/helpers.ts
index 7c03dbd..6b0c486 100644
--- a/src/app/helpers/helpers.ts
+++ b/src/app/helpers/helpers.ts
@@ -17,7 +17,7 @@
  */
 
 
-import { FormArray, FormGroup } from '@angular/forms';
+import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
 
 export function isNotUndefined<T>(val: T | undefined): val is T {
   return val !== undefined;
@@ -27,7 +27,7 @@ export function isNotNull<T>(val: T | null): val is T {
   return val !== null;
 }
 
-export function markAsDirtyAndValidate(formGroup: FormGroup): void {
+export function markAsDirtyAndValidate(formGroup: UntypedFormGroup): void {
   Object.values(formGroup.controls).forEach(control => {
     control.markAsDirty();
     control.updateValueAndValidity();
@@ -54,10 +54,10 @@ export function getRandomNumber(min: number, max: number) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-export function areFormControlsValid(form: FormGroup): boolean {
+export function areFormControlsValid(form: UntypedFormGroup): boolean {
   const formControls = Object.keys(form.controls)
     .map(key => form.controls[key])
-    .filter(control => !(control instanceof FormArray));
+    .filter(control => !(control instanceof UntypedFormArray));
   return formControls.find(control => control.invalid && (control.dirty || control.touched)) === undefined;
 }
 
@@ -68,9 +68,9 @@ export function isString(value: any): boolean {
 export function resetSelectDefaultValue(cssSelector: string): void {
   setTimeout(() => {
     const element = document.querySelector(cssSelector);
-    if (element) {
+    if (element && document.querySelector(cssSelector)) {
       //@ts-ignore
-      document.querySelector(cssSelector)?.selectedIndex = -1;
+      document.querySelector(cssSelector).selectedIndex = -1;
     }
   }, 0);
 }
diff --git a/src/app/modules/user-administration/user-administration-form/user-administration-form.component.ts b/src/app/modules/user-administration/user-administration-form/user-administration-form.component.ts
index 7df2700..2c93654 100644
--- a/src/app/modules/user-administration/user-administration-form/user-administration-form.component.ts
+++ b/src/app/modules/user-administration/user-administration-form/user-administration-form.component.ts
@@ -18,7 +18,7 @@
 
 
 import { Component, OnInit } from '@angular/core';
-import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
 import {
   CreateUserRequest,
   Role,
@@ -47,7 +47,7 @@ import { HistoryService } from '../../../services/history.service';
 })
 export class UserAdministrationFormComponent implements OnInit {
   public readonly userId: string | null;
-  public readonly keycloakUserForm: FormGroup;
+  public readonly keycloakUserForm: UntypedFormGroup;
   public user: UserResponse | undefined = undefined;
 
   public checkBoxes: {
@@ -70,17 +70,17 @@ export class UserAdministrationFormComponent implements OnInit {
   ) {
     this.userId = this.route.snapshot.paramMap.get('userId');
 
-    this.keycloakUserForm = new FormGroup({
-      id: new FormControl({ value: null, disabled: true }),
-      username: new FormControl({ value: null, disabled: this.userId !== null }, [
+    this.keycloakUserForm = new UntypedFormGroup({
+      id: new UntypedFormControl({ value: null, disabled: true }),
+      username: new UntypedFormControl({ value: null, disabled: this.userId !== null }, [
         Validators.required,
         Validators.maxLength(50),
         Validators.pattern(VALIDATION_PATTERN),
         Validators.pattern(NON_WHITE_SPACE_PATTERN),
       ]),
-      email: new FormControl(null, [Validators.email, Validators.required, Validators.pattern(VALIDATION_PATTERN)]),
-      firstName: new FormControl(null, [Validators.pattern(VALIDATION_PATTERN)]),
-      lastName: new FormControl(null, [Validators.pattern(VALIDATION_PATTERN)]),
+      email: new UntypedFormControl(null, [Validators.email, Validators.required, Validators.pattern(VALIDATION_PATTERN)]),
+      firstName: new UntypedFormControl(null, [Validators.pattern(VALIDATION_PATTERN)]),
+      lastName: new UntypedFormControl(null, [Validators.pattern(VALIDATION_PATTERN)]),
     });
   }
 
@@ -121,20 +121,20 @@ export class UserAdministrationFormComponent implements OnInit {
     }
   }
 
-  get userName(): FormControl {
-    return this.keycloakUserForm.get('username') as FormControl;
+  get userName(): UntypedFormControl {
+    return this.keycloakUserForm.get('username') as UntypedFormControl;
   }
 
-  get email(): FormControl {
-    return this.keycloakUserForm.get('email') as FormControl;
+  get email(): UntypedFormControl {
+    return this.keycloakUserForm.get('email') as UntypedFormControl;
   }
 
-  get firstName(): FormControl {
-    return this.keycloakUserForm.get('firstName') as FormControl;
+  get firstName(): UntypedFormControl {
+    return this.keycloakUserForm.get('firstName') as UntypedFormControl;
   }
 
-  get lastName(): FormControl {
-    return this.keycloakUserForm.get('lastName') as FormControl;
+  get lastName(): UntypedFormControl {
+    return this.keycloakUserForm.get('lastName') as UntypedFormControl;
   }
 
   public onSubmit(): void {
@@ -212,7 +212,7 @@ export class UserAdministrationFormComponent implements OnInit {
   private updateUserData(userResponse: Observable<UserResponse>, roleResponse: Observable<RoleListResponse>): void {
     forkJoin([userResponse, roleResponse])
       .pipe(
-        switchMap(([,]) =>
+        switchMap(() =>
           this.historyService.createUserHistoryAction({
             type: ActionType.EDIT,
             entity: EntityType.USERADMINISTRATION,