Upgrade Angular and other packages

Display/angular.json

@@ -22,7 +22,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-                        "aot": false,
+            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -31,7 +31,19 @@
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
-                        "scripts": []
+            "scripts": [],
+            "allowedCommonJsDependencies": [
+                "debug",
+                "highcharts",
+                "highcharts/highmaps",
+                "highcharts/highstock",
+                "highcharts/modules/exporting",
+                "highcharts/modules/windbarb",
+                "moment-duration-format",
+                "regression",
+                "socket.io-client",
+                "socket.io-parser"
+            ]
           },
           "configurations": {
             "production": {
@@ -46,7 +58,6 @@
               "sourceMap": false,
               "extractCss": true,
               "namedChunks": false,
-                            "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -129,5 +140,8 @@
       }
     }
   },
-    "defaultProject": "Display"
+  "defaultProject": "Display",
+  "cli": {
+    "analytics": "193ea55c-f768-4283-8c30-227f5da32d57"
+  }
 }

Display/e2e/tsconfig.json

@@ -1,9 +1,9 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2018",
     "types": [
       "jasmine",
       "jasminewd2",

Display/package.json

@@ -11,54 +11,53 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.2.4",
+    "@angular/animations": "~10.0.1",
-    "@angular/cdk": "^8.2.1",
+    "@angular/cdk": "^10.0.1",
-    "@angular/common": "~8.2.4",
+    "@angular/common": "~10.0.1",
-    "@angular/compiler": "~8.2.4",
+    "@angular/compiler": "~10.0.1",
-    "@angular/core": "~8.2.4",
+    "@angular/core": "~10.0.1",
-    "@angular/forms": "~8.2.4",
+    "@angular/forms": "~10.0.1",
-    "@angular/material": "^8.2.1",
+    "@angular/material": "^10.0.1",
-    "@angular/material-moment-adapter": "^8.2.2",
+    "@angular/material-moment-adapter": "^10.0.1",
-    "@angular/platform-browser": "~8.2.4",
+    "@angular/platform-browser": "~10.0.1",
-    "@angular/platform-browser-dynamic": "~8.2.4",
+    "@angular/platform-browser-dynamic": "~10.0.1",
-    "@angular/router": "~8.2.4",
+    "@angular/router": "~10.0.1",
     "@aspnet/signalr": "^1.1.4",
     "@types/moment-duration-format": "^2.2.2",
     "@types/regression": "^2.0.0",
     "@types/suncalc": "^1.8.0",
-    "angular-gridster2": "^8.2.0",
+    "angular-gridster2": "^10.0.1",
-    "angular-highcharts": "^8.0.3",
+    "angular-highcharts": "^9.0.11",
-    "hammerjs": "^2.0.8",
+    "highcharts": "^8.1.2",
-    "highcharts": "^7.2.0",
+    "moment": "^2.27.0",
-    "moment": "^2.24.0",
     "moment-duration-format": "^2.3.2",
-    "ngx-moment": "^3.4.0",
+    "ngx-moment": "^4.0.1",
-    "ngx-socket-io": "^3.0.1",
+    "ngx-socket-io": "^3.2.0",
     "regression": "^2.0.1",
-    "rxjs": "~6.4.0",
+    "rxjs": "~6.5.5",
     "suncalc": "^1.8.0",
-    "tslib": "^1.10.0",
+    "tslib": "^2.0.0",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.3",
+    "@angular-devkit/build-angular": "~0.1000.0",
-    "@angular/cli": "~8.3.3",
+    "@angular/cli": "~10.0.0",
-    "@angular/compiler-cli": "~8.2.4",
+    "@angular/compiler-cli": "~10.0.1",
-    "@angular/language-service": "~8.2.4",
+    "@angular/language-service": "~10.0.1",
-    "@types/node": "~8.9.4",
+    "@types/node": "^14.0.14",
-    "@types/jasmine": "~3.3.8",
+    "@types/jasmine": "~3.5.11",
-    "@types/jasminewd2": "~2.0.3",
+    "@types/jasminewd2": "~2.0.8",
-    "codelyzer": "^5.0.0",
+    "codelyzer": "^5.2.2",
-    "jasmine-core": "~3.4.0",
+    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "jasmine-spec-reporter": "~5.0.2",
-    "karma": "~4.1.0",
+    "karma": "~5.1.0",
-    "karma-chrome-launcher": "~2.2.0",
+    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~2.0.1",
+    "karma-jasmine": "~3.3.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
+    "karma-jasmine-html-reporter": "^1.5.4",
-    "protractor": "~5.4.0",
+    "protractor": "~7.0.0",
-    "ts-node": "~7.0.0",
+    "ts-node": "~8.10.2",
-    "tslint": "~5.15.0",
+    "tslint": "~6.1.2",
-    "typescript": "~3.5.3"
+    "typescript": "~3.9.5"
   }
 }

Display/src/app/app.module.ts

@@ -6,7 +6,15 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatToolbarModule, MatIconModule, MatMenuModule, MatButtonModule, MatExpansionModule, MatSelectModule, MatDatepickerModule, MatInputModule, MatProgressSpinnerModule } from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSelectModule } from '@angular/material/select';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { NavComponent } from './components/nav/nav.component';
 import { LayoutModule } from '@angular/cdk/layout';
 import { MatSidenavModule } from '@angular/material/sidenav';

Display/src/app/components/nav/nav.component.ts

@@ -2,7 +2,7 @@ import { Component, ViewChild } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
-import { MatSidenav } from '@angular/material';
+import { MatSidenav } from '@angular/material/sidenav';
 
 @Component({
     selector: 'app-nav',
@@ -10,7 +10,7 @@ import { MatSidenav } from '@angular/material';
     styleUrls: ['./nav.component.scss']
 })
 export class NavComponent {
-    @ViewChild('sidenav', null) sidenav: MatSidenav;
+    @ViewChild('sidenav', {}) sidenav: MatSidenav;
 
     isHandset$: Observable<boolean> = this.breakpointObserver.observe([
         Breakpoints.HandsetLandscape,

Display/src/app/components/power/charts/power-charts.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Chart } from 'angular-highcharts';
-import { SeriesLineOptions, SeriesWindbarbOptions } from 'highcharts';
+import { SeriesLineOptions } from 'highcharts';
 import { HttpClient } from '@angular/common/http';
 import { forkJoin } from 'rxjs';
 import { WeatherValueGrouped } from 'src/app/models/weather/weather-value-grouped';

Display/src/main.ts

@@ -1,4 +1,4 @@
-import 'hammerjs';
+
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

Display/tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-    "extends": "./tsconfig.json",
+    "extends": "./tsconfig.base.json",
     "compilerOptions": {
         "outDir": "./out-tsc/app",
         "types": []
@@ -9,7 +9,7 @@
         "src/polyfills.ts"
     ],
     "include": [
-        "src/**/*.ts"
+        "src/**/*.d.ts"
     ],
     "exclude": [
         "src/test.ts",

Display/tsconfig.base.json

@@ -0,0 +1,26 @@
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+        "baseUrl": "./",
+        "outDir": "./dist/out-tsc",
+        "sourceMap": true,
+        "declaration": false,
+        "downlevelIteration": true,
+        "experimentalDecorators": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "importHelpers": true,
+        "target": "es2015",
+        "typeRoots": [
+            "node_modules/@types"
+        ],
+        "lib": [
+            "es2018",
+            "dom"
+        ]
+    },
+    "angularCompilerOptions": {
+        "fullTemplateTypeCheck": true,
+        "strictInjectionParameters": true
+    }
+}

Display/tsconfig.json

@@ -1,26 +1,17 @@
+/*
+  This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
+  It is not intended to be used to perform a compilation.
+
+  To learn more about this file see: https://angular.io/config/solution-tsconfig.
+*/
 {
-    "compileOnSave": false,
+  "files": [],
-    "compilerOptions": {
+  "references": [
-        "baseUrl": "./",
+    {
-        "outDir": "./dist/out-tsc",
+      "path": "./tsconfig.app.json"
-        "sourceMap": true,
-        "declaration": false,
-        "downlevelIteration": true,
-        "experimentalDecorators": true,
-        "module": "esnext",
-        "moduleResolution": "node",
-        "importHelpers": true,
-        "target": "es2015",
-        "typeRoots": [
-            "node_modules/@types"
-        ],
-        "lib": [
-            "es2018",
-            "dom"
-        ]
     },
-    "angularCompilerOptions": {
+    {
-        "fullTemplateTypeCheck": true,
+      "path": "./tsconfig.spec.json"
-        "strictInjectionParameters": true
     }
+  ]
 }

Display/tsconfig.spec.json

@@ -1,5 +1,5 @@
 {
-    "extends": "./tsconfig.json",
+    "extends": "./tsconfig.base.json",
     "compilerOptions": {
         "outDir": "./out-tsc/spec",
         "types": [

Display/tslint.json

@@ -1,8 +1,16 @@
 {
     "extends": "tslint:recommended",
     "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
         "array-type": false,
         "arrow-parens": false,
+    "arrow-return-shorthand": true,
+    "curly": true,
         "deprecation": {
             "severity": "warning"
         },
@@ -21,10 +29,17 @@
             "app",
             "kebab-case"
         ],
+    "eofline": true,
         "import-blacklist": [
             true,
             "rxjs/Rx"
         ],
+    "import-spacing": true,
+    "indent": {
+      "options": [
+        "spaces"
+      ]
+    },
         "interface-name": false,
         "max-classes-per-file": false,
         "max-line-length": [
@@ -59,7 +74,6 @@
         "no-non-null-assertion": true,
         "no-redundant-jsdoc": true,
         "no-switch-case-fall-through": true,
-        "no-use-before-declare": true,
         "no-var-requires": false,
         "object-literal-key-quotes": [
             true,
@@ -71,6 +85,20 @@
             true,
             "single"
         ],
+    "semicolon": {
+      "options": [
+        "always"
+      ]
+    },
+    "space-before-function-paren": {
+      "options": {
+        "anonymous": "never",
+        "asyncArrow": "always",
+        "constructor": "never",
+        "method": "never",
+        "named": "never"
+      }
+    },
         "trailing-comma": false,
         "no-conflicting-lifecycle": true,
         "no-host-metadata-property": true,
@@ -82,9 +110,44 @@
         "no-outputs-metadata-property": true,
         "template-banana-in-box": true,
         "template-no-negated-async": true,
+    "typedef-whitespace": {
+      "options": [
+        {
+          "call-signature": "nospace",
+          "index-signature": "nospace",
+          "parameter": "nospace",
+          "property-declaration": "nospace",
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
         "use-lifecycle-interface": true,
         "use-pipe-transform-interface": true
+    ,    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
     },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    }
+},
     "rulesDirectory": [
         "codelyzer"
     ]