feat: upgrade to Angular 9 and Nebular 5 (#5628)

BREAKING CHANGE:
Angular updated to version 9.
Nebular updated to version 5.
`@agm/core` replaced with `@angular/google-maps`.
`ng2-completer` replaced with `@akveo/ng2-completer`, read details [here](https://github.com/akveo/ng2-smart-table/pull/1140#issue-392285957).

src/app/@core/core.module.ts

@@ -159,8 +159,8 @@ export class CoreModule {
     throwIfAlreadyLoaded(parentModule, 'CoreModule');
   }
 
-  static forRoot(): ModuleWithProviders {
-    return <ModuleWithProviders>{
+  static forRoot(): ModuleWithProviders<CoreModule> {
+    return {
       ngModule: CoreModule,
       providers: [
         ...NB_CORE_PROVIDERS,

src/app/@core/mock/mock-data.module.ts

@@ -54,8 +54,8 @@ const SERVICES = [
   ],
 })
 export class MockDataModule {
-  static forRoot(): ModuleWithProviders {
-    return <ModuleWithProviders>{
+  static forRoot(): ModuleWithProviders<MockDataModule> {
+    return {
       ngModule: MockDataModule,
       providers: [
         ...SERVICES,

src/app/@theme/theme.module.ts

@@ -76,8 +76,8 @@ const PIPES = [
   declarations: [...COMPONENTS, ...PIPES],
 })
 export class ThemeModule {
-  static forRoot(): ModuleWithProviders {
-    return <ModuleWithProviders>{
+  static forRoot(): ModuleWithProviders<ThemeModule> {
+    return {
       ngModule: ThemeModule,
       providers: [
         ...NbThemeModule.forRoot(

src/app/app-routing.module.ts

@@ -9,10 +9,10 @@ import {
   NbResetPasswordComponent,
 } from '@nebular/auth';
 
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: 'pages',
-    loadChildren: () => import('app/pages/pages.module')
+    loadChildren: () => import('./pages/pages.module')
       .then(m => m.PagesModule),
   },
   {

src/app/app.module.ts

@@ -28,9 +28,6 @@ import {
     BrowserAnimationsModule,
     HttpClientModule,
     AppRoutingModule,
-
-    ThemeModule.forRoot(),
-
     NbSidebarModule.forRoot(),
     NbMenuModule.forRoot(),
     NbDatepickerModule.forRoot(),
@@ -41,6 +38,7 @@ import {
       messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
     }),
     CoreModule.forRoot(),
+    ThemeModule.forRoot(),
   ],
   bootstrap: [AppComponent],
 })

src/app/pages/e-commerce/country-orders/country-orders.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 import { CountryOrderData } from '../../../@core/data/country-order';
@@ -22,7 +22,7 @@ import { CountryOrderData } from '../../../@core/data/country-order';
     </nb-card>
   `,
 })
-export class CountryOrdersComponent implements OnDestroy {
+export class CountryOrdersComponent implements OnInit, OnDestroy {
 
   private alive = true;
 
@@ -36,6 +36,9 @@ export class CountryOrdersComponent implements OnDestroy {
               private breakpointService: NbMediaBreakpointsService,
               private countryOrderService: CountryOrderData) {
     this.breakpoints = this.breakpointService.getBreakpointsMap();
+  }
+
+  ngOnInit() {
     this.themeService.onMediaQueryChange()
       .pipe(takeWhile(() => this.alive))
       .subscribe(([oldValue, newValue]) => {

src/app/pages/maps/gmaps/gmaps.component.html

@@ -0,0 +1,8 @@
+<nb-card>
+  <nb-card-header>Google Maps</nb-card-header>
+  <nb-card-body>
+    <google-map [center]="position" [zoom]="8" width="100%" height="36.5625rem">
+      <map-marker [position]="position"></map-marker>
+    </google-map>
+  </nb-card-body>
+</nb-card>

src/app/pages/maps/gmaps/gmaps.component.ts

@@ -3,19 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-gmaps',
   styleUrls: ['./gmaps.component.scss'],
-  template: `
-    <nb-card>
-      <nb-card-header>Google Maps</nb-card-header>
-      <nb-card-body>
-        <agm-map [latitude]="lat" [longitude]="lng">
-          <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
-        </agm-map>
-      </nb-card-body>
-    </nb-card>
-  `,
+  templateUrl: './gmaps.component.html',
 })
 export class GmapsComponent {
-
-  lat = 51.678418;
-  lng = 7.809007;
+  readonly position = { lat: 51.678418, lng: 7.809007 };
 }

src/app/pages/maps/maps.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { AgmCoreModule } from '@agm/core';
+import { GoogleMapsModule } from '@angular/google-maps';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { NbCardModule } from '@nebular/theme';
@@ -10,10 +10,7 @@ import { MapsRoutingModule, routedComponents } from './maps-routing.module';
 @NgModule({
   imports: [
     ThemeModule,
-    AgmCoreModule.forRoot({
-      apiKey: 'AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k',
-      libraries: ['places'],
-    }),
+    GoogleMapsModule,
     LeafletModule.forRoot(),
     MapsRoutingModule,
     NgxEchartsModule,

src/app/pages/maps/search-map/entity/Location.ts

@@ -1,4 +0,0 @@
-export class Location {
-  constructor(public latitude: number = 53.9, public longitude: number = 27.5667) {
-  }
-}

src/app/pages/maps/search-map/entity/position.model.ts

@@ -0,0 +1,6 @@
+export class PositionModel {
+  constructor(
+    public lat = 53.9,
+    public lng = 27.5667,
+  ) {}
+}

src/app/pages/maps/search-map/map/map.component.html

@@ -1,7 +1,3 @@
-<agm-map [latitude]="latitude"
-         [longitude]="longitude"
-         [scrollwheel]="false"
-         [zoom]="zoom">
-  <agm-marker [latitude]="latitude"
-              [longitude]="longitude"></agm-marker>
-</agm-map>
+<google-map [center]="position" [zoom]="zoom" width="100%" height="36.5625rem">
+  <map-marker [position]="position"></map-marker>
+</google-map>

src/app/pages/maps/search-map/map/map.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Location } from '../entity/Location';
+import { PositionModel } from '../entity/position.model';
 
 @Component({
   selector: 'ngx-map',
@@ -7,23 +7,24 @@ import { Location } from '../entity/Location';
   styleUrls: ['./map.component.scss'],
 })
 export class MapComponent implements OnInit {
-  latitude: number;
-  longitude: number;
-  zoom: number;
+  position: PositionModel = null;
+  zoom: number = 1;
 
   @Input()
-  public set searchedLocation(searchedLocation: Location) {
-    this.latitude = searchedLocation.latitude;
-    this.longitude = searchedLocation.longitude;
-    this.zoom = 12;
+  public set searchedPosition(position: PositionModel) {
+    if (position) {
+      this.position = position;
+      this.zoom = 12;
+    }
   }
 
-  ngOnInit(): void {
+  ngOnInit() {
     // set up current location
     if ('geolocation' in navigator) {
       navigator.geolocation.getCurrentPosition((position) => {
-        this.searchedLocation = new Location(
-          position.coords.latitude, position.coords.longitude,
+        this.searchedPosition = new PositionModel(
+          position.coords.latitude,
+          position.coords.longitude,
         );
       });
     }

src/app/pages/maps/search-map/search-map.component.html

@@ -1,7 +1,7 @@
 <nb-card>
   <nb-card-header>Google Maps with search</nb-card-header>
   <nb-card-body>
-    <ngx-search (positionChanged)="updateLocation($event)"></ngx-search>
-    <ngx-map [searchedLocation]="searchedLocation"></ngx-map>
+    <ngx-search (positionChanged)="setPosition($event)"></ngx-search>
+    <ngx-map [searchedPosition]="searchedPosition"></ngx-map>
   </nb-card-body>
 </nb-card>

src/app/pages/maps/search-map/search-map.component.ts

@@ -1,15 +1,14 @@
 import { Component } from '@angular/core';
-import { Location } from './entity/Location';
+import { PositionModel } from './entity/position.model';
 
 @Component({
   selector: 'ngx-search-map',
   templateUrl: './search-map.component.html',
 })
 export class SearchMapComponent {
+  searchedPosition: PositionModel = new PositionModel();
 
-  searchedLocation: Location = new Location();
-
-  updateLocation(event: Location) {
-    this.searchedLocation = new Location(event.latitude, event.longitude);
+  setPosition(position: PositionModel) {
+    this.searchedPosition = position;
   }
 }

src/app/pages/maps/search-map/search/search.component.ts

@@ -1,7 +1,5 @@
 import { Component, ElementRef, EventEmitter, NgZone, OnInit, Output, ViewChild } from '@angular/core';
-import { MapsAPILoader } from '@agm/core';
-import { Location } from '../entity/Location';
-
+import { PositionModel } from '../entity/position.model';
 
 @Component({
   selector: 'ngx-search',
@@ -9,35 +7,33 @@ import { Location } from '../entity/Location';
 })
 export class SearchComponent implements OnInit {
 
-  @Output() positionChanged = new EventEmitter<Location>();
+  @Output()
+  positionChanged: EventEmitter<PositionModel> = new EventEmitter<PositionModel>();
 
   @ViewChild('search', { static: true })
-  public searchElementRef: ElementRef;
+  searchElementRef: ElementRef;
 
-  constructor(private mapsAPILoader: MapsAPILoader,
-              private ngZone: NgZone) {
-  }
+  constructor(private ngZone: NgZone) {}
 
   ngOnInit() {
-    // load Places Autocomplete
-    this.mapsAPILoader.load().then(() => {
-      const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
-        types: ['address'],
-      });
-      autocomplete.addListener('place_changed', () => {
-        this.ngZone.run(() => {
-          // get the place result
-          const place: google.maps.places.PlaceResult = autocomplete.getPlace();
+    const autocomplete = new google.maps.places.Autocomplete(
+      this.searchElementRef.nativeElement, { types: ['address'] },
+    );
 
-          // verify result
-          if (place.geometry === undefined || place.geometry === null) {
-            return;
-          }
+    autocomplete.addListener('place_changed', () => {
+      this.ngZone.run(() => {
+        // get the place result
+        const place: google.maps.places.PlaceResult = autocomplete.getPlace();
 
-          this.positionChanged.emit(
-            new Location(place.geometry.location.lat(),
-              place.geometry.location.lng()));
-        });
+        // verify result
+        if (place.geometry === undefined || place.geometry === null) {
+          return;
+        }
+
+        this.positionChanged.emit(new PositionModel(
+          place.geometry.location.lat(),
+          place.geometry.location.lng(),
+        ));
       });
     });
   }

src/app/pages/modal-overlays/toastr/toastr.component.ts

@@ -1,13 +1,11 @@
 import { Component } from '@angular/core';
-import { ToasterConfig } from 'angular2-toaster';
-
-import 'style-loader!angular2-toaster/toaster.css';
 import {
   NbComponentStatus,
   NbGlobalLogicalPosition,
   NbGlobalPhysicalPosition,
   NbGlobalPosition,
   NbToastrService,
+  NbToastrConfig,
 } from '@nebular/theme';
 
 @Component({
@@ -18,7 +16,7 @@ import {
 export class ToastrComponent {
   constructor(private toastrService: NbToastrService) {}
 
-  config: ToasterConfig;
+  config: NbToastrConfig;
 
   index = 1;
   destroyByClick = true;

src/index.html

@@ -9,6 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="favicon.png">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k&libraries=places"></script>
 </head>
 <body>
   <ngx-app>Loading...</ngx-app>

src/tsconfig.app.json

@@ -2,15 +2,7 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "baseUrl": "./",
-    "paths": {
-      "@angular/*": [
-        "../node_modules/@angular/*"
-      ],
-      "@nebular/*": [
-        "../node_modules/@nebular/*"
-      ]
-    }
+    "baseUrl": "./"
   },
   "exclude": [
     "test.ts",