Updated to Angular 16 and Yarn 4

ids-webconsole/src/main/angular/.dockerignore

@@ -1,3 +1,6 @@
 build
 dist
 node_modules
+
+.yarn/cache
+.yarn/install-state.gz

ids-webconsole/src/main/angular/.gitignore

@@ -4,4 +4,13 @@ node_modules
 typings
 npm-debug.log
 build
-.vscode
+.vscode
+
+# Yarn 3 files
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

ids-webconsole/src/main/angular/.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

ids-webconsole/src/main/angular/package.json

@@ -8,14 +8,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^15.1.5",
-    "@angular/common": "^15.1.5",
-    "@angular/core": "^15.1.5",
-    "@angular/forms": "^15.1.5",
-    "@angular/platform-browser": "^15.1.5",
-    "@angular/platform-browser-dynamic": "^15.1.5",
-    "@angular/platform-server": "^15.1.5",
-    "@angular/router": "^15.1.5",
+    "@angular/animations": "^16.2.12",
+    "@angular/common": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/platform-server": "^16.2.12",
+    "@angular/router": "^16.2.12",
     "bootstrap": "^4.2.1",
     "core-js": "^3.28.0",
     "deep-equal": "^2.0.1",
@@ -28,18 +28,18 @@
     "topojson": "^3.0.2",
     "tslib": "^2.0.0",
     "viz.js": "^2.1.1",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.1.6",
+    "@angular-devkit/build-angular": "^16.2.12",
     "@angular-eslint/builder": "^15.2.1",
     "@angular-eslint/eslint-plugin": "^15.2.1",
     "@angular-eslint/eslint-plugin-template": "^15.2.1",
-    "@angular-eslint/schematics": "^15.2.1",
+    "@angular-eslint/schematics": "16",
     "@angular-eslint/template-parser": "^15.2.1",
-    "@angular/cli": "^15.1.6",
-    "@angular/compiler": "^15.1.5",
-    "@angular/compiler-cli": "^15.1.5",
+    "@angular/cli": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/compiler-cli": "^16.2.12",
     "@types/express": "^4.17.17",
     "@types/node": "^18.14.0",
     "@types/vis": "^4.21.9",
@@ -53,8 +53,5 @@
     "typescript": "4.9.5",
     "vis": "^4.20.0"
   },
-  "resolutions": {
-    "**/vis/moment": "^2.29.4",
-    "**/http-cache-semantics": "^4.1.1"
-  }
+  "packageManager": "[email protected]"
 }

ids-webconsole/src/main/angular/src/app/_guards/auth.guard.ts

@@ -1,17 +1,18 @@
 import { Injectable } from '@angular/core';
-import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 
 /**
  * Ensures that only logged-in users will be navigated to pages.
  * The actual access control has to take place on the backend side, obviously.
  * See app.routing.ts for usage of this guard.
  */
 @Injectable()
-export class AuthGuard implements CanActivate {
+export class AuthGuard  {
 
     constructor(private router: Router) {
     }
 
+    // noinspection JSUnusedGlobalSymbols
     public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
         if (sessionStorage.getItem('currentUser')) {
             // logged in so return true

ids-webconsole/src/main/angular/src/app/app.routing.ts

@@ -1,4 +1,4 @@
-import { RouterModule, Routes } from '@angular/router';
+import { mapToCanActivate, RouterModule, Routes } from '@angular/router';
 
 import { AuthGuard } from './_guards/auth.guard';
 import { AppsComponent } from './apps/apps.component';
@@ -21,28 +21,29 @@ import { DetailUserComponent } from './users/userdetail.component';
 import { RoutesComponent } from './routes/routes.component';
 import { NewIdentityESTComponent } from './keycerts/identitynewest.component';
 
+const guards = mapToCanActivate([AuthGuard]);
 const appRoutes: Routes = [
   // Pages using the "home" layout (with sidebar and topnav)
-  { path: '', component: HomeLayoutComponent, canActivate: [AuthGuard],
+  { path: '', component: HomeLayoutComponent, canActivate: guards,
     children: [
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
-      { path: 'dashboard',  component: DashboardComponent,  data: { title: 'Dashboard' }, canActivate: [AuthGuard] },
-      { path: 'apps', component: AppsComponent, canActivate: [AuthGuard] },
-      { path: 'appsearch', component: AppsSearchComponent, canActivate: [AuthGuard] },
-      { path: 'dataflowpolicies', component: DataflowPoliciesComponent, canActivate: [AuthGuard] },
-      { path: 'dataflowpolicyynew', component: NewDataflowPolicyComponent, canActivate: [AuthGuard] },
-      { path: 'identitynew', component: NewIdentityComponent, canActivate: [AuthGuard] },
-      { path: 'connections', component: ConnectionReportComponent, canActivate: [AuthGuard] },
-      { path: 'connectionconfiguration', component: ConnectionConfigurationComponent, canActivate: [AuthGuard] },
-      { path: 'routes', component: RoutesComponent, canActivate: [AuthGuard] },
-      { path: 'routeeditor/:id', component: RouteeditorComponent, canActivate: [AuthGuard] },
-      { path: 'routeeditor', component: RouteeditorComponent, canActivate: [AuthGuard] },
-      { path: 'ids', component: IdsComponent, canDeactivate: [IdsComponent], canActivate: [AuthGuard] },
-      { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },
-      { path: 'usernew', component: NewUserComponent, canActivate: [AuthGuard] },
-      { path: 'userdetail', component: DetailUserComponent, canActivate: [AuthGuard] },
-      { path: 'certificates', component: KeycertsComponent, canActivate: [AuthGuard]  },
-      { path: 'identitynewest', component: NewIdentityESTComponent, canActivate: [AuthGuard] }
+      { path: 'dashboard',  component: DashboardComponent,  data: { title: 'Dashboard' }, canActivate: guards },
+      { path: 'apps', component: AppsComponent, canActivate: guards },
+      { path: 'appsearch', component: AppsSearchComponent, canActivate: guards },
+      { path: 'dataflowpolicies', component: DataflowPoliciesComponent, canActivate: guards },
+      { path: 'dataflowpolicyynew', component: NewDataflowPolicyComponent, canActivate: guards },
+      { path: 'identitynew', component: NewIdentityComponent, canActivate: guards },
+      { path: 'connections', component: ConnectionReportComponent, canActivate: guards },
+      { path: 'connectionconfiguration', component: ConnectionConfigurationComponent, canActivate: guards },
+      { path: 'routes', component: RoutesComponent, canActivate: guards },
+      { path: 'routeeditor/:id', component: RouteeditorComponent, canActivate: guards },
+      { path: 'routeeditor', component: RouteeditorComponent, canActivate: guards },
+      { path: 'ids', component: IdsComponent, canDeactivate: [IdsComponent], canActivate: guards },
+      { path: 'users', component: UsersComponent, canActivate: guards },
+      { path: 'usernew', component: NewUserComponent, canActivate: guards },
+      { path: 'userdetail', component: DetailUserComponent, canActivate: guards },
+      { path: 'certificates', component: KeycertsComponent, canActivate: guards  },
+      { path: 'identitynewest', component: NewIdentityESTComponent, canActivate: guards }
     ]
   },
   // Pages using the "login" layout (centered full page without sidebar)