Update to Angular 15

.gitlab-ci.yml

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

README.md

@@ -7,10 +7,9 @@
 
 ## How to use json-server as mock backend with provided dummy data
 
-1.  Install json-server `npm install -g json-server`.
-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 `npm install`.
-5.  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 server 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`.
 
 ## How to use with other visualizations
 

angular.json

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

package.json

@@ -17,24 +17,25 @@
     "ci-update-version": "cd ./projects/kypo-trainings-visualization-overview-lib/ && npm version $TAG_VERSION",
     "ci-build-and-pack": "npm ci --cache .npm --prefer-offline && npm run build-library && npm run create-package",
     "ci-publish-package": "cd dist/kypo-trainings-visualization-overview-lib && npm publish",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "json-server": "json-server -w ./utils/json-server/db.js --routes ./utils/json-server/routes.json --middlewares ./utils/json-server/server.js"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.0.5",
-    "@angular/cdk": "^14.0.4",
-    "@angular/common": "^14.0.5",
-    "@angular/compiler": "^14.0.5",
-    "@angular/core": "^14.0.5",
-    "@angular/forms": "^14.0.5",
-    "@angular/material": "^14.0.4",
-    "@angular/platform-browser": "^14.0.5",
-    "@angular/platform-browser-dynamic": "^14.0.5",
-    "@angular/router": "^14.0.5",
-    "@muni-kypo-crp/d3-service": "^14.0.0",
-    "@sentinel/auth": "~14.0.0",
-    "angular-oauth2-oidc": "^13.0.1",
-    "angular-oauth2-oidc-jwks": "^13.0.1",
+    "@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",
+    "angular-oauth2-oidc": "^15.0.1",
+    "angular-oauth2-oidc-jwks": "^15.0.1",
     "core-js": "^3.23.3",
     "d3": "^7.6.1",
     "husky": "^8.0.1",
@@ -43,34 +44,35 @@
     "zone.js": "~0.11.6"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1400.5",
-    "@angular-devkit/build-angular": "^14.0.5",
-    "@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",
-    "@angular/cli": "^14.0.5",
-    "@angular/compiler-cli": "^14.0.5",
-    "@angular/language-service": "^14.0.5",
+    "@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.3",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
-    "eslint": "^8.19.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-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
-    "ng-packagr": "^14.0.3",
+    "ng-packagr": "^15.2.2",
     "prettier": "^2.7.1",
     "protractor": "~7.0.0",
     "ts-node": "~10.8.2",
-    "typescript": "~4.7.4"
+    "typescript": "~4.9.5"
   }
 }

projects/kypo-trainings-visualization-overview-lib/src/lib/kypo-trainings-visualization-overview-lib.module.ts

@@ -10,11 +10,11 @@ import { FormsModule } from '@angular/forms';
 import { FiltersComponent } from './components/agenda/filters/filters.component';
 import { VisualizationOverviewConfig } from './config/kypo-trainings-visualization-overview-lib';
 import { ConfigService } from './config/config.service';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
+import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { CdkColumnDef, CdkHeaderCellDef } from '@angular/cdk/table';
 import { D3Service } from '@muni-kypo-crp/d3-service';
 import { ClusteringService } from './components/agenda/clustering/shared/service/clustering.service';
@@ -23,7 +23,7 @@ import { TableDataService } from './components/agenda/table/service/table-data.s
 import { TableApiService } from './components/api/table/table-api.service';
 import { TimelineService } from './components/agenda/timeline/service/timeline.service';
 import { TimelineApiService } from './components/api/timeline/timeline-api.service';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
 
 @NgModule({
   imports: [

projects/kypo-trainings-visualization-overview-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-visualization-overview-lib/tsconfig.lib.json

@@ -3,7 +3,6 @@
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "declarationMap": true,
-    "target": "es2020",
     "moduleResolution": "node",
     "declaration": true,
     "sourceMap": true,

src/app/app-routing.module.ts

@@ -6,18 +6,18 @@ const routes: Routes = [
   {
     path: 'visualization',
     loadChildren: () => import('src/app/visualization/visualization.module').then(m => m.VisualizationModule),
-    // canActivate: [SentinelAuthGuardWithLogin],
+    canActivate: [SentinelAuthGuardWithLogin],
   },
   {
     path: '',
     redirectTo: 'visualization',
     pathMatch: 'full',
   },
-  // {
-  //   path: 'login',
-  //   component: SentinelAuthProviderListComponent,
-  //   canActivate: [SentinelNegativeAuthGuard]
-  // },
+   {
+     path: 'login',
+     component: SentinelAuthProviderListComponent,
+     canActivate: [SentinelNegativeAuthGuard]
+   },
   {
     path: '**',
     redirectTo: 'visualization'

src/test.ts

@@ -7,8 +7,6 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
@@ -16,7 +14,3 @@ getTestBed().initTestEnvironment(
     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

@@ -11,7 +11,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2020",
+    "target": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
@@ -26,6 +26,7 @@
       "kypo-trainings-visualization-overview-lib/*": [
         "dist/kypo-trainings-visualization-overview-lib/*"
       ]
-    }
+    },
+    "useDefineForClassFields": false
   }
 }