Upgrade helix-front to Angular 9.1

helix-front/.nvmrc

@@ -0,0 +1 @@
+v10.13.0

helix-front/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

helix-front/angular.json

@@ -0,0 +1,138 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "helix-front": {
+      "root": "",
+      "sourceRoot": "client",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "aot": true,
+            "outputPath": "dist/public",
+            "index": "client/index.html",
+            "main": "client/main.ts",
+            "tsConfig": "client/tsconfig.app.json",
+            "polyfills": "client/polyfills.ts",
+            "assets": [
+              "client/assets",
+              "client/favicon.ico"
+            ],
+            "styles": [
+              "client/styles.scss",
+              "client/theme.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "3503kb"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "client/environments/environment.ts",
+                  "with": "client/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "helix-front:build",
+            "proxyConfig": "./proxy.conf.json"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "helix-front:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "helix-front:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "client/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "client/polyfills.ts",
+            "tsConfig": "client/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "client/styles.scss",
+              "client/theme.scss"
+            ],
+            "assets": [
+              "client/assets",
+              "client/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    },
+    "helix-front-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "helix-front:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "helix-front",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "hi",
+      "style": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "hi"
+    }
+  }
+}

helix-front/client/app/app-routing.module.ts

@@ -145,4 +145,4 @@ const HELIX_ROUTES: Routes = [
   }
 ];
 
-export const AppRoutingModule: ModuleWithProviders = RouterModule.forRoot(HELIX_ROUTES);
+export const AppRoutingModule: ModuleWithProviders<RouterModule> = RouterModule.forRoot(HELIX_ROUTES);

helix-front/client/app/app.component.spec.ts

@@ -1,7 +1,8 @@
 import { TestBed, async } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
-import { Angulartics2, Angulartics2Piwik } from 'angulartics2';
+// import { Angulartics2 } from 'angulartics2';
+// import { Angulartics2Piwik } from 'angulartics2/piwik';
 
 import { TestingModule } from '../testing/testing.module';
 import { AppComponent } from './app.component';
@@ -10,7 +11,7 @@ describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        TestingModule
+        TestingModule,
       ],
       declarations: [
         AppComponent
@@ -21,8 +22,8 @@ describe('AppComponent', () => {
       ],
       // TODO vxu: I don't want to add the following two but ...
       providers: [
-        Angulartics2,
-        Angulartics2Piwik
+        // Angulartics2,
+        // Angulartics2Piwik,
       ]
     }).compileComponents();
   }));

helix-front/client/app/app.component.ts

@@ -7,9 +7,9 @@ import {
   NavigationCancel,
   NavigationError
 } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
-import { Angulartics2Piwik } from 'angulartics2';
+// import { Angulartics2Piwik } from 'angulartics2/piwik';
 
 import { UserService } from './core/user.service';
 import { InputDialogComponent } from './shared/dialog/input-dialog/input-dialog.component';
@@ -19,7 +19,7 @@ import { HelperService } from './shared/helper.service';
   selector: 'hi-root',
   templateUrl: './app.component.html',
   styleUrls: [ './app.component.scss' ],
-  providers: [ UserService ]
+  providers: [ UserService/*, Angulartics2Piwik */ ]
 })
 export class AppComponent implements OnInit {
 
@@ -29,9 +29,9 @@ export class AppComponent implements OnInit {
   currentUser: any;
 
   constructor(
+    // protected angulartics2Piwik: Angulartics2Piwik,
     protected route: ActivatedRoute,
     protected router: Router,
-    protected angulartics: Angulartics2Piwik,
     protected dialog: MatDialog,
     protected service: UserService,
     protected helper: HelperService
@@ -50,6 +50,7 @@ export class AppComponent implements OnInit {
         this.isLoading = false;
       }
     });
+    // angulartics2Piwik.startTracking();
   }
 
   ngOnInit() {

helix-front/client/app/app.module.ts

@@ -1,10 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-
-import { Angulartics2Module, Angulartics2Piwik } from 'angulartics2';
+import { HttpClientModule } from '@angular/common/http';
 
+// import { Angulartics2Module } from 'angulartics2';
+// import { Angulartics2Piwik } from 'angulartics2/piwik';
 import { AppRoutingModule } from './app-routing.module';
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
@@ -26,9 +26,9 @@ import { DashboardModule } from './dashboard/dashboard.module';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     AppRoutingModule,
-    Angulartics2Module.forRoot([ Angulartics2Piwik ]),
+    // Angulartics2Module.forRoot(),
     CoreModule,
     SharedModule,
     ClusterModule,

helix-front/client/app/chooser/shared/chooser.service.spec.ts

@@ -1,6 +1,6 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 
 import { ChooserService } from './chooser.service';
 
@@ -9,7 +9,7 @@ describe('ChooserService', () => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        HttpModule
+        HttpClientModule
       ],
       providers: [ChooserService]
     });

helix-front/client/app/cluster/cluster-detail/cluster-detail.component.ts

@@ -1,6 +1,8 @@
+
+import {map} from 'rxjs/operators';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 
 import { Cluster } from '../shared/cluster.model';
 import { HelperService } from '../../shared/helper.service';
@@ -42,8 +44,8 @@ export class ClusterDetailComponent implements OnInit {
 
   ngOnInit() {
     this.clusterService.can().subscribe(data => this.can = data);
-    this.route.params
-      .map(p => p.name)
+    this.route.params.pipe(
+      map(p => p.name))
       .subscribe(name => {
         this.clusterName = name;
         this.loadCluster();

helix-front/client/app/cluster/cluster-list/cluster-list.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialog, MatSnackBar } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { Router } from '@angular/router';
 
 import { ClusterService } from '../shared/cluster.service';

helix-front/client/app/cluster/cluster.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MediaChange, ObservableMedia } from '@angular/flex-layout';
+import { MediaChange, MediaObserver } from '@angular/flex-layout';
 
 @Component({
   selector: 'hi-cluster',
@@ -8,20 +8,23 @@ import { MediaChange, ObservableMedia } from '@angular/flex-layout';
 })
 export class ClusterComponent implements OnInit {
 
-  @ViewChild('sidenav') sidenav;
+  @ViewChild('sidenav', {static: true}) sidenav;
 
   isNarrowView: boolean;
 
   constructor(
-    protected media: ObservableMedia
+    protected media: MediaObserver
   ) { }
 
   ngOnInit() {
     // auto adjust side nav only if not embed
     this.isNarrowView = (this.media.isActive('xs') || this.media.isActive('sm'));
 
-    this.media.subscribe((change: MediaChange) => {
-      this.isNarrowView = (change.mqAlias === 'xs' || change.mqAlias === 'sm');
+    this.media.asObservable().subscribe((change: MediaChange[]) => {
+      change.forEach((item) => {
+        this.isNarrowView = (item.mqAlias === 'xs' || item.mqAlias === 'sm');
+      })
+
     });
   }