Update to angular 8.2

package.json

@@ -11,14 +11,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.0",
+    "@angular/animations": "~8.2.14",
-    "@angular/common": "~7.2.0",
+    "@angular/common": "~8.2.14",
-    "@angular/compiler": "~7.2.0",
+    "@angular/compiler": "~8.2.14",
-    "@angular/core": "~7.2.0",
+    "@angular/core": "~8.2.14",
-    "@angular/forms": "~7.2.0",
+    "@angular/forms": "~8.2.14",
-    "@angular/platform-browser": "~7.2.0",
+    "@angular/platform-browser": "~8.2.14",
-    "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/platform-browser-dynamic": "~8.2.14",
-    "@angular/router": "~7.2.0",
+    "@angular/router": "~8.2.14",
     "@aspnet/signalr": "^1.1.4",
     "@farmmaps/common": ">=0.0.1-prerelease.77 <0.0.1",
     "@farmmaps/common-map": ">=0.0.1-prerelease.77 <0.0.1",
@@ -31,20 +31,20 @@
     "core-js": "^2.5.4",
     "ngrx-store-localstorage": "^8.0.0",
     "resumablejs": "^1.1.0",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.5.3",
     "tassign": "^1.0.0",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular-devkit/build-angular": "~0.803.19",
-    "@angular-devkit/build-ng-packagr": "~0.13.0",
+    "@angular-devkit/build-ng-packagr": "~0.803.19",
-    "@angular/cli": "~7.3.8",
+    "@angular/cli": "~8.3.19",
-    "@angular/compiler-cli": "~7.2.0",
+    "@angular/compiler-cli": "~8.2.14",
-    "@angular/language-service": "~7.2.0",
+    "@angular/language-service": "~8.2.14",
     "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "~4.5.0",
+    "codelyzer": "^5.0.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~4.0.0",
@@ -52,12 +52,12 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^4.2.0",
+    "ng-packagr": "^5.4.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
-    "tsickle": ">=0.34.0",
+    "tsickle": "^0.37.0",
     "tslib": "^1.9.0",
     "tslint": "~5.11.0",
-    "typescript": "~3.2.2"
+    "typescript": "~3.5.3"
   }
 }

projects/common-map/src/fm-map/components/aol/gps-location/gps-location.component.ts

@@ -23,7 +23,7 @@ export class GpsLocation  implements OnInit,OnChanges{
   public path: string = "";
   public rotate: string = "";
   private resolution: number = 0;
-  @ViewChild('location') locationElement: ElementRef;
+  @ViewChild('location', { static: true }) locationElement: ElementRef;
 
   constructor(private map: MapComponent) {
     

projects/common-map/src/fm-map/components/feature-list-container/feature-list-container.component.ts

@@ -21,7 +21,7 @@ export class FeatureListContainerComponent {
   @Input() features: Array<Feature>
   @Input() queryState: IQueryState;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent(queryState:IQueryState) {
     var componentFactory: ComponentFactory<AbstractFeatureListComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListComponent); // default

projects/common-map/src/fm-map/components/feature-list-feature-container/feature-list-feature-container.component.ts

@@ -19,7 +19,7 @@ export class FeatureListFeatureContainerComponent {
 
   @Input() feature: Feature;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
     var componentFactory: ComponentFactory<AbstractFeatureListFeatureComponent> = this.componentFactoryResolver.resolveComponentFactory(FeatureListFeatureComponent); // default

projects/common-map/src/fm-map/components/item-list-item-container/item-list-item-container.component.ts

@@ -19,7 +19,7 @@ export class ItemListItemContainerComponent {
 
   @Input() item: IListItem;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
     var componentFactory: ComponentFactory<AbstractItemListItemComponent> = this.componentFactoryResolver.resolveComponentFactory(ItemListItemComponent); // default

projects/common-map/src/fm-map/components/map-search/map-search.component.ts

@@ -14,7 +14,7 @@ import { tassign } from 'tassign';
 })
 export class MapSearchComponent {
 
-  @ViewChild('searchText') searchText;
+  @ViewChild('searchText', { static: true }) searchText;
   @Input() clearEnabled: boolean
   @Input() set collapsed(collapsed: boolean) {
     this.collapsedLocal = collapsed;

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -72,7 +72,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public baseLayersCollapsed:boolean = true;
   public overlayLayersCollapsed: boolean = true;
   public extent: Observable<Extent>;
-  @ViewChild('map') map;
+  @ViewChild('map', { static: true }) map;
   
   constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
   }

projects/common-map/src/fm-map/components/meta-data-modal/meta-data-modal.component.ts

@@ -18,7 +18,7 @@ export class MetaDataModalComponent {
   private modalName: string = 'metaDataModal';
   private modalRef: NgbModalRef;
 
-  @ViewChild('content') _templateModal:ElementRef;
+  @ViewChild('content', { static: true }) _templateModal:ElementRef;
   @Input() droppedFile: IDroppedFile;
   @Input() set modalState(_modalState:any) {;
     if(_modalState == this.modalName) {

projects/common-map/src/fm-map/components/select-period-modal/select-period-modal.component.ts

@@ -29,7 +29,7 @@ export class SelectPeriodModalComponent {
   fromDate: NgbDateStruct;
   toDate: NgbDateStruct;
 
-  @ViewChild('content') _templateModal:ElementRef;
+  @ViewChild('content', { static: true }) _templateModal:ElementRef;
 
   @Input() set modalState(_modalState:any) {;
     if(_modalState == this.modalName) {

projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts

@@ -16,7 +16,7 @@ export class SelectedItemContainerComponent {
 
   @Input() item: IItem;
 
-  @ViewChild(WidgetHostDirective) widgetHost: WidgetHostDirective; 
+  @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
     var componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default

projects/common-map/src/fm-map/services/device-orientation.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Observer, Observable } from 'rxjs';
+
+
+@Injectable()
+export class DeviceOrientationService {
+
+   /**
+   * Tries HTML5 geolocation.
+   *
+   * Wraps the Geolocation API into an observable.
+   *
+   * @return An observable of Bearing
+   */
+  getCurrentBearing(): Observable<number> {
+    return Observable.create((observer: Observer<number>) => {             
+        let sensor = new Magnetometer();
+        sensor.onreading= (ev:Event) => {
+             observer.next(Math.atan2(sensor.y, sensor.x) * (180 / Math.PI));
+        };
+    });
+  }
+
+}

projects/common/src/fm/components/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener } from '@angular/core';
 import { Router, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
-import { Meta, Title, DOCUMENT, MetaDefinition } from '@angular/platform-browser';
+import { Meta, Title, MetaDefinition } from '@angular/platform-browser';import { DOCUMENT } from "@angular/common";
 import { Subscription ,  Observable } from 'rxjs';
 import { Store, Action } from '@ngrx/store';
 

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -12,7 +12,7 @@ export class SidePanelComponent  implements OnChanges {
   @Input() public collapsed: boolean;
   @Input() public collapsable: boolean;
   @Input() public resizeable: boolean = false;
-  @ViewChild("resizeGrip") elementView: ElementRef;
+  @ViewChild("resizeGrip", { static: false }) elementView: ElementRef;
   public mobile:boolean = true;
   private parentHeight:number = 0;
   public top = "100%";

projects/common/src/fm/components/tag-input/tag-input.component.ts

@@ -19,7 +19,7 @@ import { TypeaheadService } from '../../services/typeahead.service';
 
 export class TagInputComponent implements ControlValueAccessor  {
   @Input() tags: string[]
-  @ViewChild('taginput') tagInputElement: ElementRef;
+  @ViewChild('taginput', { static: true }) tagInputElement: ElementRef;
   public tag: string;
   searching = false;
   searchFailed = false;

projects/common/src/fm/components/timespan/timespan.component.ts

@@ -34,9 +34,9 @@ export class TimespanComponent implements OnInit, OnChanges {
   elementWidth:number;
   elementHeight:number;
   lastOffsetInPixels:number=0;
-  @ViewChild('timeLine') canvasRef;
+  @ViewChild('timeLine', { static: true }) canvasRef;
-  @ViewChild('popoverStart') public popoverStart:NgbPopover;
+  @ViewChild('popoverStart', { static: true }) public popoverStart:NgbPopover;
-  @ViewChild('popoverEnd') public popoverEnd:NgbPopover;
+  @ViewChild('popoverEnd', { static: true }) public popoverEnd:NgbPopover;
   @Input() collapsed: boolean = true;
   @Input() startDate: Date = new Date(2018,1,3);
   @Input() endDate: Date = new Date(2018,1,5);

src/polyfills.ts

@@ -43,7 +43,7 @@
  *
  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  *
  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  *  with the following flag, it will bypass `zone.js` patch for IE/Edge

tsconfig.json

@@ -2,15 +2,16 @@
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",
+    "downlevelIteration": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
+    "target": "es2015",
     "typeRoots": [
       "node_modules/@types"
     ],

tslint.json

@@ -62,12 +62,12 @@
     ],
     "trailing-comma": false,
     "no-output-on-prefix": true,
-    "use-input-property-decorator": true,
+    "no-inputs-metadata-property": true,
-    "use-output-property-decorator": true,
+    "no-outputs-metadata-property": true,
-    "use-host-property-decorator": true,
+    "no-host-metadata-property": true,
     "no-input-rename": true,
     "no-output-rename": true,
-    "use-life-cycle-interface": true,
+    "use-lifecycle-interface": true,
     "use-pipe-transform-interface": true,
     "component-class-suffix": true,
     "directive-class-suffix": true