Update from Angular 5 to 7 (#190)

* fix(my-avater-edit): translation of placeholders - edit user details are now translated - #175 * feat: disable new adventure button depending on state - If no free quests are available the new adventure button is disabled - solves(Issue #188) * fix(gamemaster-quest.component): replaced var with let * Update from Angular 5 to Angular 7 - In an adventure it is always better to stay on the bleeding edge - Some parts are auto migrated, however everythings seems to work fine
viadee · Mar 1, 2019 · 928668c · 928668c
1 parent 2e45232
commit 928668c
Show file tree

Hide file tree

Showing 41 changed files with 356 additions and 281 deletions.
diff --git a/sonarQuest-frontend/.angular-cli.json b/sonarQuest-frontend/.angular-cli.json
diff --git a/sonarQuest-frontend/angular.json b/sonarQuest-frontend/angular.json
@@ -0,0 +1,136 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "sonarquest-frontend": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "./dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.scss",
+              "src/styles.css",
+              "src/theme.scss",
+              "node_modules/rpg-awesome/css/rpg-awesome.css",
+              "node_modules/@covalent/core/common/platform.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "sonarquest-frontend:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "sonarquest-frontend:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "sonarquest-frontend:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.scss",
+              "src/styles.css",
+              "src/theme.scss",
+              "node_modules/rpg-awesome/css/rpg-awesome.css",
+              "node_modules/@covalent/core/common/platform.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "sonarquest-frontend-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "sonarquest-frontend:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "sonarquest-frontend",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
diff --git a/sonarQuest-frontend/karma.conf.js b/sonarQuest-frontend/karma.conf.js
@@ -4,24 +4,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
+
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

diff --git a/sonarQuest-frontend/package.json b/sonarQuest-frontend/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve -H 0.0.0.0",
+    "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
@@ -13,33 +13,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.0.0",
-    "@angular/cdk": "^5.0.0",
-    "@angular/common": "^5.0.0",
-    "@angular/compiler": "^5.0.0",
-    "@angular/core": "^5.0.0",
-    "@angular/forms": "^5.0.0",
-    "@angular/http": "^5.0.0",
-    "@angular/material": "^5.0.0",
-    "@angular/material-moment-adapter": "^5.0.0",
-    "@angular/platform-browser": "^5.0.0",
-    "@angular/platform-browser-dynamic": "^5.0.0",
-    "@angular/router": "^5.0.0",
-    "@covalent/core": "^1.0.0",
-    "@ngx-translate/core": "^9.1.1",
-    "@ngx-translate/http-loader": "^2.0.1",
+    "@angular/animations": "7.2.7",
+    "@angular/cdk": "^7.3.3",
+    "@angular/common": "7.2.7",
+    "@angular/compiler": "7.2.7",
+    "@angular/core": "7.2.7",
+    "@angular/forms": "7.2.7",
+    "@angular/http": "7.2.7",
+    "@angular/material": "^7.3.3",
+    "@angular/material-moment-adapter": "^7.3.3",
+    "@angular/platform-browser": "7.2.7",
+    "@angular/platform-browser-dynamic": "7.2.7",
+    "@angular/platform-server": "7.2.7",
+    "@angular/router": "7.2.7",
+    "@covalent/core": "^2.0.1",
+    "@ngx-translate/core": "^11.0.1",
+    "@ngx-translate/http-loader": "^4.0.0",
     "ajv": "^6.2.0",
-    "moment": "2.20.1",
     "core-js": "^2.4.1",
+    "moment": "2.24.0",
     "rpg-awesome": "^0.1.1",
-    "rxjs": "^5.1.0",
-    "webpack": "^3.11.0",
-    "zone.js": "^0.8.4"
+    "rxjs": "^6.4.0",
+    "tslib": "^1.9.0",
+    "webpack": "^4.6.0",
+    "zone.js": "^0.8.29"
   },
   "devDependencies": {
-    "@angular/cli": "^1.7.0",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/language-service": "^5.0.0",
+    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular/cli": "7.3.3",
+    "@angular/compiler-cli": "7.2.7",
+    "@angular/language-service": "7.2.7",
     "@types/jasmine": "2.5.45",
     "@types/node": "~6.0.60",
     "codelyzer": "^4.0.0",
@@ -51,9 +54,10 @@
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "mini-css-extract-plugin": "^0.5.0",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",
-    "typescript": "2.4.2"
+    "typescript": "3.2.4"
   }
 }
diff --git a/sonarQuest-frontend/src/app/login/authentication.interceptor.ts b/sonarQuest-frontend/src/app/login/authentication.interceptor.ts
@@ -1,12 +1,14 @@
-import {HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
-import {Observable} from 'rxjs/Observable';
-import {Injectable} from '@angular/core';
-import {LocalStorageService} from './local-storage.service';
-import {Token} from './Token';
-import {Router} from '@angular/router';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/observable/throw';
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { of } from 'rxjs';
+import { tap, catchError } from 'rxjs/operators';
+import { Injectable } from '@angular/core';
+import { LocalStorageService } from './local-storage.service';
+import { Token } from './Token';
+import { Router } from '@angular/router';
+
+
+
 
 @Injectable()
 export class AuthenticationInterceptor implements HttpInterceptor {
@@ -23,19 +25,28 @@ export class AuthenticationInterceptor implements HttpInterceptor {
       });
     }
 
-    return next.handle(request).do((event: HttpEvent<any>) => {
-        if (event instanceof HttpResponse) {
-          // do stuff with response if you want
-        }
-      }, (err: any) => {
-        if (err instanceof HttpErrorResponse) {
-          if (err.status === 401) {
-            console.log('Session timeout');
-            this.router.navigate(['/'], {skipLocationChange: true});
-          }
-        }
-      }
+    return next.handle(request).pipe(tap(
+      event => this.handleResponse(request, event),
+      error => this.handleError(request, error)
+      )
     );
+  }
+
+  handleResponse(req: HttpRequest<any>, event) {
+    console.log('Handling response for ', req.url, event);
+    if (event instanceof HttpResponse) {
+      console.log('Request for ', req.url,
+        ' Response Status ', event.status,
+        ' With body ', event.body);
+    }
+  }
 
+  handleError(req: HttpRequest<any>, event) {
+    if (event.status === 401) {
+      console.log('Session timeout');
+      this.router.navigate(['/'], {skipLocationChange: true});
+    }
   }
 }
+
+
diff --git a/sonarQuest-frontend/src/app/login/authentication.service.ts b/sonarQuest-frontend/src/app/login/authentication.service.ts
@@ -1,13 +1,12 @@
 import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 
-import {Observable} from 'rxjs/Observable';
-
+import {Observable, Subscriber} from 'rxjs';
+import {shareReplay} from 'rxjs/operators';
 import {environment} from './../../environments/environment';
 import {LocalStorageService} from './local-storage.service';
-import {Subscriber} from 'rxjs/Subscriber';
 import {Token} from './Token';
-import 'rxjs/add/operator/shareReplay';
+
 import { Router } from '@angular/router';
 
 @Injectable()
@@ -29,7 +28,7 @@ export class AuthenticationService {
         headers: new HttpHeaders().set('Content-Type', 'application/json'),
         responseType: 'json',
         observe: 'response'
-      }).shareReplay().subscribe((response) => {
+      }).pipe(shareReplay()).subscribe((response) => {
         if (response.body && response.status === 200) {
           const token = response.body as Token;
           this.storageService.saveJWTToken(token);