Update to Angular 11

angular.json

@@ -38,7 +38,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,

package.json

@@ -28,20 +28,20 @@
     "url": "https://github.com/mxtommy/Kip"
   },
   "dependencies": {
-    "@angular/animations": "9.1.7",
-    "@angular/cdk": "^9.2.4",
-    "@angular/common": "9.1.7",
-    "@angular/compiler": "9.1.7",
-    "@angular/core": "9.1.7",
-    "@angular/forms": "9.1.7",
-    "@angular/localize": "^9.1.13",
-    "@angular/material": "^9.2.4",
-    "@angular/platform-browser": "9.1.7",
-    "@angular/platform-browser-dynamic": "9.1.7",
-    "@angular/platform-server": "9.1.7",
-    "@angular/router": "9.1.7",
+    "@angular/animations": "11.2.14",
+    "@angular/cdk": "^11.2.13",
+    "@angular/common": "11.2.14",
+    "@angular/compiler": "11.2.14",
+    "@angular/core": "11.2.14",
+    "@angular/forms": "11.2.14",
+    "@angular/localize": "^11.2.14",
+    "@angular/material": "^11.2.13",
+    "@angular/platform-browser": "11.2.14",
+    "@angular/platform-browser-dynamic": "11.2.14",
+    "@angular/platform-server": "11.2.14",
+    "@angular/router": "11.2.14",
     "@biacsics/ng-canvas-gauges": "^6.0.7",
-    "angular-resize-event": "^1.2.1",
+    "angular-resize-event": "^2.1.0",
     "angular-split": "^3.0.3",
     "chart.js": "^2.9.3",
     "compare-versions": "^3.6.0",
@@ -55,26 +55,26 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.6",
-    "@angular/cli": "^9.1.6",
-    "@angular/compiler-cli": "9.1.7",
-    "@angular/language-service": "9.1.7",
-    "@types/jasmine": "~3.5.10",
+    "@angular-devkit/build-angular": "~0.1102.13",
+    "@angular/cli": "^11.2.13",
+    "@angular/compiler-cli": "11.2.14",
+    "@angular/language-service": "11.2.14",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "^14.0.1",
-    "codelyzer": "^5.1.2",
+    "codelyzer": "^6.0.0",
     "hammerjs": "^2.0.8",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~5.0.2",
-    "karma": "^5.0.7",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "~2.0.0",
-    "karma-coverage-istanbul-reporter": "^3.0.2",
-    "karma-jasmine": "~3.1.1",
-    "karma-jasmine-html-reporter": "^1.5.4",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.10.1",
-    "tslint": "~6.1.2",
-    "typescript": "^3.8.3"
+    "tslint": "~6.1.0",
+    "typescript": "^4.1.5"
   }
 }

src/app/alarm-menu/alarm-menu.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AlarmMenuComponent } from './alarm-menu.component';
 
 describe('AlarmMenuComponent', () => {
   let component: AlarmMenuComponent;
   let fixture: ComponentFixture<AlarmMenuComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ AlarmMenuComponent ]
     })

src/app/app.component.spec.ts

@@ -1,29 +1,29 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent
       ],
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'app'`, async(() => {
+  it(`should have as title 'app'`, waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app.title).toEqual('app');
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title in a h1 tag', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;

src/app/app.module.ts

@@ -139,7 +139,7 @@ const appRoutes: Routes = [
     FormsModule,
     ReactiveFormsModule,
     HttpClientModule,
-    RouterModule.forRoot(appRoutes, { useHash: true /* , enableTracing: true */ } ),
+    RouterModule.forRoot(appRoutes, { useHash: true /* , enableTracing: true */, relativeLinkResolution: 'legacy' } ),
     AngularSplitModule,
     AngularResizedEventModule,
     BrowserAnimationsModule,

src/app/gauge-steel/gauge-steel.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { GaugeSteelComponent } from './gauge-steel.component';
 
 describe('GaugeSteelComponent', () => {
   let component: GaugeSteelComponent;
   let fixture: ComponentFixture<GaugeSteelComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ GaugeSteelComponent ]
     })

src/app/layout-split/layout-split.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { LayoutSplitComponent } from './layout-split.component';
 
 describe('LayoutSplitComponent', () => {
   let component: LayoutSplitComponent;
   let fixture: ComponentFixture<LayoutSplitComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ LayoutSplitComponent ]
     })

src/app/modal-path-selector/modal-path-selector.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ModalPathSelectorComponent } from './modal-path-selector.component';
 
 describe('ModalPathSelectorComponent', () => {
   let component: ModalPathSelectorComponent;
   let fixture: ComponentFixture<ModalPathSelectorComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ModalPathSelectorComponent ]
     })

src/app/modal-widget/modal-widget.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ModalWidgetComponent } from './modal-widget.component';
 
 describe('ModalWidgetComponent', () => {
   let component: ModalWidgetComponent;
   let fixture: ComponentFixture<ModalWidgetComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ModalWidgetComponent ]
     })

src/app/reset-config/reset-config.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ResetConfigComponent } from './reset-config.component';
 
 describe('ResetConfigComponent', () => {
   let component: ResetConfigComponent;
   let fixture: ComponentFixture<ResetConfigComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ResetConfigComponent ]
     })

src/app/root-display/root-display.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { RootDisplayComponent } from './root-display.component';
 
 describe('RootDisplayComponent', () => {
   let component: RootDisplayComponent;
   let fixture: ComponentFixture<RootDisplayComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ RootDisplayComponent ]
     })

src/app/settings-config/settings-config.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SettingsConfigComponent } from './settings-config.component';
 
 describe('SettingsConfigComponent', () => {
   let component: SettingsConfigComponent;
   let fixture: ComponentFixture<SettingsConfigComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SettingsConfigComponent ]
     })

src/app/settings-datasets/settings-datasets.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SettingsDatasetsComponent } from './settings-datasets.component';
 
 describe('SettingsDatasetsComponent', () => {
   let component: SettingsDatasetsComponent;
   let fixture: ComponentFixture<SettingsDatasetsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SettingsDatasetsComponent ]
     })

src/app/settings-notifications/settings-notifications.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SettingsNotificationsComponent } from './settings-notifications.component';
 
 describe('SettingsNotificationsComponent', () => {
   let component: SettingsNotificationsComponent;
   let fixture: ComponentFixture<SettingsNotificationsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SettingsNotificationsComponent ]
     })

src/app/settings-signalk/settings-signalk.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SettingsSignalkComponent } from './settings-signalk.component';
 
 describe('SettingsSignalkComponent', () => {
   let component: SettingsSignalkComponent;
   let fixture: ComponentFixture<SettingsSignalkComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SettingsSignalkComponent ]
     })

src/app/settings-units/settings-units.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SettingsUnitsComponent } from './settings-units.component';
 
 describe('SettingsUnitsComponent', () => {
   let component: SettingsUnitsComponent;
   let fixture: ComponentFixture<SettingsUnitsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SettingsUnitsComponent ]
     })

src/app/settings/settings.component.spec.ts

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

src/app/svg-autopilot/svg-autopilot.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SvgAutopilotComponent } from './svg-autopilot.component';
 
 describe('SvgAutopilotComponent', () => {
   let component: SvgAutopilotComponent;
   let fixture: ComponentFixture<SvgAutopilotComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SvgAutopilotComponent ]
     })

src/app/svg-simple-linear-gauge/svg-simple-linear-gauge.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SvgSimpleLinearGaugeComponent } from './svg-simple-linear-gauge.component';
 
 describe('SvgSimpleLinearGaugeComponent', () => {
   let component: SvgSimpleLinearGaugeComponent;
   let fixture: ComponentFixture<SvgSimpleLinearGaugeComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SvgSimpleLinearGaugeComponent ]
     })

src/app/svg-wind/svg-wind.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { SvgWindComponent } from './svg-wind.component';
 
 describe('SvgWindComponent', () => {
   let component: SvgWindComponent;
   let fixture: ComponentFixture<SvgWindComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ SvgWindComponent ]
     })

src/app/unit-window/unit-window.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { UnitWindowComponent } from './unit-window.component';
 
 describe('UnitWindowComponent', () => {
   let component: UnitWindowComponent;
   let fixture: ComponentFixture<UnitWindowComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ UnitWindowComponent ]
     })

src/app/widget-autopilot/widget-autopilot.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { WidgetAutopilotComponent } from './widget-autopilot.component';
 
 describe('WidgetAutopilotComponent', () => {
   let component: WidgetAutopilotComponent;
   let fixture: ComponentFixture<WidgetAutopilotComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ WidgetAutopilotComponent ]
     })