Feature: Upgrade to angular 8.1.3

package.json

@@ -33,45 +33,45 @@
   },
   "homepage": "https://github.com/CreativeIT/material-angular-dashboard",
   "dependencies": {
-    "@angular/animations": "7.2.1",
-    "@angular/common": "7.2.1",
-    "@angular/compiler": "7.2.1",
-    "@angular/core": "7.2.1",
-    "@angular/forms": "7.2.1",
-    "@angular/http": "7.2.1",
-    "@angular/platform-browser": "7.2.1",
-    "@angular/platform-browser-dynamic": "7.2.1",
-    "@angular/router": "7.2.1",
-    "@types/googlemaps": "^3.30.18",
+    "@angular/animations": "8.1.3",
+    "@angular/common": "8.1.3",
+    "@angular/forms": "8.1.3",
+    "@angular/http": "7.2.15",
+    "@angular/platform-browser": "8.1.3",
+    "@angular/platform-browser-dynamic": "8.1.3",
+    "@angular/router": "8.1.3",
+    "@types/googlemaps": "^3.37.0",
     "classlist.js": "1.1.20150312",
-    "core-js": "2.5.6",
-    "d3": "3.5.17",
+    "core-js": "3.1.4",
     "material-angular-select": "1.0.0",
     "material-design-lite": "1.3.0",
     "nvd3": "1.8.6",
-    "rxjs": "6.3.3",
-    "zone.js": "0.8.28"
+    "zone.js": "0.10.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.6.5",
-    "@angular/cli": "7.2.2",
-    "@angular/compiler-cli": "7.2.1",
-    "@angular/language-service": "7.2.1",
+    "@angular-devkit/build-angular": "^0.801.2",
+    "@angular/cli": "^8.1.2",
+    "@angular/compiler": "^8.1.3",
+    "@angular/compiler-cli": "^8.1.3",
+    "@angular/core": "^8.1.3",
+    "@angular/language-service": "8.1.3",
     "@types/d3": "3.5.40",
     "@types/material-design-lite": "1.1.15",
-    "@types/node": "10.1.2",
-    "@types/nvd3": "1.8.38",
-    "codelyzer": "4.3.0",
-    "node-sass": "4.9.0",
+    "@types/node": "12.6.8",
+    "@types/nvd3": "1.8.39",
+    "codelyzer": "5.1.0",
+    "d3": "3.5.17",
+    "node-sass": "4.12.0",
     "pre-commit": "1.2.2",
-    "stylelint": "9.2.1",
-    "stylelint-config-recommended-scss": "3.2.0",
-    "stylelint-config-standard": "18.2.0",
-    "stylelint-scss": "3.1.0",
-    "ts-node": "6.0.5",
-    "tslint": "5.10.0",
-    "tslint-angular": "1.1.2",
-    "tslint-config-airbnb": "5.9.2",
-    "typescript": "3.2.4"
+    "rxjs": "^6.5.2",
+    "stylelint": "10.1.0",
+    "stylelint-config-recommended-scss": "3.3.0",
+    "stylelint-config-standard": "18.3.0",
+    "stylelint-scss": "3.9.2",
+    "ts-node": "8.3.0",
+    "tslint": "5.18.0",
+    "tslint-angular": "3.0.2",
+    "tslint-config-airbnb": "5.11.1",
+    "typescript": "^3.4.5"
   }
 }

src/app/pages/charts/browser-statistics-chart/browser-statistics-chart.component.ts

@@ -34,6 +34,7 @@ export class BrowserStatisticsChartComponent extends BasePieChartComponent imple
     };
 
     const container1 = d3.select(this.el.nativeElement);
+
     if (container1[0][0]) {
       const colors = [
         COLORS.purple,
@@ -72,8 +73,9 @@ export class BrowserStatisticsChartComponent extends BasePieChartComponent imple
         container1.append('div')
           .append('svg')
           .datum(data)
-          .transition().duration(1200)
-          .call(pieChart);
+          .transition()
+          .duration(1200)
+          .call(pieChart as any);
 
         const h = 0;
         let i = 0.35;

src/app/pages/charts/country-statistics-chart/country-statistics-chart.component.ts

@@ -76,14 +76,14 @@ export class CountryStatisticsChartComponent extends BasePieChartComponent imple
               return '';
             }
             d3.selectAll('.nvtooltip').classed('mdl-tooltip', true);
-            return d.data.y + '%';
+            return `${d.data.y}%`;
           });
 
         container2.append('div')
           .append('svg')
           .datum(data)
           .transition().duration(1200)
-          .call(pieChart);
+          .call(pieChart as any);
 
         let h = 0;
         const i = 0.08;
@@ -102,7 +102,7 @@ export class CountryStatisticsChartComponent extends BasePieChartComponent imple
               { inner: innerRadius, outer: outerRadius },
               { inner: innerRadius, outer: outerRadius },
             ])
-              .title(h + '%')
+              .title(`${h}%`)
               .update();
             innerRadius += i;
             h += 10;

src/app/pages/charts/line-plus-bar-chart/line-plus-bar-chart.component.ts

@@ -55,10 +55,12 @@ export class LinePlusBarChartComponent implements OnInit {
         chart.legend
           .margin({ top: 2, bottom: 10 });
 
+        const formatTime = d3.time.format('%x');
+
         chart.xAxis
           .showMaxMin(false)
           .ticks(4)
-          .tickFormat(d => d3.time.format('%x')(new Date(d)));
+          .tickFormat(d => formatTime(new Date(d)));
 
         chart.y1Axis
           .showMaxMin(false)
@@ -74,10 +76,11 @@ export class LinePlusBarChartComponent implements OnInit {
               return '';
             }
             d3.selectAll('.nvtooltip').classed('mdl-tooltip', true);
+            const formatedDate = formatTime(new Date(d.value));
             if (d.hasOwnProperty('point')) {
-              return d3.time.format('%x')(new Date(d.value)) + '<br>Price: $' + d.series[0].value;
+              return `${formatedDate}<br>Price: $${d.series[0].value}`;
             }
-            return d3.time.format('%x')(new Date(d.value)) + '<br>Quantity: ' + d.series[0].value;
+            return `${formatedDate}<br>Quantity: $${d.series[0].value}`;
           });
 
         container.append('svg')

src/app/pages/charts/stacked-bar-chart/stacked-bar-chart.component.ts

@@ -74,10 +74,12 @@ export class StackedBarChartComponent implements OnInit {
               return '';
             }
             d3.selectAll('.nvtooltip').classed('mdl-tooltip', true);
+            const formatTime = d3.time.format('%x');
+            const formatedDate = formatTime(new Date(d.value));
             if (d.hasOwnProperty('point')) {
-              return d3.time.format('%x')(new Date(d.value)) + '<br>Price: $' + d.series[0].value;
+              return `${formatedDate}<br>Price: $${d.series[0].value}`;
             }
-            return d.series[0].key + '<br>' + d.value + '<br>' + d.series[0].value;
+            return `${formatedDate}<br>Quantity: $${d.series[0].value}`;
           });
 
         container.append('svg')

src/app/pages/dashboard/todo-list/todo-list.component.ts

@@ -26,7 +26,7 @@ export class TodoListComponent implements AfterViewInit, OnDestroy {
   private createdItem = null;
   private todoItemsSubscription;
 
-  @ViewChild('todoInput') private set todoInput(element: ElementRef) {
+  @ViewChild('todoInput', { static: false }) private set todoInput(element: ElementRef) {
     if (element) {
       element.nativeElement.focus();
     }

src/app/pages/maps/map-advanced/map-advanced.component.ts

@@ -28,7 +28,7 @@ const iconSize = 20;
 export class MapAdvancedComponent extends UpgradableComponent implements AfterViewInit, OnDestroy {
   @HostBinding('class.map-advanced') private map = true;
 
-  @ViewChild('gmap') gmapElement: any;
+  @ViewChild('gmap', { static: false }) gmapElement: any;
   public gMap: any;
   public data = [];
   private prevZoom = 2;

src/app/pages/pages/login/login.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 
-import { AuthService } from '@services/';
+import { AuthService } from '@services/*';
 import { BlankLayoutCardComponent } from 'app/components/blank-layout-card';
 
 @Component({

src/app/services/auth/fakebackend.interceptor.ts

@@ -24,7 +24,7 @@ export class FakeBackendInterceptor implements HttpInterceptor {
       // signup
       if (request.url.endsWith('/api/auth/signup') && request.method === 'POST') {
         const body = {
-          token: 'token_' + this.makeID(),
+          token: `token_${this.makeID()}`,
           user: {
             username: request.body['username'],
             email: request.body['email'],
@@ -37,7 +37,7 @@ export class FakeBackendInterceptor implements HttpInterceptor {
       // login
       if (request.url.endsWith('/api/auth/login') && request.method === 'POST') {
         const body = {
-          token: 'token_' + this.makeID(),
+          token: `token_${this.makeID()}`,
           user: {
             username: this.username,
             email: request.body['email'],

src/polyfills.ts

@@ -21,32 +21,32 @@
 /**
  * IE9, IE10 and IE11 requires all of the following polyfills.
  */
-import 'core-js/es6/array';
-import 'core-js/es6/date';
-import 'core-js/es6/function';
-import 'core-js/es6/map';
-import 'core-js/es6/math';
-import 'core-js/es6/number';
-import 'core-js/es6/object';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/regexp';
-import 'core-js/es6/set';
-import 'core-js/es6/string';
-import 'core-js/es6/symbol';
-import 'core-js/es6/weak-map';
+import 'core-js/es/array';
+import 'core-js/es/date';
+import 'core-js/es/function';
+import 'core-js/es/map';
+import 'core-js/es/math';
+import 'core-js/es/number';
+import 'core-js/es/object';
+import 'core-js/es/parse-float';
+import 'core-js/es/parse-int';
+import 'core-js/es/regexp';
+import 'core-js/es/set';
+import 'core-js/es/string';
+import 'core-js/es/symbol';
+import 'core-js/es/weak-map';
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.
 
 /** IE10 and IE11 requires the following for the Reflect API. */
-import 'core-js/es6/reflect';
+import 'core-js/es/reflect';
 
 /**
  * Evergreen browsers require these.
  */
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
+// import 'core-js/es/reflect';
 
 /**
  * Required to support Web Animations `@angular/platform-browser/animations`.

src/theme/components/line-chart/line-chart.component.ts

@@ -77,7 +77,7 @@ export abstract class LineChartComponent implements AfterViewInit {
 
     this.barsLayout = this.svg.append('g')
       .attr('class', 'bars')
-      .attr('transform', 'translate(' + this.margin + ', 0)')
+      .attr('transform', `translate(${this.margin}, 0)`)
       .selectAll('rect')
       .data(bars)
       .enter()
@@ -201,7 +201,9 @@ export abstract class LineChartComponent implements AfterViewInit {
       });
 
       clearInterval(this.timer);
-      this.lineChart.update();
+      if (typeof this.lineChart.update !== 'undefined') {
+        this.lineChart.update();
+      }
     }
   }
 

src/theme/scss/list.scss

@@ -32,4 +32,3 @@
   padding: 16px;
   margin-bottom: 20px;
 }
-