feat: update to 8 - step 1

browserslist

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

package.json

@@ -9,11 +9,6 @@
   "bugs": {
     "url": "https://github.com/akveo/ngx-admin/issues"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "IE 11"
-  ],
   "scripts": {
     "ng": "ng",
     "conventional-changelog": "conventional-changelog",
@@ -35,27 +30,26 @@
   },
   "dependencies": {
     "@agm/core": "^1.0.0-beta.5",
-    "@angular/animations": "^7.2.11",
-    "@angular/cdk": "^7.3.6",
-    "@angular/common": "^7.2.11",
-    "@angular/compiler": "^7.2.11",
-    "@angular/core": "^7.2.11",
-    "@angular/forms": "^7.2.11",
-    "@angular/http": "^7.2.11",
-    "@angular/platform-browser": "^7.2.11",
-    "@angular/platform-browser-dynamic": "^7.2.11",
-    "@angular/router": "^7.2.11",
+    "@angular/animations": "^8.0.0",
+    "@angular/cdk": "^8.0.0-rc.2",
+    "@angular/common": "^8.0.0",
+    "@angular/compiler": "^8.0.0",
+    "@angular/core": "^8.0.0",
+    "@angular/forms": "^8.0.0",
+    "@angular/platform-browser": "^8.0.0",
+    "@angular/platform-browser-dynamic": "^8.0.0",
+    "@angular/router": "^8.0.0",
     "@asymmetrik/ngx-leaflet": "3.0.1",
-    "@nebular/auth": "3.4.2",
-    "@nebular/bootstrap": "3.4.2",
-    "@nebular/security": "3.4.2",
-    "@nebular/theme": "3.4.2",
+    "@nebular/auth": "4.0.0-rc.6",
+    "@nebular/bootstrap": "4.0.0-rc.5",
+    "@nebular/security": "4.0.0-rc.6",
+    "@nebular/theme": "4.0.0-rc.6",
     "@ng-bootstrap/ng-bootstrap": "^4.0.0",
     "@swimlane/ngx-charts": "^10.0.0",
     "angular-tree-component": "7.2.0",
     "angular2-chartjs": "0.4.1",
     "angular2-toaster": "^7.0.0",
-    "bootstrap": "4.0.0",
+    "bootstrap": "4.3.1",
     "chart.js": "2.7.1",
     "ckeditor": "4.7.3",
     "classlist.js": "1.1.20150312",
@@ -73,20 +67,20 @@
     "normalize.css": "6.0.0",
     "pace-js": "1.0.2",
     "roboto-fontface": "0.8.0",
-    "rxjs": "6.4.0",
+    "rxjs": "6.5.2",
     "rxjs-compat": "6.3.0",
     "socicon": "3.0.5",
     "tinymce": "4.5.7",
     "tslib": "^1.9.0",
     "typeface-exo": "0.0.22",
     "web-animations-js": "2.2.5",
-    "zone.js": "^0.8.29"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.12.1",
-    "@angular/compiler-cli": "^7.2.11",
-    "@angular/cli": "^7.3.7",
-    "@angular/language-service": "7.2.11",
+    "@angular-devkit/build-angular": "~0.800.0-rc.4",
+    "@angular/compiler-cli": "^8.0.0",
+    "@angular/cli": "^8.0.0-rc.4",
+    "@angular/language-service": "8.0.0",
     "@compodoc/compodoc": "1.0.1",
     "@fortawesome/fontawesome-free": "^5.2.0",
     "@types/d3-color": "1.0.5",
@@ -95,7 +89,7 @@
     "@types/jasminewd2": "2.0.3",
     "@types/leaflet": "1.2.3",
     "@types/node": "6.0.90",
-    "codelyzer": "^4.5.0",
+    "codelyzer": "^5.0.1",
     "conventional-changelog-cli": "1.3.4",
     "husky": "0.13.3",
     "jasmine-core": "2.6.4",
@@ -113,6 +107,6 @@
     "ts-node": "3.2.2",
     "tslint": "5.7.0",
     "tslint-language-service": "^0.9.9",
-    "typescript": "3.2.4"
+    "typescript": "3.4.5"
   }
 }

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',

src/polyfills.ts

@@ -1,8 +1,3 @@
-/**
- * @license
- * Copyright Akveo. All Rights Reserved.
- * Licensed under the MIT License. See License.txt in the project root for license information.
- */
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.
@@ -16,27 +11,13 @@
  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
  *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ * Learn more in https://angular.io/guide/browser-support
  */
 
 /***************************************************************************************************
 * BROWSER POLYFILLS
 */
 
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-import 'core-js/es6/function';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/number';
-import 'core-js/es6/math';
-import 'core-js/es6/string';
-import 'core-js/es6/date';
-import 'core-js/es6/array';
-import 'core-js/es6/regexp';
-import 'core-js/es6/map';
-import 'core-js/es6/set';
 
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

src/tsconfig.app.json

@@ -2,7 +2,6 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "module": "es2015",
     "baseUrl": "./",
     "paths": {
       "@angular/*": [

src/tsconfig.spec.json

@@ -3,8 +3,6 @@
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
     "baseUrl": "./",
-    "module": "commonjs",
-    "target": "es5",
     "types": [
       "jasmine",
       "node"

tsconfig.json

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

tslint.json

@@ -124,10 +124,10 @@
         "message": "please don't"
       }
     ],
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
+    "no-inputs-metadata-property": true,
+    "no-outputs-metadata-property": 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,