Update to Angular 15

.gitlab-ci.yml

-image: cypress/browsers:node14.17.0-chrome88-ff89
+image: cypress/browsers:node16.13.0-chrome95-ff94
 
 stages:
   - codeStyle

README.md

@@ -4,7 +4,6 @@ The visualization provides three views with distinct processing of collected dat
 
 ## How to use json-server as mock backend with provided dummy data
 
-1.  Install json-server `npm install -g json-server`.
-2.  Run `npm install`.
-3.  Run the server with provided parameters `json-server -w ./utils/json-server/db.js --routes ./utils/json-server/routes.json --middlewares ./utils/json-server/server.js`.
-4.  Run the app in local environment and ssl `ng serve --configuration local --ssl` and access it on `https://localhost:4200`.
+1.  Run `npm install`.
+2.  Run the json server with `npm run json-server` or with provided parameters `json-server -w ./utils/json-server/db.js --routes ./utils/json-server/routes.json --middlewares ./utils/json-server/server.js`.
+3.  Run the app in local environment and ssl `ng serve --configuration local --ssl` and access it on `https://localhost:4200`.

VERSION.txt

+15.0.0 Update to Angular 15
 14.0.2 Propagate insufficient data info for dashboard processing
 14.0.1 Update API routes
 14.0.0 Initial clustering library version

angular.json

@@ -178,5 +178,13 @@
   },
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

package.json

@@ -16,7 +16,8 @@
     "build-and-pack": "npm install && npm run build-library && npm run create-package",
     "ci-update-version": "cd ./projects/kypo-trainings-clustering-viz-lib/ && npm version $TAG_VERSION",
     "ci-build-and-pack": "npm ci --cache .nnpm ERR! Cannot read property '@angular/animations' of undefinedpm --prefer-offline && npm run build-library && npm run create-package",
-    "ci-publish-package": "cd dist/kypo-trainings-clustering-viz-lib && npm publish"
+    "ci-publish-package": "cd dist/kypo-trainings-clustering-viz-lib && npm publish",
+    "json-server": "json-server -w ./utils/json-server/db.js --routes ./utils/json-server/routes.json --middlewares ./utils/json-server/server.js"
   },
   "husky": {
     "hooks": {
@@ -25,61 +26,62 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.0.3",
-    "@angular/cdk": "^14.0.3",
-    "@angular/common": "^14.0.3",
-    "@angular/compiler": "^14.0.3",
-    "@angular/core": "^14.0.3",
-    "@angular/forms": "^14.0.3",
-    "@angular/material": "^14.0.3",
-    "@angular/platform-browser": "^14.0.3",
-    "@angular/platform-browser-dynamic": "^14.0.3",
-    "@angular/router": "^14.0.3",
-    "@muni-kypo-crp/d3-service": "~14.0.0",
-    "@sentinel/auth": "~14.0.0",
-    "@sentinel/common": "~14.0.0",
-    "@sentinel/layout": "~14.0.0",
+    "@angular/animations": "^15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/forms": "^15.2.10",
+    "@angular/material": "^15.2.9",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/router": "^15.2.10",
+    "@muni-kypo-crp/d3-service": "~15.0.1",
+    "@sentinel/auth": "~15.3.0",
+    "@sentinel/common": "~15.3.0",
+    "@sentinel/layout": "~15.2.0",
     "@types/d3": "^7.4.0",
-    "angular-oauth2-oidc": "^13.0.1",
-    "angular-oauth2-oidc-jwks": "^13.0.1",
+    "angular-oauth2-oidc": "^15.0.1",
+    "angular-oauth2-oidc-jwks": "^15.0.1",
     "core-js": "^3.23.2",
-    "ngx-indexed-db": "^11.0.2",
     "d3": "^7.4.4",
+    "ngx-indexed-db": "^11.0.2",
     "rxjs": "~7.5.5",
     "tslib": "^2.4.0",
     "uuid": "^8.3.2",
     "zone.js": "~0.11.6"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1400.3",
-    "@angular-devkit/build-angular": "^14.0.3",
-    "@angular/cli": "^14.0.3",
-    "@angular/compiler-cli": "^14.0.3",
-    "@angular/language-service": "^14.0.3",
-    "@angular-eslint/builder": "~14.0.0",
-    "@angular-eslint/eslint-plugin": "^14.0.0",
-    "@angular-eslint/eslint-plugin-template": "^14.0.0",
-    "@angular-eslint/schematics": "^14.0.0",
-    "@angular-eslint/template-parser": "^14.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
-    "eslint": "^8.18.0",
+    "@angular-devkit/architect": "^0.1502.10",
+    "@angular-devkit/build-angular": "^15.2.10",
+    "@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/template-parser": "^15.2.1",
+    "@angular/cli": "^15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
+    "@angular/language-service": "^15.2.10",
+    "@types/d3": "^7.4.0",
     "@types/jasmine": "~4.0.3",
     "@types/jasminewd2": "^2.0.10",
     "@types/node": "^18.0.0",
-    "@types/d3": "^7.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "eslint": "^8.28.0",
     "jasmine-core": "~4.2.0",
     "jasmine-spec-reporter": "~7.0.0",
+    "json-server": "^0.17.4",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.1",
     "karma-cli": "~2.0.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^14.0.2",
+    "ng-packagr": "^15.2.2",
+    "prettier": "^2.7.1",
     "protractor": "~7.0.0",
     "ts-node": "~10.8.1",
-    "prettier": "^2.7.1",
-    "typescript": "~4.7.4"
+    "typescript": "~4.9.5"
   }
 }

projects/kypo-trainings-clustering-viz-lib/src/test.ts

@@ -6,13 +6,7 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
   teardown: { destroyAfterEach: false },
 });
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

projects/kypo-trainings-clustering-viz-lib/tsconfig.lib.json

@@ -2,7 +2,6 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2020",
     "declarationMap": true,
     "moduleResolution": "node",
     "declaration": true,

src/app/app-routing.module.ts

@@ -7,7 +7,7 @@ const routes: Routes = [
   {
     path: '',
     loadChildren: () => import('./clustering/clustering.module').then(m => m.ClusteringModule),
-    //canActivate: [SentinelAuthGuardWithLogin],
+    canActivate: [SentinelAuthGuardWithLogin],
   },
   {
     path: '',

src/test.ts

@@ -6,13 +6,7 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
     teardown: { destroyAfterEach: false },
 });
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

tsconfig.json

@@ -12,7 +12,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2020",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
@@ -27,6 +27,7 @@
       "kypo2-trainings-clustering-viz-lib/*": [
         "dist/kypo2-trainings-clustering-viz-lib/*"
       ]
-    }
+    },
+    "useDefineForClassFields": false
   }
 }