feat: update to Angular 6 (#1684)

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

@@ -2,7 +2,7 @@ import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core
 import { CommonModule } from '@angular/common';
 import { NbAuthModule, NbDummyAuthProvider } from '@nebular/auth';
 import { NbSecurityModule, NbRoleProvider } from '@nebular/security';
-import { of as observableOf } from 'rxjs/observable/of';
+import { of as observableOf } from 'rxjs';
 
 import { throwIfAlreadyLoaded } from './module-import-guard';
 import { DataModule } from './data/data.module';
@@ -26,7 +26,14 @@ const socialLinks = [
   },
 ];
 
-const NB_CORE_PROVIDERS = [
+export class NbSimpleRoleProvider extends NbRoleProvider {
+  getRole() {
+    // here you could provide any role based on any auth flow
+    return observableOf('guest');
+  }
+}
+
+export const NB_CORE_PROVIDERS = [
   ...DataModule.forRoot().providers,
   ...NbAuthModule.forRoot({
     providers: {
@@ -63,12 +70,7 @@ const NB_CORE_PROVIDERS = [
     },
   }).providers,
   {
-    provide: NbRoleProvider,
-    useValue: {
-      getRole: () => {
-        return observableOf('guest'); // here you could provide any role based on any auth flow
-      },
-    },
+    provide: NbRoleProvider, useClass: NbSimpleRoleProvider,
   },
   AnalyticsService,
 ];

src/app/@core/data/player.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import 'rxjs/add/observable/of';
 
 export class Track {
   name: string;

src/app/@core/data/state.service.ts

@@ -1,8 +1,7 @@
+
+import { of as observableOf,  Observable ,  BehaviorSubject } from 'rxjs';
 import { Injectable } from '@angular/core';
 
-import { Observable } from 'rxjs/Observable';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-import 'rxjs/add/observable/of';
 
 @Injectable()
 export class StateService {
@@ -48,7 +47,7 @@ export class StateService {
   }
 
   getLayoutStates(): Observable<any[]> {
-    return Observable.of(this.layouts);
+    return observableOf(this.layouts);
   }
 
   onLayoutState(): Observable<any> {
@@ -60,7 +59,7 @@ export class StateService {
   }
 
   getSidebarStates(): Observable<any[]> {
-    return Observable.of(this.sidebars);
+    return observableOf(this.sidebars);
   }
 
   onSidebarState(): Observable<any> {

src/app/@core/data/users.service.ts

@@ -1,6 +1,7 @@
+
+import { of as observableOf,  Observable } from 'rxjs';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
+
 
 let counter = 0;
 
@@ -23,15 +24,15 @@ export class UserService {
   }
 
   getUsers(): Observable<any> {
-    return Observable.of(this.users);
+    return observableOf(this.users);
   }
 
   getUserArray(): Observable<any[]> {
-    return Observable.of(this.userArray);
+    return observableOf(this.userArray);
   }
 
   getUser(): Observable<any> {
     counter = (counter + 1) % this.userArray.length;
-    return Observable.of(this.userArray[counter]);
+    return observableOf(this.userArray[counter]);
   }
 }

src/app/@core/utils/analytics.service.ts

@@ -1,8 +1,7 @@
 import { Injectable } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Location } from '@angular/common';
-
-import { filter } from 'rxjs/operator/filter';
+import { filter } from 'rxjs/operators';
 
 declare const ga: any;
 
@@ -16,7 +15,9 @@ export class AnalyticsService {
 
   trackPageViews() {
     if (this.enabled) {
-      filter.call(this.router.events, (event) => event instanceof NavigationEnd)
+      this.router.events.pipe(
+        filter((event) => event instanceof NavigationEnd),
+      )
         .subscribe(() => {
           ga('send', {hitType: 'pageview', page: this.location.path()});
         });

src/app/@theme/layouts/sample/sample.layout.ts

@@ -1,4 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
+import { delay, withLatestFrom } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
 import {
   NbMediaBreakpoint,
   NbMediaBreakpointsService,
@@ -10,10 +12,6 @@ import {
 
 import { StateService } from '../../../@core/data/state.service';
 
-import { Subscription } from 'rxjs/Subscription';
-import 'rxjs/add/operator/withLatestFrom';
-import 'rxjs/add/operator/delay';
-
 // TODO: move layouts into the framework
 @Component({
   selector: 'ngx-sample-layout',
@@ -25,9 +23,9 @@ import 'rxjs/add/operator/delay';
       </nb-layout-header>
 
       <nb-sidebar class="menu-sidebar"
-                   tag="menu-sidebar"
-                   responsive
-                   [right]="sidebar.id === 'right'">
+                  tag="menu-sidebar"
+                  responsive
+                  [right]="sidebar.id === 'right'">
         <nb-sidebar-header>
           <a href="#" class="btn btn-hero-success main-btn">
             <i class="ion ion-social-github"></i> <span>Support Us</span>
@@ -53,16 +51,16 @@ import 'rxjs/add/operator/delay';
       </nb-layout-footer>
 
       <nb-sidebar class="settings-sidebar"
-                   tag="settings-sidebar"
-                   state="collapsed"
-                   fixed
-                   [right]="sidebar.id !== 'right'">
+                  tag="settings-sidebar"
+                  state="collapsed"
+                  fixed
+                  [right]="sidebar.id !== 'right'">
         <ngx-theme-settings></ngx-theme-settings>
       </nb-sidebar>
     </nb-layout>
   `,
 })
-export class SampleLayoutComponent  implements OnDestroy {
+export class SampleLayoutComponent implements OnDestroy {
 
   subMenu: NbMenuItem[] = [
     {
@@ -127,8 +125,10 @@ export class SampleLayoutComponent  implements OnDestroy {
 
     const isBp = this.bpService.getByName('is');
     this.menuClick$ = this.menuService.onItemSelect()
-      .withLatestFrom(this.themeService.onMediaQueryChange())
-      .delay(20)
+      .pipe(
+        withLatestFrom(this.themeService.onMediaQueryChange()),
+        delay(20),
+      )
       .subscribe(([item, [bpFrom, bpTo]]: [any, [NbMediaBreakpoint, NbMediaBreakpoint]]) => {
 
         if (bpTo.width <= isBp.width) {

src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts

@@ -1,3 +1,4 @@
+import { delay } from 'rxjs/operators';
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
@@ -41,7 +42,7 @@ export class ElectricityChartComponent implements AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit(): void {
-    this.themeSubscription = this.theme.getJsTheme().delay(1).subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().pipe(delay(1)).subscribe(config => {
       const eTheme: any = config.variables.electricity;
 
       this.option = {

src/app/pages/dashboard/solar/solar.component.ts

@@ -1,3 +1,4 @@
+import { delay } from 'rxjs/operators';
 import { AfterViewInit, Component, Input, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
@@ -41,7 +42,7 @@ export class SolarComponent implements AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().delay(1).subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().pipe(delay(1)).subscribe(config => {
 
       const solarTheme: any = config.variables.solar;
 

src/app/pages/dashboard/traffic/traffic-chart.component.ts

@@ -1,3 +1,4 @@
+import { delay } from 'rxjs/operators';
 import { AfterViewInit, Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
 
@@ -23,7 +24,7 @@ export class TrafficChartComponent implements AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit() {
-    this.themeSubscription = this.theme.getJsTheme().delay(1).subscribe(config => {
+    this.themeSubscription = this.theme.getJsTheme().pipe(delay(1)).subscribe(config => {
 
       const trafficTheme: any = config.variables.traffic;
 

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

@@ -1,7 +1,7 @@
 import { Component, OnDestroy } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { combineLatest } from 'rxjs/observable/combineLatest';
-import { takeWhile } from 'rxjs/operators/takeWhile';
+import { combineLatest } from 'rxjs';
+import { takeWhile } from 'rxjs/operators';
 import { NgxEchartsService } from 'ngx-echarts';
 import { NbThemeService } from '@nebular/theme';
 

src/polyfills.ts

@@ -68,8 +68,6 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  * Date, currency, decimal and percent pipes.
  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
  */
-import 'intl';  // Run `npm install --save intl`.
-import 'intl/locale-data/jsonp/en';
 import 'core-js/es7/array';
 import 'core-js/es7/object';
 

src/tsconfig.spec.json

@@ -11,7 +11,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",