Updated to Angular 8

package.json

@@ -12,19 +12,19 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.0.1",
-    "@angular/cdk": "~8.0.1",
-    "@angular/common": "~8.0.1",
-    "@angular/compiler": "~8.0.1",
-    "@angular/core": "~8.0.1",
+    "@angular/animations": "~9.1.11",
+    "@angular/cdk": "^9.2.4",
+    "@angular/common": "~9.1.11",
+    "@angular/compiler": "~9.1.11",
+    "@angular/core": "~9.1.11",
     "@angular/fire": "^5.2.1",
-    "@angular/forms": "~8.0.1",
-    "@angular/material": "^8.0.1",
-    "@angular/platform-browser": "~8.0.1",
-    "@angular/platform-browser-dynamic": "~8.0.1",
+    "@angular/forms": "~9.1.11",
+    "@angular/material": "^9.2.4",
+    "@angular/platform-browser": "~9.1.11",
+    "@angular/platform-browser-dynamic": "~9.1.11",
     "@angular/pwa": "^0.800.4",
-    "@angular/router": "~8.0.1",
-    "@angular/service-worker": "~8.0.1",
+    "@angular/router": "~9.1.11",
+    "@angular/service-worker": "~9.1.11",
     "@types/leaflet": "^1.5.1",
     "@types/lodash": "^4.14.138",
     "bootstrap-scss": "^4.3.1",
@@ -43,22 +43,22 @@
     "momentjs": "^2.0.0",
     "ng-click-outside": "^5.0.0",
     "ngx-color-picker": "^8.1.0",
-    "rxjs": "~6.4.0",
+    "rxjs": "~6.5.5",
     "ts-md5": "^1.2.5",
-    "tslib": "^1.9.0",
+    "tslib": "^1.13.0",
     "web-animations-js": "^2.3.2",
     "whatwg-fetch": "^3.0.0",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.800.0",
-    "@angular/cli": "~8.0.4",
-    "@angular/compiler-cli": "~8.0.1",
-    "@angular/language-service": "~8.0.1",
+    "@angular-devkit/build-angular": "~0.901.8",
+    "@angular/cli": "~9.1.8",
+    "@angular/compiler-cli": "~9.1.11",
+    "@angular/language-service": "~9.1.11",
     "@types/node": "~8.9.4",
     "firebase-tools": "^7.0.2",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",
-    "typescript": "~3.4.3"
+    "typescript": "~3.8.3"
   }
 }

src/app/app.module.ts

@@ -1,27 +1,26 @@
-import {BrowserModule} from '@angular/platform-browser';
-import {NgModule} from '@angular/core';
+import {NgModule} from "@angular/core";
 import {AppRouting} from './app.routing';
 import {AppComponent} from './app.component';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ServiceWorkerModule} from '@angular/service-worker';
 import {environment} from '../environments/environment';
-import {FormsModule} from "@angular/forms";
 import {MapComponent} from "./views/map/map.component";
 import {HomeComponent} from "./views/home/home.component";
 import {MaterialModule} from "./material.module";
 import {CalibrateComponent} from "./components/calibrate/calibrate.component";
-import {MatInputModule} from "@angular/material";
 import {PermissionsComponent} from "./components/permissions/permissions.component";
-import {AngularFireModule} from "@angular/fire";
-import {AngularFirestoreModule} from "@angular/fire/firestore";
 import {ToolbarComponent} from "./components/toolbar/toolbar.component";
 import {PaletteComponent} from "./components/palette/palette.component"
 import {AnimatedBackgroundComponent} from "./components/animatedBackground/animatedBackground.component";
-import {ClickOutsideModule} from "ng-click-outside";
-import {ColorPickerModule} from "ngx-color-picker";
 import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPickerDialog.component";
 import {DimensionsDialogComponent} from "./components/dimensionsDialog/dimensionsDialog.component";
 import {EditSymbolComponent} from "./components/editSymbol/editSymbol.component";
+import {AngularFireModule} from "@angular/fire";
+import {AngularFirestoreModule} from "@angular/fire/firestore";
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+import {BrowserModule} from "@angular/platform-browser";
+import {ClickOutsideModule} from "ng-click-outside";
+import {ColorPickerModule} from "ngx-color-picker";
+import {FormsModule} from "@angular/forms";
+import {ServiceWorkerModule} from "@angular/service-worker";
 
 @NgModule({
     declarations: [
@@ -48,7 +47,6 @@ import {EditSymbolComponent} from "./components/editSymbol/editSymbol.component"
         FormsModule,
         MaterialModule,
         ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
-        MatInputModule,
     ],
     providers: [],
     entryComponents: [CalibrateComponent, ColorPickerDialogComponent, DimensionsDialogComponent, EditSymbolComponent, PermissionsComponent],

src/app/components/calibrate/calibrate.component.ts

@@ -1,5 +1,5 @@
 import {Component} from "@angular/core";
-import {MatBottomSheetRef} from "@angular/material";
+import {MatBottomSheetRef} from "@angular/material/bottom-sheet";
 import {PhysicsService} from "../../services/physics.service";
 import {collapse, expand} from "../../animations";
 

src/app/components/permissions/permissions.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from "@angular/core";
-import { MAT_DIALOG_DATA } from "@angular/material";
+import {MAT_DIALOG_DATA} from "@angular/material/dialog";
 
 @Component({
     selector: 'permissions',

src/app/components/permissions/permissions.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from "@angular/core";
-import {MatDialog} from "@angular/material";
+import {MatDialog} from "@angular/material/dialog";
 import {PermissionsComponent} from "./permissions.component";
 
 @Injectable({
@@ -9,7 +9,7 @@ export class PermissionsService {
     constructor(private dialog: MatDialog) { }
 
     async requestPermission(name: string, icon: string, message: string) {
-        let perm = await navigator['permissions'].query({name: name});
+        let perm = await navigator['permissions'].query({name: <PermissionName>name});
         if (perm.state == 'prompt') {
             return await this.dialog.open(PermissionsComponent, {autoFocus: false, data: {icon: icon, message: message}}).afterClosed().toPromise();
         }

src/app/material.module.ts

@@ -1,14 +1,18 @@
-import {
-    MatBottomSheetModule,
-    MatButtonModule, MatDialogModule, MatDividerModule, MatFormFieldModule,
-    MatIconModule, MatInputModule, MatMenuModule, MatSliderModule,
-    MatSnackBarModule,
-    MatToolbarModule
-} from "@angular/material";
-import {NgModule} from "@angular/core";
-import {MatTooltipModule} from "@angular/material/tooltip";
-import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatBottomSheetModule} from "@angular/material/bottom-sheet";
+import {MatButtonModule} from "@angular/material/button";
 import {MatButtonToggleModule} from "@angular/material/button-toggle";
+import {MatDialogModule} from "@angular/material/dialog";
+import {MatDividerModule} from "@angular/material/divider";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {NgModule} from "@angular/core";
+import {MatMenuModule} from "@angular/material/menu";
+import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatInputModule} from "@angular/material/input";
+import {MatIconModule} from "@angular/material/icon";
+import {MatSliderModule} from "@angular/material/slider";
+import {MatToolbarModule} from "@angular/material/toolbar";
+import {MatSnackBarModule} from "@angular/material/snack-bar";
+import {MatTooltipModule} from "@angular/material/tooltip";
 
 export const materialModules = [
     MatBottomSheetModule,

src/app/views/map/map.component.ts

@@ -1,7 +1,6 @@
 import {Component, OnDestroy, OnInit} from "@angular/core";
 import {PhysicsService} from "../../services/physics.service";
 import {filter, finalize, skip, take} from "rxjs/operators";
-import {MatBottomSheet, MatSnackBar} from "@angular/material";
 import {CalibrateComponent} from "../../components/calibrate/calibrate.component";
 import {ToolbarItem} from "../../models/toolbarItem";
 import {flyInRight, flyOutRight} from "../../animations";
@@ -16,6 +15,8 @@ import {MapData, Marker} from "../../models/mapSymbol";
 import {Adjectives} from "../../adjectives";
 import {Nouns} from "../../nounes";
 import {EditSymbolComponent} from "../../components/editSymbol/editSymbol.component";
+import {MatSnackBar} from "@angular/material/snack-bar";
+import {MatBottomSheet} from "@angular/material/bottom-sheet";
 
 declare const L;