fix(deps): update to angular 8 (T-Systems-MMS#32)

* chore(deps): update angular paclages to angular 8

* chore(deps): update angular material to angular 8

* chore(deps): update other dependencies

* chore(deps): fix build errors

* chore(deps): remove unecessary dependencies

Resolves: T-Systems-MMS#30

* Update add-filter.component.spec.ts

Author: DanielHabenicht

Phonebook.Frontend/browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

Phonebook.Frontend/package-lock.json

@@ -38,75 +38,72 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "7.1.4",
-    "@angular/cdk": "7.2.0",
-    "@angular/common": "7.1.4",
-    "@angular/compiler": "7.1.4",
-    "@angular/core": "7.1.4",
-    "@angular/forms": "7.1.4",
-    "@angular/http": "7.1.4",
-    "@angular/material": "7.2.0",
-    "@angular/platform-browser": "7.1.4",
-    "@angular/platform-browser-dynamic": "7.1.4",
-    "@angular/pwa": "0.11.4",
-    "@angular/router": "7.1.4",
-    "@angular/service-worker": "7.1.4",
+    "@angular/animations": "8.0.2",
+    "@angular/cdk": "8.0.1",
+    "@angular/common": "8.0.2",
+    "@angular/compiler": "8.0.2",
+    "@angular/core": "8.0.2",
+    "@angular/forms": "8.0.2",
+    "@angular/material": "8.0.1",
+    "@angular/platform-browser": "8.0.2",
+    "@angular/platform-browser-dynamic": "8.0.2",
+    "@angular/pwa": "0.800.3",
+    "@angular/router": "8.0.2",
+    "@angular/service-worker": "8.0.2",
     "@ngx-translate/i18n-polyfill": "^1.0.0",
-    "@ngxs/devtools-plugin": "^3.3.1",
-    "@ngxs/logger-plugin": "^3.3.1",
-    "@ngxs/router-plugin": "^3.3.1",
-    "@ngxs/storage-plugin": "^3.3.1",
-    "@ngxs/store": "^3.3.1",
+    "@ngxs/devtools-plugin": "^3.4.3",
+    "@ngxs/logger-plugin": "^3.4.3",
+    "@ngxs/router-plugin": "^3.4.3",
+    "@ngxs/storage-plugin": "^3.4.3",
+    "@ngxs/store": "^3.4.3",
     "classlist.js": "^1.1.20150312",
-    "core-js": "^2.5.7",
     "ng2-rx-componentdestroyed": "^3.0.1",
-    "ngx-clipboard": "^11.1.9",
-    "ngx-infinite-scroll": "^7.0.0",
-    "ngx-propagation-stop": "^1.0.6",
-    "ngx-vcard": "^1.1.6",
-    "raven-js": "^3.27.0",
-    "rxjs": "^6.3.3",
+    "ngx-clipboard": "^12.1.2",
+    "ngx-infinite-scroll": "^7.2.0",
+    "ngx-propagation-stop": "^1.0.7",
+    "ngx-vcard": "^1.2.3",
+    "raven-js": "^3.27.2",
+    "rxjs": "^6.5.2",
     "uglify-es": "3.3.9",
-    "uglifyjs-webpack-plugin": "2.1.1",
-    "web-animations-js": "^2.3.1",
-    "zone.js": "~0.8.26"
+    "uglifyjs-webpack-plugin": "2.1.3",
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.11.0",
-    "@angular/cli": "7.1.4",
-    "@angular/compiler-cli": "7.1.4",
-    "@angular/language-service": "7.1.4",
-    "@compodoc/compodoc": "^1.1.7",
-    "@semantic-release/changelog": "^3.0.1",
-    "@semantic-release/exec": "^3.3.0",
-    "@types/jasmine": "^3.3.0",
+    "@angular-devkit/build-angular": "~0.800.3",
+    "@angular/cli": "^8.0.3",
+    "@angular/compiler-cli": "8.0.2",
+    "@angular/language-service": "8.0.2",
+    "@compodoc/compodoc": "^1.1.9",
+    "@semantic-release/changelog": "^3.0.4",
+    "@semantic-release/exec": "^3.3.3",
+    "@types/jasmine": "^3.3.13",
     "@types/jasminewd2": "^2.0.6",
-    "@types/node": "^10.12.10",
-    "codelyzer": "^4.5.0",
-    "commitizen": "^3.0.5",
+    "@types/node": "^12.0.10",
+    "codelyzer": "^5.1.0",
+    "commitizen": "^3.1.1",
     "cz-customizable": "^5.3.0",
-    "jasmine-core": "^3.3.0",
+    "jasmine-core": "^3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~3.1.1",
+    "karma": "~4.1.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~2.0.0",
-    "karma-coverage-istanbul-reporter": "^2.0.4",
+    "karma-coverage-istanbul-reporter": "^2.0.5",
     "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "license-checker": "^24.0.1",
-    "ng-mocks": "^7.1.2",
+    "karma-jasmine-html-reporter": "^1.4.2",
+    "license-checker": "^25.0.1",
+    "ng-mocks": "^8.0.0",
     "ng2-mock-component": "^0.1.1",
     "ngx-i18nsupport": "^0.17.1",
-    "protractor": "^5.4.1",
+    "protractor": "^5.4.2",
     "protractor-console-plugin": "^0.1.1",
-    "semantic-release": "^15.12.2",
+    "semantic-release": "^15.13.16",
     "semantic-release-docker-test": "^1.0.2",
     "simple-commit-message": "^4.0.3",
     "ts-node": "~7.0.1",
-    "tslint": "~5.12.0",
-    "typescript": "3.1.6",
-    "webdriver-manager": "^12.1.0",
-    "webpack-bundle-analyzer": "^3.0.3"
+    "tslint": "~5.18.0",
+    "typescript": "3.4.5",
+    "webdriver-manager": "^12.1.5",
+    "webpack-bundle-analyzer": "^3.3.2"
   },
   "config": {
     "pre-git": {
@@ -117,4 +114,4 @@
       "path": "Phonebook.Frontend/node_modules/cz-customizable"
     }
   }
-}
+}

Phonebook.Frontend/package.json

@@ -7,13 +7,13 @@ import { UserDetailPageComponent } from 'src/app/pages/user-detail-page/user-det
 
 const routes: Routes = [
   { path: '', component: DashboardComponent, pathMatch: 'full' },
-  { path: 'search', loadChildren: 'src/app/modules/table/table.module#TableModule' },
+  { path: 'search', loadChildren: () => import('src/app/modules/table/table.module').then(m => m.TableModule) },
   { path: 'user/:id', component: UserDetailPageComponent },
-  { path: 'rooms', loadChildren: 'src/app/modules/rooms/rooms.module#RoomsModule' },
-  { path: 'organigram', loadChildren: 'src/app/modules/organigram/organigram.module#OrganigramModule' },
+  { path: 'rooms', loadChildren: () => import('src/app/modules/rooms/rooms.module').then(m => m.RoomsModule) },
+  { path: 'organigram', loadChildren: () => import('src/app/modules/organigram/organigram.module').then(m => m.OrganigramModule) },
   {
     path: 'further-information',
-    loadChildren: 'src/app/pages/page-information/page-information.module#PageInformationModule'
+    loadChildren: () => import('src/app/pages/page-information/page-information.module').then(m => m.PageInformationModule)
   },
   { path: 'settings', component: SettingsComponent }
 ];

Phonebook.Frontend/src/app/app-routing.module.ts

@@ -7,7 +7,8 @@ import { SwUpdate } from '@angular/service-worker';
 import { MailService } from 'src/app/services/mail.service';
 import { NgxsModule } from '@ngxs/store';
 import { AppState } from 'src/app/shared/states';
-import { MatSnackBar, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { FeatureFlagService } from './modules/feature-flag/feature-flag.service';
 import { AppComponent } from './app.component';
 import { MockDirective } from 'ng-mocks';

Phonebook.Frontend/src/app/app.component.spec.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MatSnackBar, MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ReleaseInfoService } from './services/release-info.service';
 import { Store } from '@ngxs/store';
 import { ServiceWorkerNotificationDisplayed, AppState, SetSendFeedback } from 'src/app/shared/states/App.state';

Phonebook.Frontend/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Injectable()
 export class NotImplementedService {

Phonebook.Frontend/src/app/modules/not-implemented/not-implemented.service.ts

@@ -1,6 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { OrganigramNodeComponent } from './organigram-node.component';
-import { MatTooltipModule, MatSnackBar } from '@angular/material';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { WindowRef } from 'src/app/services/windowRef.service';
 import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { UnitTreeNode } from 'src/app/services/api/organigram.service';

Phonebook.Frontend/src/app/modules/organigram/components/organigram-node/organigram-node.component.spec.ts

@@ -1,10 +1,10 @@
-import { Component, OnInit, Input, ViewChild, ElementRef, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { I18n } from '@ngx-translate/i18n-polyfill';
+import { Navigate, RouterState } from '@ngxs/router-plugin';
+import { Store } from '@ngxs/store';
 import { UnitTreeNode } from 'src/app/services/api/organigram.service';
-import { MatSnackBar } from '@angular/material';
 import { WindowRef } from 'src/app/services/windowRef.service';
-import { Store } from '@ngxs/store';
-import { Navigate, RouterState } from '@ngxs/router-plugin';
-import { I18n } from '@ngx-translate/i18n-polyfill';
 
 @Component({
   selector: 'app-organigram-node',
@@ -17,10 +17,10 @@ export class OrganigramNodeComponent implements OnInit {
   public node: UnitTreeNode;
   public expand: Expanded = Expanded.isNotExpanded;
   public expanded: typeof Expanded = Expanded;
-  @ViewChild('thisNode')
+  @ViewChild('thisNode', { static: true })
   public thisNode: ElementRef;
 
-  constructor(private snackBar: MatSnackBar, private windowRef: WindowRef, private store: Store, private i18n: I18n) { }
+  constructor(private snackBar: MatSnackBar, private windowRef: WindowRef, private store: Store, private i18n: I18n) {}
 
   public ngOnInit() {
     const nodePath = this.getCurrentRouteAsArray();
@@ -67,15 +67,15 @@ export class OrganigramNodeComponent implements OnInit {
         id: 'OrganigramNodeComponentCopiedFirstPart',
         value: 'Link to'
       }) +
-      ' "' +
-      this.node.name +
-      '" ' +
-      this.i18n({
-        meaning: 'OrganigramNodeComponent',
-        description: 'Second part of the message displayed when copying a link to the node',
-        id: 'OrganigramNodeComponentCopiedSecondPart',
-        value: 'copied to clipboard!'
-      }),
+        ' "' +
+        this.node.name +
+        '" ' +
+        this.i18n({
+          meaning: 'OrganigramNodeComponent',
+          description: 'Second part of the message displayed when copying a link to the node',
+          id: 'OrganigramNodeComponentCopiedSecondPart',
+          value: 'copied to clipboard!'
+        }),
       '',
       { duration: 2000 }
     );
@@ -97,8 +97,8 @@ export class OrganigramNodeComponent implements OnInit {
   public getCurrentRouteAsArray(): string[] {
     const navState = this.store.selectSnapshot(RouterState.state);
     return [
-      navState.root.firstChild.url[0].path,
-      ...navState.root.firstChild.firstChild.url.map(obj => {
+      navState!.root.firstChild!.url[0].path,
+      ...navState!.root.firstChild!.firstChild!.url.map(obj => {
         return obj.path;
       })
     ];

Phonebook.Frontend/src/app/modules/organigram/components/organigram-node/organigram-node.component.ts

@@ -3,7 +3,11 @@ import { CommonModule } from '@angular/common';
 import { OrganigramRoutingModule } from 'src/app/modules/organigram/organigram-routing.module';
 import { OrganigramComponent } from 'src/app/modules/organigram/pages/organigram/organigram.component';
 import { OrganigramNodeComponent } from 'src/app/modules/organigram/components/organigram-node/organigram-node.component';
-import { MatCardModule, MatDividerModule, MatIconModule, MatButtonModule, MatTooltipModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { ClipboardModule } from 'ngx-clipboard';
 
 @NgModule({