Upgrade to Angular 14

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

6 files changed, 108 insertions, 93 deletions

diff --git a/angular.json b/angular.json
index f749b51..2e5b6ae 100644
--- a/angular.json
+++ b/angular.json
@@ -13,19 +13,25 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "allowedCommonJsDependencies": [ "clone-deep"],
+            "allowedCommonJsDependencies": [
+              "clone-deep"
+            ],
             "aot": true,
             "outputPath": "dist/frontend",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets", "src/keycloak-error.html"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/keycloak-error.html"
+            ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "src/assets/css/bootstrap-icons.css",
               "src/styles.css",
-               "./node_modules/@angular/cdk/overlay-prebuilt.css",
+              "./node_modules/@angular/cdk/overlay-prebuilt.css",
               {
                 "input": "src/assets/css/onap-styles.css",
                 "bundleName": "onap-styles",
@@ -96,15 +102,24 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": ["src/favicon.ico", "src/assets", "src/keycloak-error.html"],
-            "styles": ["src/styles.css"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets",
+              "src/keycloak-error.html"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
             "scripts": []
           }
         },
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         },
         "e2e": {
@@ -122,7 +137,6 @@
       }
     }
   },
-  "defaultProject": "frontend",
   "cli": {
     "cache": {
       "enabled": true,
@@ -130,6 +144,8 @@
       "environment": "all"
     },
     "analytics": "8f37c777-0688-43ed-a5a5-b315e820eff9",
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }
diff --git a/package.json b/package.json
index 08edc45..8222ab4 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "openapi": "npx openapi-generator-cli generate --generator-key v3.0",
     "ng": "./node-modules/.bin/ng",
     "prestart": "npm run openapi",
-    "start": "ng serve -- --proxy-config staging.proxy.config.json --host 0.0.0.0 --port 80 --disable-host-check",
+    "start": "ng serve --proxy-config staging.proxy.config.json --host 0.0.0.0 --port 80 --disable-host-check",
     "prebuild": "npm run openapi",
     "build": "ng build",
     "pretest": "npm run openapi",
@@ -21,22 +21,22 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "13.3.10",
+    "@angular/animations": "14.3.0",
     "@angular/cdk": "13.3.9",
-    "@angular/common": "13.3.10",
-    "@angular/compiler": "13.3.10",
-    "@angular/core": "13.3.10",
-    "@angular/forms": "13.3.10",
-    "@angular/localize": "13.3.10",
-    "@angular/platform-browser": "13.3.10",
-    "@angular/platform-browser-dynamic": "13.3.10",
-    "@angular/router": "13.3.10",
-    "@ng-bootstrap/ng-bootstrap": "12.1.2",
+    "@angular/common": "14.3.0",
+    "@angular/compiler": "14.3.0",
+    "@angular/core": "14.3.0",
+    "@angular/forms": "14.3.0",
+    "@angular/localize": "14.3.0",
+    "@angular/platform-browser": "14.3.0",
+    "@angular/platform-browser-dynamic": "14.3.0",
+    "@angular/router": "14.3.0",
+    "@ng-bootstrap/ng-bootstrap": "13.1.1",
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "7.0.0",
     "@popperjs/core": "2.11.5",
-    "angular-oauth2-oidc": "13.0.1",
-    "bootstrap": "5.1.3",
+    "angular-oauth2-oidc": "14.0.1",
+    "bootstrap": "5.2.0",
     "license-report": "5.0.2",
     "lodash": "4.17.21",
     "rxjs": "~7.4.0",
@@ -44,23 +44,23 @@
     "zone.js": "0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "13.3.10",
-    "@angular-eslint/builder": "13.5.0",
-    "@angular-eslint/eslint-plugin": "13.5.0",
-    "@angular-eslint/eslint-plugin-template": "13.5.0",
-    "@angular-eslint/schematics": "13.5.0",
-    "@angular-eslint/template-parser": "13.5.0",
-    "@angular/cli": "13.3.10",
-    "@angular/compiler-cli": "13.3.10",
+    "@angular-devkit/build-angular": "14.2.13",
+    "@angular-eslint/builder": "14.4.0",
+    "@angular-eslint/eslint-plugin": "14.4.0",
+    "@angular-eslint/eslint-plugin-template": "14.4.0",
+    "@angular-eslint/schematics": "14.4.0",
+    "@angular-eslint/template-parser": "14.4.0",
+    "@angular/cli": "14.2.13",
+    "@angular/compiler-cli": "14.3.0",
     "@openapitools/openapi-generator-cli": "^2.6.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "2.0.3",
     "@types/lodash": "4.14.188",
-    "@types/node": "16.0.0",
+    "@types/node": "18.0.0",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "5.17.0",
-    "@typescript-eslint/parser": "5.17.0",
-    "eslint": "7.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
+    "eslint": "^8.23.0",
     "git-format-staged": "3.0.0",
     "husky": "8.0.1",
     "jasmine-core": "~4.0.0",
@@ -80,8 +80,8 @@
     "prettier": "2.6.2",
     "protractor": "7.0.0",
     "sonar-scanner": "3.1.0",
-    "ts-node": "10.0.0",
-    "typescript": "4.6.4"
+    "ts-node": "10.9.0",
+    "typescript": "~4.8.0"
   },
   "husky": {
     "hooks": {
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,
diff --git a/tsconfig.json b/tsconfig.json
index b38eb86..c155a6b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,7 @@
     "module": "es2020",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "es2020",
     "lib": ["es2020", "dom"],
     "resolveJsonModule": true,
     "esModuleInterop": true