feat: update to 8 - step 1

src/app/@theme/components/search-input/search-input.component.ts

@@ -14,7 +14,7 @@ import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular
   `,
 })
 export class SearchInputComponent {
-  @ViewChild('input') input: ElementRef;
+  @ViewChild('input', { static: true }) input: ElementRef;
 
   @Output() search: EventEmitter<string> = new EventEmitter<string>();
 

src/app/@theme/components/theme-switcher/theme-switcher.component.ts

@@ -10,7 +10,7 @@ import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switch
   styleUrls: ['./theme-switcher.component.scss'],
 })
 export class ThemeSwitcherComponent {
-  @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
+  @ViewChild(NbPopoverDirective, { static: true }) popover: NbPopoverDirective;
 
   @Input() showTitle: boolean = true;
 

src/app/app-routing.module.ts

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

src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.ts

@@ -11,7 +11,7 @@ const VIEW_BOX_SIZE = 300;
 })
 export class TemperatureDraggerComponent implements AfterViewInit, OnChanges {
 
-  @ViewChild('svgRoot') svgRoot: ElementRef;
+  @ViewChild('svgRoot', { static: true }) svgRoot: ElementRef;
 
   @Input() fillColors: string|string[] = '#2ec6ff';
   @Input() disableArcColor = '#999999';

src/app/pages/e-commerce/charts-panel/charts-panel.component.ts

@@ -21,8 +21,8 @@ export class ECommerceChartsPanelComponent implements OnDestroy {
   ordersChartData: OrdersChart;
   profitChartData: ProfitChart;
 
-  @ViewChild('ordersChart') ordersChart: OrdersChartComponent;
-  @ViewChild('profitChart') profitChart: ProfitChartComponent;
+  @ViewChild('ordersChart', { static: true }) ordersChart: OrdersChartComponent;
+  @ViewChild('profitChart', { static: true }) profitChart: ProfitChartComponent;
 
   constructor(private ordersProfitChartService: OrdersProfitChartData) {
     this.ordersProfitChartService.getOrderProfitChartSummary()

src/app/pages/extra-components/accordion/accordion.component.ts

@@ -7,7 +7,7 @@ import { Component, ViewChild } from '@angular/core';
 })
 export class AccordionComponent {
 
-  @ViewChild('item') accordion;
+  @ViewChild('item', { static: true }) accordion;
 
   toggle() {
     this.accordion.toggle();

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

@@ -11,7 +11,7 @@ export class SearchComponent implements OnInit {
 
   @Output() positionChanged = new EventEmitter<Location>();
 
-  @ViewChild('search')
+  @ViewChild('search', { static: true })
   public searchElementRef: ElementRef;
 
   constructor(private mapsAPILoader: MapsAPILoader,

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

@@ -2,8 +2,13 @@ import { Component } from '@angular/core';
 import { ToasterConfig } from 'angular2-toaster';
 
 import 'style-loader!angular2-toaster/toaster.css';
-import { NbGlobalLogicalPosition, NbGlobalPhysicalPosition, NbGlobalPosition, NbToastrService } from '@nebular/theme';
-import { NbToastStatus } from '@nebular/theme/components/toastr/model';
+import {
+  NbComponentStatus,
+  NbGlobalLogicalPosition,
+  NbGlobalPhysicalPosition,
+  NbGlobalPosition,
+  NbToastrService,
+} from '@nebular/theme';
 
 @Component({
   selector: 'ngx-toastr',
@@ -21,18 +26,17 @@ export class ToastrComponent {
   hasIcon = true;
   position: NbGlobalPosition = NbGlobalPhysicalPosition.TOP_RIGHT;
   preventDuplicates = false;
-  status: NbToastStatus = NbToastStatus.SUCCESS;
+  status: NbComponentStatus = 'success';
 
   title = 'HI there!';
   content = `I'm cool toaster!`;
 
-  types: NbToastStatus[] = [
-    NbToastStatus.DEFAULT,
-    NbToastStatus.DANGER,
-    NbToastStatus.INFO,
-    NbToastStatus.PRIMARY,
-    NbToastStatus.SUCCESS,
-    NbToastStatus.WARNING,
+  types: NbComponentStatus[] = [
+    'success',
+    'info',
+    'warning',
+    'danger',
+    'primary',
   ];
   positions: string[] = [
     NbGlobalPhysicalPosition.TOP_RIGHT,
@@ -58,13 +62,13 @@ export class ToastrComponent {
   openRandomToast () {
     const typeIndex = Math.floor(Math.random() * this.types.length);
     const quoteIndex = Math.floor(Math.random() * this.quotes.length);
-    const type: NbToastStatus = this.types[typeIndex];
+    const type = this.types[typeIndex];
     const quote = this.quotes[quoteIndex];
 
     this.showToast(type, quote.title, quote.body);
   }
 
-  private showToast(type: NbToastStatus, title: string, body: string) {
+  private showToast(type: NbComponentStatus, title: string, body: string) {
     const config = {
       status: type,
       destroyByClick: this.destroyByClick,

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

@@ -9,8 +9,8 @@ import { WindowFormComponent } from './window-form/window-form.component';
 })
 export class WindowComponent {
 
-  @ViewChild('contentTemplate') contentTemplate: TemplateRef<any>;
-  @ViewChild('disabledEsc', { read: TemplateRef }) disabledEscTemplate: TemplateRef<HTMLElement>;
+  @ViewChild('contentTemplate', { static: true }) contentTemplate: TemplateRef<any>;
+  @ViewChild('disabledEsc', { read: TemplateRef, static: true }) disabledEscTemplate: TemplateRef<HTMLElement>;
 
   constructor(private windowService: NbWindowService) {}
 

src/app/pages/pages-routing.module.ts

@@ -17,34 +17,44 @@ const routes: Routes = [{
     component: DashboardComponent,
   }, {
     path: 'ui-features',
-    loadChildren: './ui-features/ui-features.module#UiFeaturesModule',
+    loadChildren: () => import('./ui-features/ui-features.module')
+      .then(m => m.UiFeaturesModule),
   }, {
     path: 'modal-overlays',
-    loadChildren: './modal-overlays/modal-overlays.module#ModalOverlaysModule',
+    loadChildren: () => import('./modal-overlays/modal-overlays.module')
+      .then(m => m.ModalOverlaysModule),
   }, {
     path: 'extra-components',
-    loadChildren: './extra-components/extra-components.module#ExtraComponentsModule',
+    loadChildren: () => import('./extra-components/extra-components.module')
+      .then(m => m.ExtraComponentsModule),
   }, {
     path: 'bootstrap',
-    loadChildren: './bootstrap/bootstrap.module#BootstrapModule',
+    loadChildren: () => import('./bootstrap/bootstrap.module')
+      .then(m => m.BootstrapModule),
   }, {
     path: 'maps',
-    loadChildren: './maps/maps.module#MapsModule',
+    loadChildren: () => import('./maps/maps.module')
+      .then(m => m.MapsModule),
   }, {
     path: 'charts',
-    loadChildren: './charts/charts.module#ChartsModule',
+    loadChildren: () => import('./charts/charts.module')
+      .then(m => m.ChartsModule),
   }, {
     path: 'editors',
-    loadChildren: './editors/editors.module#EditorsModule',
+    loadChildren: () => import('./editors/editors.module')
+      .then(m => m.EditorsModule),
   }, {
     path: 'forms',
-    loadChildren: './forms/forms.module#FormsModule',
+    loadChildren: () => import('./forms/forms.module')
+      .then(m => m.FormsModule),
   }, {
     path: 'tables',
-    loadChildren: './tables/tables.module#TablesModule',
+    loadChildren: () => import('./tables/tables.module')
+      .then(m => m.TablesModule),
   }, {
     path: 'miscellaneous',
-    loadChildren: './miscellaneous/miscellaneous.module#MiscellaneousModule',
+    loadChildren: () => import('./miscellaneous/miscellaneous.module')
+      .then(m => m.MiscellaneousModule),
   }, {
     path: '',
     redirectTo: 'dashboard',