chore(r5): dependencies update, couple of fixes

src/app/app.module.ts

@@ -51,20 +51,21 @@ const APP_PROVIDERS = [
 export class AppModule {
 
   constructor(public appRef: ApplicationRef, public appState: AppState) {
-    
+
   }
 
   hmrOnInit(store) {
-    if (!store && !store.state) return;
+    if (!store || !store.state) return;
     console.log('HMR store', store);
-    this.appState.state = store.state;
+    this.appState._state = store.state;
+    this.appRef.tick();
     delete store.state;
   }
 
   hmrOnDestroy(store) {
-    let cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
+    const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
     // recreate elements
-    let state = this.appState.state;
+    const state = this.appState._state;
     store.state = state;
     store.disposeOldHosts = createNewHosts(cmpLocation);
     // remove styles

src/app/app.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { HmrState } from 'angular2-hmr';
 
 @Injectable()
 export class AppState {

src/app/environment.ts

@@ -25,8 +25,8 @@ if ('production' === ENV) {
 } else {
 
   _decorateModuleRef = (modRef: any) => {
-    var appRef = modRef.injector.get(ApplicationRef);
-    var cmpRef = appRef.components[0];
+    const appRef = modRef.injector.get(ApplicationRef);
+    const cmpRef = appRef.components[0];
 
     let _ng = (<any>window).ng;
     enableDebugTools(cmpRef);

src/app/pages/login/login.html

@@ -1,7 +1,7 @@
 <div class="auth-main">
   <div class="auth-block">
     <h1>Sign in to ng2-admin</h1>
-    <a [routerLink]="['/register']" class="auth-link">New to ng2-admin? Sign up!</a>
+    <a routerLink="/register" class="auth-link">New to ng2-admin? Sign up!</a>
 
     <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
       <div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
@@ -21,7 +21,7 @@
       <div class="form-group row">
         <div class="col-sm-offset-2 col-sm-10">
           <button [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth">Sign in</button>
-          <a [routerLink]="['Login']" class="forgot-pass">Forgot password?</a>
+          <a routerLink="/login" class="forgot-pass">Forgot password?</a>
         </div>
       </div>
     </form>

src/app/pages/pages.routing.ts

@@ -4,25 +4,25 @@ import { Pages } from './pages.component';
 const routes: Routes = [
   {
     path: 'login',
-    loadChildren: () => require('es6-promise-loader!app/pages/login/login.module')('default')
+    loadChildren: () => System.import('./login/login.module')
   },
   {
     path: 'register',
-    loadChildren: () => require('es6-promise-loader!app/pages/register/register.module')('default')
+    loadChildren: () => System.import('./register/register.module')
   },
   {
     path: 'pages',
     component: Pages,
     children: [
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
-      { path: 'dashboard', loadChildren: () => require('es6-promise-loader!app/pages/dashboard/dashboard.module')('default') },
-      { path: 'editors', loadChildren: () => require('es6-promise-loader!app/pages/editors/editors.module')('default') },
-      //{ path: 'components', loadChildren: () => require('es6-promise-loader!app/pages/components/components.module')('default') }
-      { path: 'charts', loadChildren: () => require('es6-promise-loader!app/pages/charts/charts.module')('default') },
-      { path: 'ui', loadChildren: () => require('es6-promise-loader!app/pages/ui/ui.module')('default') },
-      { path: 'forms', loadChildren: () => require('es6-promise-loader!app/pages/forms/forms.module')('default') },
-      { path: 'tables', loadChildren: () => require('es6-promise-loader!app/pages/tables/tables.module')('default') },
-      { path: 'maps', loadChildren: () => require('es6-promise-loader!app/pages/maps/maps.module')('default') }
+      { path: 'dashboard', loadChildren: () => System.import('./dashboard/dashboard.module') },
+      { path: 'editors', loadChildren: () => System.import('./editors/editors.module') },
+      //{ path: 'components', loadChildren: () => System.import('./components/components.module') }
+      { path: 'charts', loadChildren: () => System.import('./charts/charts.module') },
+      { path: 'ui', loadChildren: () => System.import('./ui/ui.module') },
+      { path: 'forms', loadChildren: () => System.import('./forms/forms.module') },
+      { path: 'tables', loadChildren: () => System.import('./tables/tables.module') },
+      { path: 'maps', loadChildren: () => System.import('./maps/maps.module') }
     ]
   }
 ];

src/app/pages/register/register.html

@@ -1,7 +1,7 @@
 <div class="auth-main">
   <div class="auth-block">
     <h1>Sign up to ng2-admin</h1>
-    <a [routerLink]="['/login']" class="auth-link">Already have an ng2-admin account? Sign in!</a>
+    <a routerLink="/login" class="auth-link">Already have an ng2-admin account? Sign in!</a>
 
     <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
       <div class="form-group row" [ngClass]="{'has-error': (!name.valid && name.touched), 'has-success': (name.valid && name.touched)}">

src/app/theme/components/baPageTop/baPageTop.html

@@ -1,6 +1,6 @@
 <div class="page-top clearfix" baScrollPosition maxHeight="50" (scrollChange)="scrolledChanged($event)"
      [ngClass]="{scrolled: isScrolled}">
-  <a href="#/pages/dashboard" class="al-logo clearfix"><span>ng2-</span>admin</a>
+  <a routerLink="/pages/dashboard" class="al-logo clearfix"><span>ng2-</span>admin</a>
   <a (click)="toggleMenu()" class="collapse-menu-link ion-navicon"></a>
 
   <div class="search">
@@ -13,12 +13,12 @@
       <a class="profile-toggle-link dropdown-toggle" id="user-profile-dd" data-toggle="dropdown" aria-expanded="false">
         <img src="{{ ( 'Nasta' | baProfilePicture ) }}">
       </a>
-      <div class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
+      <ul class="dropdown-menu top-dropdown-menu profile-dropdown" aria-labelledby="user-profile-dd">
         <li class="dropdown-item"><i class="dropdown-arr"></i></li>
-        <li class="dropdown-item"><a href="#/profile"><i class="fa fa-user"></i>Profile</a></li>
+        <li class="dropdown-item"><a href><i class="fa fa-user"></i>Profile</a></li>
         <li class="dropdown-item"><a href><i class="fa fa-cog"></i>Settings</a></li>
         <li class="dropdown-item"><a href class="signout"><i class="fa fa-power-off"></i>Sign out</a></li>
-      </div>
+      </ul>
     </div>
     <ba-msg-center></ba-msg-center>
   </div>

src/app/theme/nga.module.ts

@@ -1,7 +1,7 @@
 import { NgModule }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
 
 import {
   BaThemeConfig
@@ -97,7 +97,7 @@ const NGA_VALIDATORS = [
   ],
   imports: [
     CommonModule,
-    HttpModule,
+    RouterModule,
     FormsModule,
     ReactiveFormsModule,
   ],

src/custom-typings.d.ts

@@ -6,13 +6,13 @@
  npm install @types/lodash
  * If you can't find the type definition in the registry we can make an ambient/global definition in
  * this file for now. For example
- declare module "my-module" {
+ declare module 'my-module' {
  export function doesSomething(value: string): string;
  }
  * If you are using a CommonJS module that is using module.exports then you will have to write your
  * types using export = yourObjectOrFunction with a namespace above it
  * notice how we have to create a namespace that is equal to the function we're assigning the export to
- declare module "jwt-decode" {
+ declare module 'jwt-decode' {
  function jwtDecode(token: string): any;
  namespace jwtDecode {}
  export = jwtDecode;
@@ -40,15 +40,22 @@ declare var Chart:any;
 declare var Chartist:any;
 
 // support NodeJS modules without type definitions
-declare module "*";
+declare module '*';
 
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
 declare var ENV: string;
 declare var HMR: boolean;
+declare var System: SystemJS;
+
+interface SystemJS {
+  import: (path?: string) => Promise<any>;
+}
 
 interface GlobalEnvironment {
   ENV;
   HMR;
+  SystemJS: SystemJS;
+  System: SystemJS;
 }
 
 interface Es6PromiseLoader {