Package updates

Display/angular.json

@@ -22,7 +22,6 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -42,7 +41,13 @@
                 "moment-duration-format",
                 "socket.io-client",
                 "socket.io-parser"
-            ]
+            ],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -55,7 +60,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,

Display/e2e/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "module": "commonjs",

Display/package.json

@@ -11,51 +11,51 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.0.1",
+    "@angular/animations": "~12.0.2",
-    "@angular/cdk": "^10.0.1",
+    "@angular/cdk": "^12.0.2",
-    "@angular/common": "~10.0.1",
+    "@angular/common": "~12.0.2",
-    "@angular/compiler": "~10.0.1",
+    "@angular/compiler": "~12.0.2",
-    "@angular/core": "~10.0.1",
+    "@angular/core": "~12.0.2",
-    "@angular/forms": "~10.0.1",
+    "@angular/forms": "~12.0.2",
-    "@angular/material": "^10.0.1",
+    "@angular/material": "^12.0.2",
-    "@angular/material-moment-adapter": "^10.0.1",
+    "@angular/material-moment-adapter": "^12.0.2",
-    "@angular/platform-browser": "~10.0.1",
+    "@angular/platform-browser": "~12.0.2",
-    "@angular/platform-browser-dynamic": "~10.0.1",
+    "@angular/platform-browser-dynamic": "~12.0.2",
-    "@angular/router": "~10.0.1",
+    "@angular/router": "~12.0.2",
     "@aspnet/signalr": "^1.1.4",
     "@types/moment-duration-format": "^2.2.2",
     "@types/suncalc": "^1.8.0",
-    "angular-gridster2": "^10.0.1",
+    "angular-gridster2": "^12.0.0",
-    "angular-highcharts": "^9.0.11",
+    "angular-highcharts": "^11.3.1",
-    "highcharts": "^8.1.2",
+    "highcharts": "^9.1.0",
     "moment": "^2.27.0",
     "moment-duration-format": "^2.3.2",
     "ngx-moment": "^4.0.1",
     "ngx-socket-io": "^3.2.0",
-    "rxjs": "~6.5.5",
+    "rxjs": "~6.6.7",
     "suncalc": "^1.8.0",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1000.0",
+    "@angular-devkit/build-angular": "^12.0.2",
-    "@angular/cli": "~10.0.0",
+    "@angular/cli": "~12.0.2",
-    "@angular/compiler-cli": "~10.0.1",
+    "@angular/compiler-cli": "~12.0.2",
-    "@angular/language-service": "~10.0.1",
+    "@angular/language-service": "~12.0.2",
-    "@types/node": "^14.0.14",
+    "@types/jasmine": "~3.6.0",
-    "@types/jasmine": "~3.5.11",
     "@types/jasminewd2": "~2.0.8",
-    "codelyzer": "^5.2.2",
+    "@types/node": "^14.0.14",
-    "jasmine-core": "~3.5.0",
+    "codelyzer": "^6.0.0",
-    "jasmine-spec-reporter": "~5.0.2",
+    "jasmine-core": "~3.6.0",
-    "karma": "~5.1.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.3.2",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~3.3.1",
+    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.4",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.10.2",
     "tslint": "~6.1.2",
-    "typescript": "~3.9.5"
+    "typescript": "~4.2.4"
   }
 }

Display/src/app/app-routing.module.ts

@@ -20,7 +20,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

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

@@ -1,9 +1,9 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [
                 RouterTestingModule

Display/src/app/components/dashboard/dashboard.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { DashboardComponent } from './dashboard.component';
 
@@ -6,7 +6,7 @@ describe('DashboardComponent', () => {
     let component: DashboardComponent;
     let fixture: ComponentFixture<DashboardComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [DashboardComponent]
         })

Display/src/app/components/laundry/laundry.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { LaundryComponent } from './laundry.component';
 
@@ -6,7 +6,7 @@ describe('LaundryComponent', () => {
     let component: LaundryComponent;
     let fixture: ComponentFixture<LaundryComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [LaundryComponent]
         })

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

@@ -1,5 +1,5 @@
 import { LayoutModule } from '@angular/cdk/layout';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -13,7 +13,7 @@ describe('NavComponent', () => {
     let component: NavComponent;
     let fixture: ComponentFixture<NavComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [NavComponent],
             imports: [

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

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PowerChartsComponent } from './power-charts.component';
 
@@ -6,7 +6,7 @@ describe('PowerChartsComponent', () => {
     let component: PowerChartsComponent;
     let fixture: ComponentFixture<PowerChartsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [PowerChartsComponent]
         })

Display/src/app/components/power/current/power.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PowerComponent } from './power.component';
 
@@ -6,7 +6,7 @@ describe('PowerComponent', () => {
     let component: PowerComponent;
     let fixture: ComponentFixture<PowerComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [PowerComponent]
         })

Display/src/app/components/weather/almanac/almanac.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AlmanacComponent } from './almanac.component';
 
@@ -6,7 +6,7 @@ describe('AlmanacComponent', () => {
     let component: AlmanacComponent;
     let fixture: ComponentFixture<AlmanacComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [AlmanacComponent]
         })

Display/src/app/components/weather/charts/weather-charts.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { WeatherChartsComponent } from './weather-charts.component';
 
@@ -6,7 +6,7 @@ describe('WeatherChartsComponent', () => {
     let component: WeatherChartsComponent;
     let fixture: ComponentFixture<WeatherChartsComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [WeatherChartsComponent]
         })

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

@@ -277,7 +277,7 @@ export class WeatherChartsComponent implements OnInit {
                         month: '%b \'%y',
                         year: '%Y'
                     },
-                    offset: 50
+                    offset: '50'
                 },
                 yAxis: [
                     {

Display/src/app/components/weather/current/weather-current.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { WeatherCurrentComponent } from './weather-current.component';
 
@@ -6,7 +6,7 @@ describe('WeatherCurrentComponent', () => {
     let component: WeatherCurrentComponent;
     let fixture: ComponentFixture<WeatherCurrentComponent>;
 
-    beforeEach(async(() => {
+    beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [WeatherCurrentComponent]
         })

Display/src/environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

Display/src/polyfills.ts

@@ -55,7 +55,7 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 /***************************************************************************************************

Display/src/test.ts

@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 
-import 'zone.js/dist/zone-testing';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
     BrowserDynamicTestingModule,

Display/tsconfig.app.json

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

Display/tsconfig.base.json

@@ -1,26 +0,0 @@
-{
-    "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,17 +1,26 @@
-/*
-  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.
-*/
 {
-  "files": [],
+    "compileOnSave": false,
-  "references": [
+    "compilerOptions": {
-    {
+        "baseUrl": "./",
-      "path": "./tsconfig.app.json"
+        "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": {
-      "path": "./tsconfig.spec.json"
+        "fullTemplateTypeCheck": true,
+        "strictInjectionParameters": true
     }
-  ]
+}
-}

Display/tsconfig.spec.json

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