feat(rc5): update to angular rc.5

- NgaModule - module wrapper for all ng2-admin custom features
- Ng Module per page
- async components load
- menu moved (again) to a separate file (as now each module has its own route file)
- no need to import Ba* directives into the pages which have NgaModule in the import statement

config/webpack.common.js

@@ -111,11 +111,8 @@ module.exports = {
         loader: 'source-map-loader',
         exclude: [
           // these packages have problems with their sourcemaps
-          helpers.root('node_modules/rxjs'),
-          helpers.root('node_modules/@angular'),
-          helpers.root('node_modules/@ngrx'),
           helpers.root('node_modules/ng2-bootstrap'),
-          helpers.root('node_modules/ng2-branchy')
+          helpers.root('node_modules/ng2-tree')
         ]
       }
 
@@ -133,12 +130,14 @@ module.exports = {
 
       /*
        * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+       * Replace templateUrl and stylesUrl with require()
        *
        * See: https://github.com/s-panferov/awesome-typescript-loader
+       * See: https://github.com/TheLarkInn/angular2-template-loader
        */
       {
         test: /\.ts$/,
-        loader: 'awesome-typescript-loader',
+        loaders: ['awesome-typescript-loader', 'angular2-template-loader', '@angularclass/hmr-loader'],
         exclude: [/\.(spec|e2e)\.ts$/]
       },
 
@@ -195,8 +194,14 @@ module.exports = {
         test: /\.html$/,
         loader: 'raw-loader',
         exclude: [helpers.root('src/index.html')]
-      }
+      },
 
+      /* File loader for supporting images, for example, in CSS files.
+       */
+      {
+        test: /\.(jpg|png|gif)$/,
+        loader: 'file'
+      }
     ]
 
   },
@@ -298,6 +303,7 @@ module.exports = {
     new HtmlElementsPlugin({
       headTags: require('./head-config.common')
     })
+
   ],
 
   /*
@@ -309,6 +315,7 @@ module.exports = {
   node: {
     global: 'window',
     crypto: 'empty',
+    process: true,
     module: false,
     clearImmediate: false,
     setImmediate: false

config/webpack.dev.js

@@ -15,10 +15,13 @@ const DefinePlugin = require('webpack/lib/DefinePlugin');
  * Webpack Constants
  */
 const ENV = process.env.ENV = process.env.NODE_ENV = 'development';
+const HOST = process.env.HOST || 'localhost';
+const PORT = process.env.PORT || 3000;
+
 const HMR = helpers.hasProcessFlag('hot');
 const METADATA = webpackMerge(commonConfig.metadata, {
-  host: 'localhost',
-  port: 3000,
+  host: HOST,
+  port: PORT,
   ENV: ENV,
   HMR: HMR
 });

package.json

@@ -6,15 +6,19 @@
   "homepage": "http://akveo.github.io/ng2-admin/",
   "license": "MIT",
   "dependencies": {
-    "@angular/common": "2.0.0-rc.4",
-    "@angular/compiler": "2.0.0-rc.4",
-    "@angular/core": "2.0.0-rc.4",
-    "@angular/forms": "^0.2.0",
-    "@angular/http": "2.0.0-rc.4",
-    "@angular/platform-browser": "2.0.0-rc.4",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
-    "@angular/platform-server": "2.0.0-rc.4",
-    "@angular/router": "3.0.0-beta.2",
+    "@angularclass/webpack-toolkit": "^1.3.3",
+    "@angularclass/request-idle-callback": "^1.0.7",
+    "@angularclass/conventions-loader": "^1.0.2",
+    "angular2-template-loader": "^0.4.0",
+    "@angular/http": "2.0.0-rc.5",
+    "@angular/common": "2.0.0-rc.5",
+    "@angular/compiler": "2.0.0-rc.5",
+    "@angular/core": "2.0.0-rc.5",
+    "@angular/forms": "^0.3.0",
+    "@angular/platform-browser": "2.0.0-rc.5",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
+    "@angular/platform-server": "2.0.0-rc.5",
+    "@angular/router": "github:gdi2290/router-builds",
     "amcharts3": "github:amcharts/amcharts3",
     "ammap3": "github:amcharts/ammap3",
     "animate.css": "^3.5.1",
@@ -39,16 +43,18 @@
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
     "ng2-bootstrap": "^1.0.20",
-    "ng2-branchy": "^0.0.2-5",
-    "ng2-ckeditor": "^1.0.4",
+    "ng2-tree": "^0.0.2-7",
+    "ng2-ckeditor": "^1.0.6",
     "ng2-smart-table": "^0.1.6",
     "ng2-uploader": "0.5.6",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.6",
     "tether": "^1.2.4",
-    "zone.js": "~0.6.12"
+    "zone.js": "~0.6.17"
   },
   "devDependencies": {
+    "@angularclass/hmr": "^1.0.1",
+    "@angularclass/hmr-loader": "^1.0.1",
     "@types/core-js": "^0.9.28",
     "@types/hammerjs": "^2.0.28",
     "@types/node": "^4.0.29",
@@ -73,8 +79,8 @@
     "style-loader": "^0.13.1",
     "raw-loader": "0.5.1",
     "source-map-loader": "^0.1.5",
+    "string-replace-loader": "^1.0.3",
     "imports-loader": "^0.6.5",
-    "istanbul-instrumenter-loader": "^0.2.0",
     "json-loader": "^0.5.4",
     "es6-promise-loader": "^1.0.1",
     "css-loader": "^0.23.1",
@@ -124,7 +130,7 @@
     "server:prod": "http-server dist --cors",
     "webdriver:update": "npm run webdriver-manager update",
     "webdriver:start": "npm run webdriver-manager start",
-    "lint": "npm run tslint 'src/**/*.ts'",
+    "lint": "npm run tslint \"src/**/*.ts\"",
     "pree2e": "npm run webdriver:update -- --standalone",
     "pretest": "npm run lint",
     "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",

src/app/app.component.ts

@@ -1,10 +1,10 @@
 import './app.loader.ts';
-import {Component, ViewEncapsulation} from "@angular/core";
-import {AppState} from "./app.state";
-import {BaThemeConfigProvider, BaThemeConfig} from "./theme";
-import {BaThemeRun} from "./theme/directives";
-import {BaImageLoaderService, BaThemePreloader, BaThemeSpinner} from "./theme/services";
-import {layoutPaths} from "./theme/theme.constants";
+import { Component, ViewEncapsulation } from '@angular/core';
+import { GlobalState } from './global.state';
+import { BaThemeConfigProvider, BaThemeConfig } from './theme';
+import { BaThemeRun } from './theme/directives';
+import { BaImageLoaderService, BaThemePreloader, BaThemeSpinner } from './theme/services';
+import { layoutPaths } from './theme/theme.constants';
 
 /*
  * App Component
@@ -26,9 +26,12 @@ import {layoutPaths} from "./theme/theme.constants";
 })
 export class App {
 
-  isMenuCollapsed:boolean = false;
+  isMenuCollapsed: boolean = false;
 
-  constructor(private _state:AppState, private _imageLoader:BaImageLoaderService, private _spinner:BaThemeSpinner, private _config:BaThemeConfig) {
+  constructor(private _state: GlobalState,
+              private _imageLoader: BaImageLoaderService,
+              private _spinner: BaThemeSpinner) {
+    
     this._loadImages();
 
     this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
@@ -36,14 +39,14 @@ export class App {
     });
   }
 
-  public ngAfterViewInit():void {
+  public ngAfterViewInit(): void {
     // hide spinner once all loaders are completed
     BaThemePreloader.load().then((values) => {
       this._spinner.hide();
     });
   }
 
-  private _loadImages():void {
+  private _loadImages(): void {
     // register some loaders
     BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'sky-bg.jpg'));
   }

src/app/app.menu.ts

@@ -0,0 +1,5 @@
+import { PAGES_MENU } from './pages/pages.menu';
+
+export const MENU = [
+  ...PAGES_MENU
+];

src/app/app.module.ts

@@ -0,0 +1,79 @@
+import { NgModule, ApplicationRef } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
+
+/*
+ * Platform and Environment providers/directives/pipes
+ */
+import { ENV_PROVIDERS } from './environment';
+import { routing } from './app.routing';
+
+// App is our top level component
+import { App } from './app.component';
+import { AppState } from './app.service';
+import { GlobalState } from './global.state';
+import { NgaModule } from './theme/nga.module';
+import { PagesModule } from './pages/pages.module';
+
+// Application wide providers
+const APP_PROVIDERS = [
+  AppState,
+  GlobalState
+];
+
+/**
+ * `AppModule` is the main entry point into Angular2's bootstraping process
+ */
+@NgModule({
+  bootstrap: [App],
+  declarations: [
+    App
+  ],
+  imports: [ // import Angular's modules
+    BrowserModule,
+    HttpModule,
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule,
+    NgaModule,
+    PagesModule,
+    routing
+  ],
+  providers: [ // expose our Services and Providers into Angular's dependency injection
+    ENV_PROVIDERS,
+    APP_PROVIDERS
+  ]
+})
+
+export class AppModule {
+
+  constructor(public appRef: ApplicationRef, public appState: AppState) {
+    
+  }
+
+  hmrOnInit(store) {
+    if (!store && !store.state) return;
+    console.log('HMR store', store);
+    this.appState.state = store.state;
+    delete store.state;
+  }
+
+  hmrOnDestroy(store) {
+    let cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
+    // recreate elements
+    let state = this.appState.state;
+    store.state = state;
+    store.disposeOldHosts = createNewHosts(cmpLocation);
+    // remove styles
+    removeNgStyles();
+  }
+
+  hmrAfterDestroy(store) {
+    // display new elements
+    store.disposeOldHosts();
+    delete store.disposeOldHosts;
+  }
+}

src/app/app.routes.ts

@@ -1,18 +0,0 @@
-import {provideRouter, RouterConfig} from '@angular/router';
-import {LoginRoutes} from "./pages/login/login.routes";
-import {PagesRoutes} from "./pages/pages.routes";
-import {RegisterRoutes} from "./pages/register/register.routes";
-
-export const routes:RouterConfig = [
-  ...LoginRoutes,
-  ...RegisterRoutes,
-  ...PagesRoutes,
-  {
-    path: '**',
-    redirectTo: '/pages/dashboard'
-  },
-];
-
-export const APP_ROUTER_PROVIDERS = [
-  provideRouter(routes)
-];

src/app/app.routing.ts

@@ -0,0 +1,7 @@
+import { Routes, RouterModule } from '@angular/router';
+
+export const routes: Routes = [
+  { path: '', redirectTo: 'pages', pathMatch: 'full' }
+];
+
+export const routing = RouterModule.forRoot(routes, { useHash: true });

src/app/app.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { HmrState } from 'angular2-hmr';
+
+@Injectable()
+export class AppState {
+  _state = { };
+
+  constructor() {
+  }
+
+  // already return a clone of the current state
+  get state() {
+    return this._state = this._clone(this._state);
+  }
+  // never allow mutation
+  set state(value) {
+    throw new Error('do not mutate the `.state` directly');
+  }
+
+
+  get(prop?: any) {
+    // use our state getter for the clone
+    const state = this.state;
+    return state.hasOwnProperty(prop) ? state[prop] : state;
+  }
+
+  set(prop: string, value: any) {
+    // internally mutate our state
+    return this._state[prop] = value;
+  }
+
+
+  _clone(object) {
+    // simple object clone
+    return JSON.parse(JSON.stringify( object ));
+  }
+}

src/app/environment.ts

@@ -2,7 +2,7 @@
 // Angular 2
 // rc2 workaround
 import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, ApplicationRef } from '@angular/core';
 // Environment Providers
 let PROVIDERS = [
   // common env directives
@@ -10,7 +10,7 @@ let PROVIDERS = [
 
 // Angular debug tools in the dev console
 // https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
-let _decorateComponentRef = function identity(value) { return value; };
+let _decorateModuleRef = function identity(value) { return value; };
 
 if ('production' === ENV) {
   // Production
@@ -24,12 +24,15 @@ if ('production' === ENV) {
 
 } else {
 
-  _decorateComponentRef = (cmpRef) => {
+  _decorateModuleRef = (modRef: any) => {
+    var appRef = modRef.injector.get(ApplicationRef);
+    var cmpRef = appRef.components[0];
+
     let _ng = (<any>window).ng;
     enableDebugTools(cmpRef);
     (<any>window).ng.probe = _ng.probe;
     (<any>window).ng.coreTokens = _ng.coreTokens;
-    return cmpRef;
+    return modRef;
   };
 
   // Development
@@ -40,7 +43,7 @@ if ('production' === ENV) {
 
 }
 
-export const decorateComponentRef = _decorateComponentRef;
+export const decorateModuleRef = _decorateModuleRef;
 
 export const ENV_PROVIDERS = [
   ...PROVIDERS

src/app/global.state.ts

@@ -1,13 +1,13 @@
-import {Injectable} from '@angular/core'
-import {Subject}    from 'rxjs/Subject';
+import { Injectable } from '@angular/core';
+import { Subject }    from 'rxjs/Subject';
 
 @Injectable()
-export class AppState {
+export class GlobalState {
 
   private _data = new Subject<Object>();
   private _dataStream$ = this._data.asObservable();
 
-  private _subscriptions:Map<string, Array<Function>> = new Map<string, Array<Function>>();
+  private _subscriptions: Map<string, Array<Function>> = new Map<string, Array<Function>>();
 
   constructor() {
     this._dataStream$.subscribe((data) => this._onEvent(data));
@@ -16,7 +16,7 @@ export class AppState {
   notifyDataChanged(event, value) {
 
     let current = this._data[event];
-    if (current != value) {
+    if (current !== value) {
       this._data[event] = value;
 
       this._data.next({
@@ -26,15 +26,15 @@ export class AppState {
     }
   }
 
-  subscribe(event:string, callback:Function) {
-    var subscribers = this._subscriptions.get(event) || [];
+  subscribe(event: string, callback: Function) {
+    let subscribers = this._subscriptions.get(event) || [];
     subscribers.push(callback);
 
     this._subscriptions.set(event, subscribers);
   }
 
-  _onEvent(data:any) {
-    var subscribers = this._subscriptions.get(data['event']) || [];
+  _onEvent(data: any) {
+    let subscribers = this._subscriptions.get(data['event']) || [];
 
     subscribers.forEach((callback) => {
       callback.call(null, data['data']);

src/app/index.ts

@@ -1,8 +1 @@
-// App
-import {AppState} from "./app.state";
-export * from './app.component';
-
-// Application wide providers
-export const APP_PROVIDERS = [
-  AppState
-];
+export * from './app.module';

src/app/pages/charts/charts.module.ts

@@ -0,0 +1,23 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+
+import { routing }       from './charts.routing';
+import { Charts } from './charts.component';
+import { ChartistJs } from './components/chartistJs/chartistJs.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgaModule,
+    routing
+  ],
+  declarations: [
+    Charts,
+    ChartistJs
+  ]
+})
+export default class ChartsModule {}

src/app/pages/charts/charts.routing.ts

@@ -0,0 +1,17 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Charts } from './charts.component';
+import { ChartistJs } from './components/chartistJs/chartistJs.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Charts,
+    children: [
+      { path: 'chartist-js', component: ChartistJs }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/pages/charts/components/chartistJs/chartistJs.component.ts

@@ -1,15 +1,12 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {BaCard} from '../../../../theme/components';
 
 import {ChartistJsService} from './chartistJs.service';
-import {BaChartistChart} from '../../../../theme/components';
 
 @Component({
   selector: 'chartist-js',
   encapsulation: ViewEncapsulation.None,
   pipes: [],
   providers: [ChartistJsService],
-  directives: [BaCard, BaChartistChart],
   styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')],
   template: require('./chartistJs.html'),
 })

src/app/pages/components/components.module.ts

@@ -0,0 +1,23 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+
+import { routing }       from './components.routing';
+import { Components } from './components.component';
+import { TreeView } from './components/treeView/treeView.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgaModule,
+    routing
+  ],
+  declarations: [
+    Components,
+    TreeView
+  ]
+})
+export default class ComponentsModule {}

src/app/pages/components/components.routing.ts

@@ -0,0 +1,17 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Components } from './components.component';
+import { TreeView } from './components/treeView/treeView.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Components,
+    children: [
+      { path: 'treeview', component: TreeView }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/pages/components/components/treeView/treeView.component.ts

@@ -1,17 +1,14 @@
 import {Component} from '@angular/core';
-import {BranchyComponent, TreeModel} from 'ng2-branchy';
-import {BaCard} from '../../../../theme/components/baCard';
+import {TreeComponent, TreeModel} from 'ng2-tree';
 
 @Component({
   selector: 'tree-view',
-  directives: [BranchyComponent, BaCard],
+  directives: [TreeComponent],
   template: require('./treeView.html'),
 })
 
 export class TreeView {
 
-  constructor() {
-  }
   private tree: TreeModel = {
     value: 'Programming languages by programming paradigm',
     children: [
@@ -34,4 +31,7 @@ export class TreeView {
     ]
   };
 
+  constructor() {
+  }
+
 }

src/app/pages/components/components/treeView/treeView.html

@@ -1,5 +1,5 @@
 <div class="col-md-6">
   <ba-card title="basic">
-    <branchy id="tree-view" [tree]="tree"></branchy>
+    <tree id="tree-view" [tree]="tree"></tree>
   </ba-card>
 </div>

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

@@ -1,6 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BaFullCalendar} from '../../../theme/components';
 import {CalendarService} from './calendar.service';
 
 @Component({
@@ -8,7 +7,6 @@ import {CalendarService} from './calendar.service';
   encapsulation: ViewEncapsulation.None,
   styles: [require('./calendar.scss')],
   template: require('./calendar.html'),
-  directives: [BaFullCalendar],
   providers: [CalendarService]
 })
 export class Calendar {

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

@@ -1,19 +1,7 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {PopularApp} from './popularApp';
-import {PieChart} from './pieChart';
-import {TrafficChart} from './trafficChart';
-import {UsersMap} from './usersMap';
-import {LineChart} from './lineChart';
-import {Feed} from './feed';
-import {Todo} from './todo';
-import {Calendar} from './calendar';
-import {BaCard} from '../../theme/components';
-
 @Component({
   selector: 'dashboard',
-  pipes: [],
-  directives: [PopularApp, PieChart, TrafficChart, UsersMap, LineChart, Feed, Todo, Calendar, BaCard],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./dashboard.scss')],
   template: require('./dashboard.html')

src/app/pages/dashboard/dashboard.module.ts

@@ -0,0 +1,37 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+
+import { Dashboard } from './dashboard.component';
+import { routing }       from './dashboard.routing';
+
+import { PopularApp } from './popularApp';
+import { PieChart } from './pieChart';
+import { TrafficChart } from './trafficChart';
+import { UsersMap } from './usersMap';
+import { LineChart } from './lineChart';
+import { Feed } from './feed';
+import { Todo } from './todo';
+import { Calendar } from './calendar';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgaModule,
+    routing
+  ],
+  declarations: [
+    PopularApp,
+    PieChart,
+    TrafficChart,
+    UsersMap,
+    LineChart,
+    Feed,
+    Todo,
+    Calendar,
+    Dashboard
+  ]
+})
+export default class DashboardModule {}

src/app/pages/dashboard/dashboard.routing.ts

@@ -0,0 +1,16 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Dashboard } from './dashboard.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Dashboard,
+    children: [
+      //{ path: 'treeview', component: TreeViewComponent }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

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

@@ -1,13 +1,11 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
 import {LineChartService} from './lineChart.service';
-import {BaAmChart} from '../../../theme/components';
 
 @Component({
   selector: 'line-chart',
   encapsulation: ViewEncapsulation.None,
   providers: [LineChartService],
-  directives: [BaAmChart],
   styles: [require('./lineChart.scss')],
   template: require('./lineChart.html')
 })

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

@@ -1,6 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BaCard} from '../../../theme/components';
 import {PieChartService} from './pieChart.service';
 
 import './pieChart.loader.ts';
@@ -8,7 +7,6 @@ import './pieChart.loader.ts';
 @Component({
   selector: 'pie-chart',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard],
   providers: [PieChartService],
   styles: [require('./pieChart.scss')],
   template: require('./pieChart.html')

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

@@ -1,13 +1,11 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
 import {UsersMapService} from './usersMap.service';
-import {BaAmChart} from '../../../theme/components';
 
 @Component({
   selector: 'users-map',
   encapsulation: ViewEncapsulation.None,
   providers: [UsersMapService],
-  directives: [BaAmChart],
   styles: [require('./usersMap.scss')],
   template: require('./usersMap.html')
 })

src/app/pages/editors/components/ckeditor/ckeditor.component.ts

@@ -1,12 +1,11 @@
 import {Component} from '@angular/core';
 import {CKEditor} from 'ng2-ckeditor';
-import {BaCard} from '../../../../theme/components/baCard';
 
 import './ckeditor.loader.ts';
 
 @Component({
-  selector: 'ckeditor',
-  directives: [CKEditor, BaCard],
+  selector: 'ckeditor-component',
+  directives: [CKEditor],
   template: require('./ckeditor.html')
 })
 

src/app/pages/editors/editors.module.ts

@@ -0,0 +1,23 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+
+import { routing }       from './editors.routing';
+import { Editors } from './editors.component';
+import { Ckeditor } from './components/ckeditor/ckeditor.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgaModule,
+    routing
+  ],
+  declarations: [
+    Editors,
+    Ckeditor
+  ]
+})
+export default class EditorsModule {}

src/app/pages/editors/editors.routing.ts

@@ -0,0 +1,17 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Editors } from './editors.component';
+import { Ckeditor } from './components/ckeditor/ckeditor.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Editors,
+    children: [
+      { path: 'ckeditor', component: Ckeditor }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts

@@ -1,10 +1,8 @@
 import {Component} from '@angular/core';
-import {BaMultiCheckbox, BaCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'checkbox-inputs',
   template: require('./checkboxInputs.html'),
-  directives: [BaMultiCheckbox, BaCheckbox]
 })
 export class CheckboxInputs {
   public checkboxModel = [{

src/app/pages/forms/components/inputs/components/validationInputs/validationInputs.component.ts

@@ -1,9 +1,7 @@
 import {Component} from '@angular/core';
-import {BaMultiCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'validation-inputs',
-  directives: [BaMultiCheckbox],
   template: require('./validationInputs.html'),
 })
 export class ValidationInputs {
@@ -27,7 +25,7 @@ export class ValidationInputs {
     label: 'name',
     baCheckboxClass: 'class'
   };
-  
+
   constructor() {
   }
 }

src/app/pages/forms/components/inputs/inputs.component.ts

@@ -1,6 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BaCard} from '../../../../theme/components';
 
 import {StandardInputs} from './components/standardInputs';
 import {ValidationInputs} from './components/validationInputs';
@@ -12,7 +11,7 @@ import {Rating} from './components/ratinginputs';
 @Component({
   selector: 'inputs',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, StandardInputs, ValidationInputs, GroupInputs, CheckboxInputs, Rating],
+  directives: [StandardInputs, ValidationInputs, GroupInputs, CheckboxInputs, Rating],
   template: require('./inputs.html'),
 })
 export class Inputs {

src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts

@@ -1,9 +1,7 @@
 import {Component} from '@angular/core';
-import {BaCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'basic-form',
-  directives: [BaCheckbox],
   template: require('./basicForm.html'),
 })
 export class BasicForm {

src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts

@@ -1,9 +1,7 @@
 import {Component} from '@angular/core';
-import {BaCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'horizontal-form',
-  directives: [BaCheckbox],
   template: require('./horizontalForm.html'),
 })
 export class HorizontalForm {

src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts

@@ -1,13 +1,11 @@
 import {Component} from '@angular/core';
-import {BaCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'inline-form',
-  directives: [BaCheckbox],
   template: require('./inlineForm.html'),
 })
 export class InlineForm {
-  
+
   constructor() {
   }
 }

src/app/pages/forms/components/layouts/layouts.component.ts

@@ -1,18 +1,16 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BaCard} from '../../../../theme/components';
 
 import {InlineForm} from './components/inlineForm';
 import {BlockForm} from './components/blockForm';
 import {HorizontalForm} from './components/horizontalForm';
 import {BasicForm} from './components/basicForm';
 import {WithoutLabelsForm} from './components/withoutLabelsForm';
-import {BaPictureUploader} from '../../../../theme/components';
 
 @Component({
   selector: 'layouts',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, InlineForm, BlockForm, HorizontalForm, BasicForm, WithoutLabelsForm, BaPictureUploader],
+  directives: [InlineForm, BlockForm, HorizontalForm, BasicForm, WithoutLabelsForm],
   styles: [],
   template: require('./layouts.html'),
 })

src/app/pages/forms/forms.module.ts

@@ -0,0 +1,25 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule as AngularFormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+
+import { routing }       from './forms.routing';
+import { Forms } from './forms.component';
+import { Inputs } from './components/inputs';
+import { Layouts } from './components/layouts';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AngularFormsModule,
+    NgaModule,
+    routing
+  ],
+  declarations: [
+    Layouts,
+    Inputs,
+    Forms
+  ]
+})
+export default class FormsModule {}

src/app/pages/forms/forms.routing.ts

@@ -0,0 +1,19 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Forms } from './forms.component';
+import { Inputs } from './components/inputs/inputs.component';
+import { Layouts } from './components/layouts/layouts.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Forms,
+    children: [
+      { path: 'inputs', component: Inputs },
+      { path: 'layouts', component: Layouts }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/pages/login/login.module.ts

@@ -0,0 +1,22 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+
+import { Login } from './login.component';
+import { routing }       from './login.routing';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule,
+    NgaModule,
+    routing
+  ],
+  declarations: [
+    Login
+  ]
+})
+export default class LoginModule {}

src/app/pages/login/login.routes.ts

@@ -1,10 +0,0 @@
-import {RouterConfig} from '@angular/router';
-import {Login} from './login.component';
-
-//noinspection TypeScriptValidateTypes
-export const LoginRoutes: RouterConfig = [
-  {
-    path: 'login',
-    component: Login
-  }
-];

src/app/pages/login/login.routing.ts

@@ -0,0 +1,13 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Login } from './login.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Login
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts

@@ -1,15 +1,12 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {BaCard} from '../../../../theme/components';
-import {BaAmChart} from '../../../../theme/components';
 
-import {BubbleMapsService} from "./bubbleMaps.service";
+import {BubbleMapsService} from './bubbleMaps.service';
 
 @Component({
   selector: 'bubble-maps',
   pipes: [],
   providers: [BubbleMapsService],
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, BaAmChart],
   styles: [require('./bubbleMaps.scss')],
   template: require('./bubbleMaps.html'),
 })

src/app/pages/maps/components/googleMaps/googleMaps.component.ts

@@ -1,12 +1,10 @@
 import {Component, ElementRef} from '@angular/core';
-import {BaCard} from '../../../../theme/components';
 import {GoogleMapsLoader} from './googleMaps.loader';
 
 @Component({
   selector: 'google-maps',
   pipes: [],
   providers: [],
-  directives: [BaCard],
   styles: [require('./googleMaps.scss')],
   template: require('./googleMaps.html'),
 })

src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts

@@ -1,5 +1,4 @@
 import {Component, ViewEncapsulation, ElementRef} from '@angular/core';
-import {BaCard} from '../../../../theme/components';
 
 import './leafletMaps.loader';
 
@@ -9,8 +8,7 @@ import './leafletMaps.loader';
   providers: [],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./leafletMaps.scss')],
-  template: require('./leafletMaps.html'),
-  directives: [BaCard],
+  template: require('./leafletMaps.html')
 })
 export class LeafletMaps {
 

src/app/pages/maps/components/lineMaps/lineMaps.component.ts

@@ -1,5 +1,4 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {BaCard, BaAmChart} from '../../../../theme/components';
 
 import {LineMapsService} from './lineMaps.service';
 
@@ -9,8 +8,7 @@ import {LineMapsService} from './lineMaps.service';
   providers: [LineMapsService],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./lineMaps.scss')],
-  template: require('./lineMaps.html'),
-  directives: [BaCard, BaAmChart],
+  template: require('./lineMaps.html')
 })
 export class LineMaps {
 

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

@@ -0,0 +1,29 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+
+import { routing }       from './maps.routing';
+import { Maps } from './maps.component';
+import { BubbleMaps } from './components/bubbleMaps/bubbleMaps.component';
+import { GoogleMaps } from './components/googleMaps/googleMaps.component';
+import { LeafletMaps } from './components/leafletMaps/leafletMaps.component';
+import { LineMaps } from './components/lineMaps/lineMaps.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgaModule,
+    routing
+  ],
+  declarations: [
+    Maps,
+    BubbleMaps,
+    GoogleMaps,
+    LeafletMaps,
+    LineMaps
+  ]
+})
+export default class MapsModule {}

src/app/pages/maps/maps.routing.ts

@@ -0,0 +1,23 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Maps } from './maps.component';
+import { BubbleMaps } from './components/bubbleMaps/bubbleMaps.component';
+import { GoogleMaps } from './components/googleMaps/googleMaps.component';
+import { LeafletMaps } from './components/leafletMaps/leafletMaps.component';
+import { LineMaps } from './components/lineMaps/lineMaps.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Maps,
+    children: [
+      { path: 'bubblemaps', component: BubbleMaps },
+      { path: 'googlemaps', component: GoogleMaps },
+      { path: 'leafletmaps', component: LeafletMaps },
+      { path: 'linemaps', component: LineMaps }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/pages/pages.component.ts

@@ -1,11 +1,8 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {BaPageTop, BaContentTop, BaSidebar, BaBackTop} from '../theme/components';
-
 @Component({
   selector: 'pages',
   encapsulation: ViewEncapsulation.None,
   styles: [],
-  directives: [BaPageTop, BaSidebar, BaContentTop, BaBackTop],
   template: `
     <ba-sidebar></ba-sidebar>
     <ba-page-top></ba-page-top>

src/app/pages/pages.menu.ts

@@ -1,38 +1,9 @@
-import {RouterConfig} from '@angular/router';
-import {Dashboard} from './dashboard/dashboard.component';
-import {Charts} from './charts/charts.component';
-import {ChartistJs} from './charts/components/chartistJs/chartistJs.component';
-import {Pages} from './pages.component';
-import {Ui} from './ui/ui.component';
-import {Typography} from './ui/components/typography/typography.component';
-import {Buttons} from './ui/components/buttons/buttons.component';
-import {Icons} from './ui/components/incons/icons.component';
-import {Grid} from './ui/components/grid/grid.component';
-import {Forms} from './forms/forms.component';
-import {Inputs} from './forms/components/inputs/inputs.component';
-import {Layouts} from './forms/components/layouts/layouts.component';
-import {BasicTables} from './tables/components/basicTables/basicTables.component';
-import {Tables} from './tables/tables.component';
-import {Maps} from './maps/maps.component';
-import {GoogleMaps} from './maps/components/googleMaps/googleMaps.component';
-import {LeafletMaps} from './maps/components/leafletMaps/leafletMaps.component';
-import {BubbleMaps} from './maps/components/bubbleMaps/bubbleMaps.component';
-import {LineMaps} from './maps/components/lineMaps/lineMaps.component';
-import {Editors} from './editors/editors.component';
-import {Ckeditor} from './editors/components/ckeditor/ckeditor.component';
-import {Components} from './components/components.component';
-import {TreeView} from './components/components/treeView/treeView.component';
-import {SmartTables} from './tables/components/smartTables/smartTables.component';
-
-//noinspection TypeScriptValidateTypes
-export const PagesRoutes:RouterConfig = [
+export const PAGES_MENU = [
   {
     path: 'pages',
-    component: Pages,
     children: [
       {
         path: 'dashboard',
-        component: Dashboard,
         data: {
           menu: {
             title: 'Dashboard',
@@ -45,7 +16,6 @@ export const PagesRoutes:RouterConfig = [
       },
       {
         path: 'editors',
-        component: Editors,
         data: {
           menu: {
             title: 'Editors',
@@ -58,7 +28,6 @@ export const PagesRoutes:RouterConfig = [
         children: [
           {
             path: 'ckeditor',
-            component: Ckeditor,
             data: {
               menu: {
                 title: 'CKEditor',
@@ -69,7 +38,6 @@ export const PagesRoutes:RouterConfig = [
       },
       {
         path: 'components',
-        component: Components,
         data: {
           menu: {
             title: 'Components',
@@ -82,7 +50,6 @@ export const PagesRoutes:RouterConfig = [
         children: [
           {
             path: 'treeview',
-            component: TreeView,
             data: {
               menu: {
                 title: 'Tree View',
@@ -93,7 +60,6 @@ export const PagesRoutes:RouterConfig = [
       },
       {
         path: 'charts',
-        component: Charts,
         data: {
           menu: {
             title: 'Charts',
@@ -106,7 +72,6 @@ export const PagesRoutes:RouterConfig = [
         children: [
           {
             path: 'chartist-js',
-            component: ChartistJs,
             data: {
               menu: {
                 title: 'Chartist.Js',
@@ -117,7 +82,6 @@ export const PagesRoutes:RouterConfig = [
       },
       {
         path: 'ui',
-        component: Ui,
         data: {
           menu: {
             title: 'UI Features',
@@ -130,7 +94,6 @@ export const PagesRoutes:RouterConfig = [
         children: [
           {
             path: 'typography',
-            component: Typography,
             data: {
               menu: {
                 title: 'Typography',
@@ -139,7 +102,6 @@ export const PagesRoutes:RouterConfig = [
           },
           {
             path: 'buttons',
-            component: Buttons,
             data: {
               menu: {
                 title: 'Buttons',
@@ -148,7 +110,6 @@ export const PagesRoutes:RouterConfig = [
           },
           {
             path: 'icons',
-            component: Icons,
             data: {
               menu: {
                 title: 'Icons',
@@ -157,7 +118,6 @@ export const PagesRoutes:RouterConfig = [
           },
           {
             path: 'grid',
-            component: Grid,
             data: {
               menu: {
                 title: 'Grid',
@@ -168,7 +128,6 @@ export const PagesRoutes:RouterConfig = [
       },
       {
         path: 'forms',
-        component: Forms,
         data: {
           menu: {
             title: 'Form Elements',
@@ -181,7 +140,6 @@ export const PagesRoutes:RouterConfig = [
         children: [
           {
             path: 'inputs',
-            component: Inputs,
             data: {
               menu: {
                 title: 'Form Inputs',
@@ -190,7 +148,6 @@ export const PagesRoutes:RouterConfig = [
           },
           {
             path: 'layouts',
-            component: Layouts,
             data: {
               menu: {
                 title: 'Form Layouts',
@@ -201,7 +158,6 @@ export const PagesRoutes:RouterConfig = [
       },
       {
         path: 'tables',
-        component: Tables,
         data: {
           menu: {
             title: 'Tables',
@@ -214,7 +170,6 @@ export const PagesRoutes:RouterConfig = [
         children: [
           {
             path: 'basictables',
-            component: BasicTables,
             data: {
               menu: {
                 title: 'Basic Tables',
@@ -223,7 +178,6 @@ export const PagesRoutes:RouterConfig = [
           },
           {
             path: 'smarttables',
-            component: SmartTables,
             data: {
               menu: {
                 title: 'Smart Tables',
@@ -234,7 +188,6 @@ export const PagesRoutes:RouterConfig = [
       },
       {
         path: 'maps',
-        component: Maps,
         data: {
           menu: {
             title: 'Maps',
@@ -247,7 +200,6 @@ export const PagesRoutes:RouterConfig = [
         children: [
           {
             path: 'googlemaps',
-            component: GoogleMaps,
             data: {
               menu: {
                 title: 'Google Maps',
@@ -256,7 +208,6 @@ export const PagesRoutes:RouterConfig = [
           },
           {
             path: 'leafletmaps',
-            component: LeafletMaps,
             data: {
               menu: {
                 title: 'Leaflet Maps',
@@ -265,7 +216,6 @@ export const PagesRoutes:RouterConfig = [
           },
           {
             path: 'bubblemaps',
-            component: BubbleMaps,
             data: {
               menu: {
                 title: 'Bubble Maps',
@@ -274,7 +224,6 @@ export const PagesRoutes:RouterConfig = [
           },
           {
             path: 'linemaps',
-            component: LineMaps,
             data: {
               menu: {
                 title: 'Line Maps',

src/app/pages/pages.module.ts

@@ -0,0 +1,14 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+
+import { routing }       from './pages.routing';
+import { NgaModule } from '../theme/nga.module';
+
+import { Pages } from './pages.component';
+
+@NgModule({
+  imports: [CommonModule, NgaModule, routing],
+  declarations: [Pages]
+})
+export class PagesModule {
+}

src/app/pages/pages.routing.ts

@@ -0,0 +1,30 @@
+import { Routes, RouterModule }  from '@angular/router';
+import { Pages } from './pages.component';
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: 'login',
+    loadChildren: () => require('es6-promise-loader!app/pages/login/login.module')('default')
+  },
+  {
+    path: 'register',
+    loadChildren: () => require('es6-promise-loader!app/pages/register/register.module')('default')
+  },
+  {
+    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') }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/pages/register/register.module.ts

@@ -0,0 +1,22 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+
+import { Register } from './register.component';
+import { routing }       from './register.routing';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule,
+    NgaModule,
+    routing
+  ],
+  declarations: [
+    Register
+  ]
+})
+export default class RegisterModule {}

src/app/pages/register/register.routes.ts

@@ -1,10 +0,0 @@
-import {RouterConfig} from '@angular/router';
-import {Register} from './register.component';
-
-//noinspection TypeScriptValidateTypes
-export const RegisterRoutes: RouterConfig = [
-  {
-    path: 'register',
-    component: Register
-  }
-];

src/app/pages/register/register.routing.ts

@@ -0,0 +1,13 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Register } from './register.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Register
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/pages/tables/components/basicTables/basicTables.component.ts

@@ -1,7 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
 import {BasicTablesService} from './basicTables.service';
-import {BaCard} from '../../../../theme/components';
 import {HoverTable} from './components/hoverTable';
 import {BorderedTable} from './components/borderedTable';
 import {CondensedTable} from './components/condensedTable';
@@ -12,7 +11,7 @@ import {ResponsiveTable} from './components/responsiveTable';
 @Component({
   selector: 'basic-tables',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, HoverTable, BorderedTable, CondensedTable, StripedTable, ContextualTable, ResponsiveTable],
+  directives: [HoverTable, BorderedTable, CondensedTable, StripedTable, ContextualTable, ResponsiveTable],
   styles: [require('./basicTables.scss')],
   template: require('./basicTables.html'),
   providers: [BasicTablesService]

src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts

@@ -1,12 +1,10 @@
 import {Component} from '@angular/core';
 
-import {BaAppPicturePipe} from '../../../../../../theme/pipes';
 import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'bordered-table',
   template: require('./borderedTable.html'),
-  pipes: [BaAppPicturePipe]
 })
 export class BorderedTable {
 

src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts

@@ -1,12 +1,10 @@
 import {Component} from '@angular/core';
 
-import {BaAppPicturePipe} from '../../../../../../theme/pipes';
 import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'condensed-table',
-  template: require('./condensedTable.html'),
-  pipes: [BaAppPicturePipe]
+  template: require('./condensedTable.html')
 })
 export class CondensedTable {
 

src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts

@@ -1,12 +1,10 @@
 import {Component} from '@angular/core';
 
-import {BaAppPicturePipe} from '../../../../../../theme/pipes';
 import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'hover-table',
-  template: require('./hoverTable.html'),
-  pipes: [BaAppPicturePipe]
+  template: require('./hoverTable.html')
 })
 export class HoverTable {
 

src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts

@@ -1,12 +1,10 @@
 import {Component} from '@angular/core';
 
-import {BaAppPicturePipe} from '../../../../../../theme/pipes';
 import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'striped-table',
-  template: require('./stripedTable.html'),
-  pipes: [BaAppPicturePipe]
+  template: require('./stripedTable.html')
 })
 export class StripedTable {
 

src/app/pages/tables/components/smartTables/smartTables.component.ts

@@ -1,6 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BaCard} from '../../../../theme/components';
 
 import {NG2_SMART_TABLE_DIRECTIVES, LocalDataSource} from 'ng2-smart-table';
 import { SmartTablesService } from './smartTables.service';
@@ -8,7 +7,7 @@ import { SmartTablesService } from './smartTables.service';
 @Component({
   selector: 'basic-tables',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard, NG2_SMART_TABLE_DIRECTIVES],
+  directives: [NG2_SMART_TABLE_DIRECTIVES],
   styles: [require('./smartTables.scss')],
   template: require('./smartTables.html'),
   providers: [SmartTablesService]

src/app/pages/tables/tables.module.ts

@@ -0,0 +1,25 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+
+import { routing }       from './tables.routing';
+import { Tables } from './tables.component';
+import { BasicTables } from './components/basicTables/basicTables.component';
+import { SmartTables } from './components/smartTables/smartTables.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgaModule,
+    routing
+  ],
+  declarations: [
+    Tables,
+    BasicTables,
+    SmartTables
+  ]
+})
+export default class TablesModule {}

src/app/pages/tables/tables.routing.ts

@@ -0,0 +1,19 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Tables } from './tables.component';
+import { BasicTables } from './components/basicTables/basicTables.component';
+import { SmartTables } from './components/smartTables/smartTables.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Tables,
+    children: [
+      { path: 'basictables', component: BasicTables },
+      { path: 'smarttables', component: SmartTables }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/pages/ui/components/buttons/buttons.component.ts

@@ -1,6 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BaCard} from '../../../../theme/components';
 import {FlatButtons} from './components/flatButtons';
 import {RaisedButtons} from './components/raisedButtons';
 import {SizedButtons} from './components/sizedButtons';
@@ -14,7 +13,6 @@ import {GroupButtons} from './components/groupButtons';
   selector: 'buttons',
   encapsulation: ViewEncapsulation.None,
   directives: [
-    BaCard,
     FlatButtons,
     RaisedButtons,
     SizedButtons,

src/app/pages/ui/components/grid/grid.component.ts

@@ -1,11 +1,8 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BaCard} from '../../../../theme/components';
-
 @Component({
   selector: 'grid',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard],
   styles: [require('./grid.scss')],
   template: require('./grid.html'),
 })

src/app/pages/ui/components/icons/icons.component.ts

@@ -1,14 +1,10 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BaCard} from '../../../../theme/components';
-import {BaKameleonPicturePipe} from '../../../../theme/pipes';
 import {IconsService} from './icons.service';
 
 @Component({
   selector: 'icons',
   encapsulation: ViewEncapsulation.None,
-  directives: [BaCard],
-  pipes: [BaKameleonPicturePipe],
   providers: [IconsService],
   styles: [require('./icons.scss')],
   template: require('./icons.html'),

src/app/pages/ui/components/typography/typography.component.ts

@@ -1,13 +1,8 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
 
-import {BaAppPicturePipe} from '../../../../theme/pipes';
-import {BaCard} from '../../../../theme/components';
-
 @Component({
   selector: 'typography',
-  pipes: [BaAppPicturePipe],
-  directives: [BaCard],
   providers: [],
   styles: [],
   template: require('./typography.html'),

src/app/pages/ui/ui.module.ts

@@ -0,0 +1,29 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+
+import { routing }       from './ui.routing';
+import { Ui } from './ui.component';
+import { Buttons } from './components/buttons/buttons.component';
+import { Grid } from './components/grid/grid.component';
+import { Icons } from './components/icons/icons.component';
+import { Typography } from './components/typography/typography.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgaModule,
+    routing
+  ],
+  declarations: [
+    Buttons,
+    Grid,
+    Icons,
+    Typography,
+    Ui
+  ]
+})
+export default class UiModule {}

src/app/pages/ui/ui.routing.ts

@@ -0,0 +1,23 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Ui } from './ui.component';
+import { Buttons } from './components/buttons/buttons.component';
+import { Grid } from './components/grid/grid.component';
+import { Icons } from './components/icons/icons.component';
+import { Typography } from './components/typography/typography.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Ui,
+    children: [
+      { path: 'buttons', component: Buttons },
+      { path: 'grid', component: Grid },
+      { path: 'icons', component: Icons },
+      { path: 'typography', component: Typography }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);

src/app/theme/components/baContentTop/baContentTop.component.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 
-import {AppState} from "../../../app.state";
+import {GlobalState} from '../../../global.state';
 
 @Component({
   selector: 'ba-content-top',
@@ -11,7 +11,7 @@ export class BaContentTop {
 
   public activePageTitle:string = '';
 
-  constructor(private _state:AppState) {
+  constructor(private _state:GlobalState) {
     this._state.subscribe('menu.activeLink', (activeLink) => {
       if (activeLink) {
         this.activePageTitle = activeLink.title;

src/app/theme/components/baMenu/baMenu.component.ts

@@ -1,11 +1,11 @@
 import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angular/core';
-import {Router, RouterConfig, NavigationEnd} from '@angular/router';
+import {Router, Routes, NavigationEnd} from '@angular/router';
 import {Subscription} from 'rxjs/Rx';
 
 import {BaSlimScroll} from '../../../theme/directives';
 import {BaMenuService} from './baMenu.service';
 import {BaMenuItem} from './components/baMenuItem';
-import {AppState} from '../../../app.state';
+import {GlobalState} from '../../../global.state';
 
 @Component({
   selector: 'ba-menu',
@@ -17,7 +17,7 @@ import {AppState} from '../../../app.state';
 })
 export class BaMenu {
 
-  @Input() menuRoutes:RouterConfig = [];
+  @Input() menuRoutes:Routes = [];
   @Input() sidebarCollapsed:boolean = false;
   @Input() menuHeight:number;
 
@@ -30,7 +30,7 @@ export class BaMenu {
   protected _onRouteChange:Subscription;
   public outOfArea:number = -200;
 
-  constructor(private _router:Router, private _service:BaMenuService, private _state:AppState) {
+  constructor(private _router:Router, private _service:BaMenuService, private _state:GlobalState) {
     this._onRouteChange = this._router.events.subscribe((event) => {
 
       if (event instanceof NavigationEnd) {

src/app/theme/components/baMenu/baMenu.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {Router, UrlTree, RouterConfig} from '@angular/router';
+import {Router, Routes} from '@angular/router';
 
 @Injectable()
 export class BaMenuService {
@@ -9,7 +9,7 @@ export class BaMenuService {
   constructor(private _router:Router) {
   }
 
-  public convertRoutesToMenus(routes:RouterConfig):any[] {
+  public convertRoutesToMenus(routes:Routes):any[] {
     let items = this._convertArrayToItems(routes);
     return this._skipEmpty(items);
   }

src/app/theme/components/baPageTop/baPageTop.component.ts

@@ -1,6 +1,6 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {AppState} from '../../../app.state';
+import {GlobalState} from '../../../global.state';
 import {BaProfilePicturePipe} from '../../pipes';
 import {BaMsgCenter} from '../../components/baMsgCenter';
 import {BaScrollPosition} from '../../directives';
@@ -18,7 +18,7 @@ export class BaPageTop {
   public isScrolled:boolean = false;
   public isMenuCollapsed:boolean = false;
 
-  constructor(private _state:AppState) {
+  constructor(private _state:GlobalState) {
     this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
       this.isMenuCollapsed = isCollapsed;
     });

src/app/theme/components/baSidebar/baSidebar.component.ts

@@ -1,8 +1,8 @@
 import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
-import {AppState} from '../../../app.state';
+import {GlobalState} from '../../../global.state';
 import {layoutSizes} from '../../../theme';
 import {BaMenu} from '../baMenu';
-import {routes} from '../../../../app/app.routes';
+import {MENU} from '../../../../app/app.menu';
 import * as _ from 'lodash';
 
 @Component({
@@ -16,14 +16,14 @@ import * as _ from 'lodash';
 export class BaSidebar {
 
   // here we declare which routes we want to use as a menu in our sidebar
-  public routes = _.cloneDeep(routes); // we're creating a deep copy since we are going to change that object
+  public routes = _.cloneDeep(MENU); // we're creating a deep copy since we are going to change that object
 
   public menuHeight:number;
   public isMenuCollapsed:boolean = false;
   public isMenuShouldCollapsed:boolean = false;
 
 
-  constructor(private _elementRef:ElementRef, private _state:AppState) {
+  constructor(private _elementRef:ElementRef, private _state:GlobalState) {
 
     this._state.subscribe('menu.isCollapsed', (isCollapsed) => {
       this.isMenuCollapsed = isCollapsed;

src/app/theme/nga.module.ts

@@ -0,0 +1,117 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+
+import {
+  BaThemeConfig
+} from './theme.config';
+
+import {
+  BaThemeConfigProvider
+} from './theme.configProvider';
+
+import {
+  BaAmChart,
+  BaBackTop,
+  BaCard,
+  BaChartistChart,
+  BaCheckbox,
+  BaContentTop,
+  BaFullCalendar,
+  BaMenu,
+  BaMsgCenter,
+  BaMultiCheckbox,
+  BaPageTop,
+  BaPictureUploader,
+  BaSidebar
+} from './components';
+
+import {
+  BaScrollPosition,
+  BaSlimScroll,
+  BaThemeRun
+} from './directives';
+
+import {
+  BaAppPicturePipe,
+  BaKameleonPicturePipe,
+  BaProfilePicturePipe
+} from './pipes';
+
+import {
+  BaImageLoaderService,
+  BaThemePreloader,
+  BaThemeSpinner
+} from './services';
+
+import {
+  EmailValidator,
+  EqualPasswordsValidator
+} from './validators';
+
+const NGA_COMPONENTS = [
+  BaAmChart,
+  BaBackTop,
+  BaCard,
+  BaChartistChart,
+  BaCheckbox,
+  BaContentTop,
+  BaFullCalendar,
+  BaMenu,
+  BaMsgCenter,
+  BaMultiCheckbox,
+  BaPageTop,
+  BaPictureUploader,
+  BaSidebar
+];
+
+const NGA_DIRECTIVES = [
+  BaScrollPosition,
+  BaSlimScroll,
+  BaThemeRun
+];
+
+const NGA_PIPES = [
+  BaAppPicturePipe,
+  BaKameleonPicturePipe,
+  BaProfilePicturePipe
+];
+
+const NGA_SERVICES = [
+  BaImageLoaderService,
+  BaThemePreloader,
+  BaThemeSpinner
+];
+
+const NGA_VALIDATORS = [
+  EmailValidator,
+  EqualPasswordsValidator
+];
+
+@NgModule({
+  declarations: [
+    ...NGA_PIPES,
+    ...NGA_DIRECTIVES,
+    ...NGA_COMPONENTS
+  ],
+  imports: [
+    CommonModule,
+    HttpModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+  providers: [
+    BaThemeConfigProvider,
+    BaThemeConfig,
+    ...NGA_VALIDATORS,
+    ...NGA_SERVICES
+  ],
+  exports: [
+    ...NGA_PIPES,
+    ...NGA_DIRECTIVES,
+    ...NGA_COMPONENTS
+  ]
+})
+export class NgaModule {
+}

src/custom-typings.d.ts

@@ -76,7 +76,7 @@ interface WebpackModule {
     data?: any,
     idle: any,
     accept(dependencies?: string | string[], callback?: (updatedDependencies?: any) => void): void;
-    decline(dependencies?: string | string[]): void;
+    decline(deps?: any | string | string[]): void;
     dispose(callback?: (data?: any) => void): void;
     addDisposeHandler(callback?: (data?: any) => void): void;
     removeDisposeHandler(callback?: (data?: any) => void): void;

src/main.browser.ts

@@ -1,56 +1,26 @@
 /*
- * Providers provided by Angular
+ * Angular bootstraping
  */
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { decorateModuleRef } from './app/environment';
+import { ApplicationRef } from '@angular/core';
+import { bootloader } from '@angularclass/hmr';
 /*
- * Platform and Environment
- * our providers/directives/pipes
+ * App Module
+ * our top level module that holds all of our components
  */
-import { PLATFORM_PROVIDERS } from './platform/browser';
-import { ENV_PROVIDERS, decorateComponentRef } from './platform/environment';
-
+import { AppModule } from './app';
 
 /*
- * App Component
- * our top level component that holds all of our components
+ * Bootstrap our Angular app with a top level NgModule
  */
-import { App, APP_PROVIDERS } from './app';
-
-/*
- * Bootstrap our Angular app with a top level component `App` and inject
- * our Services and Providers into Angular's dependency injection
- */
-export function main(initialHmrState?: any): Promise<any> {
-
-  return bootstrap(App, [
-    // To add more vendor providers please look in the platform/ folder
-    ...PLATFORM_PROVIDERS,
-    ...ENV_PROVIDERS,
-    ...APP_PROVIDERS,
-  ])
-    .then(decorateComponentRef)
+export function main(): Promise<any> {
+  return platformBrowserDynamic()
+    .bootstrapModule(AppModule)
+    .then(decorateModuleRef)
     .catch(err => console.error(err));
 
 }
 
 
-/*
- * Vendors
- * For vendors for example jQuery, Lodash, angular2-jwt just import them anywhere in your app
- * You can also import them in vendors to ensure that they are bundled in one file
- * Also see custom-typings.d.ts as you also need to do `npm install @types/x` where `x` is your module
- */
-
-
-/*
- * Hot Module Reload
- * experimental version by @gdi2290
- */
-if ('development' === ENV && HMR === true) {
-  // activate hot module reload
-  let ngHmr = require('angular2-hmr');
-  ngHmr.hotModuleReplacement(main, module);
-} else {
-  // bootstrap when document is ready
-  document.addEventListener('DOMContentLoaded', () => main());
-}
+bootloader(main);

src/platform/browser-directives.ts

@@ -1,19 +0,0 @@
-/*
- * These are globally available directives in any template
- */
-// Angular 2
-import { PLATFORM_DIRECTIVES } from '@angular/core';
-// Angular 2 Router
-import { ROUTER_DIRECTIVES } from '@angular/router';
-// Angular 2 forms
-import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
-
-// application_directives: directives that are global through out the application
-export const APPLICATION_DIRECTIVES = [
-  ...ROUTER_DIRECTIVES,
-  ...REACTIVE_FORM_DIRECTIVES
-];
-
-export const DIRECTIVES = [
-  { provide: PLATFORM_DIRECTIVES, multi: true, useValue: APPLICATION_DIRECTIVES }
-];

src/platform/browser-pipes.ts

@@ -1,14 +0,0 @@
-/*
- * These are globally available pipes in any template
- */
-
-import { PLATFORM_PIPES } from '@angular/core';
-
-// application_pipes: pipes that are global through out the application
-export const APPLICATION_PIPES = [
-
-];
-
-export const PIPES = [
-  { provide: PLATFORM_PIPES, multi: true, useValue: APPLICATION_PIPES }
-];

src/platform/browser-providers.ts

@@ -1,35 +0,0 @@
-/*
- * These are globally available services in any component or any other service
- */
-
-// Angular 2
-import { HashLocationStrategy, LocationStrategy } from '@angular/common';
-// Angular 2 Http
-import { HTTP_PROVIDERS } from '@angular/http';
-// Angular 2 Router
-import { provideRouter } from '@angular/router';
-// Angular 2 forms
-import { disableDeprecatedForms, provideForms } from '@angular/forms';
-
-
-import { routes } from '../app/app.routes';
-
-/*
- * Application Providers/Directives/Pipes
- * providers/directives/pipes that only live in our browser environment
- */
-export const APPLICATION_PROVIDERS = [
-  // new Angular 2 forms
-  disableDeprecatedForms(),
-  provideForms(),
-
-  provideRouter(routes),
-
-  ...HTTP_PROVIDERS,
-
-  { provide: LocationStrategy, useClass: HashLocationStrategy }
-];
-
-export const PROVIDERS = [
-  ...APPLICATION_PROVIDERS
-];

src/platform/browser.ts

@@ -1,14 +0,0 @@
-export * from './browser-directives';
-export * from './browser-pipes';
-export * from './browser-providers';
-
-import { DIRECTIVES } from './browser-directives';
-import { PIPES } from './browser-pipes';
-import { PROVIDERS } from './browser-providers';
-
-
-export const PLATFORM_PROVIDERS = [
-  ...PROVIDERS,
-  ...DIRECTIVES,
-  ...PIPES
-];

src/vendor.browser.ts

@@ -1,7 +1,7 @@
 // For vendors for example jQuery, Lodash, angular2-jwt just import them here unless you plan on
 // chunking vendors files for async loading. You would need to import the async loaded vendors
 // at the entry point of the async loaded file. Also see custom-typings.d.ts as you also need to
-// run `npm install @types/x` where `x` is your module
+// run `typings install x` where `x` is your module
 
 // Angular 2
 import '@angular/platform-browser';
@@ -12,6 +12,9 @@ import '@angular/forms';
 import '@angular/http';
 import '@angular/router';
 
+// AngularClass
+import '@angularclass/hmr';
+
 // RxJS
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/mergeMap';
@@ -24,9 +27,6 @@ import 'lodash';
 
 if ('production' === ENV) {
   // Production
-
 } else {
   // Development
-  require('angular2-hmr');
-
 }

tsconfig.json

@@ -5,13 +5,17 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "noEmitHelpers": true,
-    "lib": ["es6", "dom"],
     "strictNullChecks": false,
     "baseUrl": "./src",
     "paths": [
     ],
+    "lib": [
+      "dom",
+      "es6"
+    ],
     "types": [
       "core-js",
       "hammerjs",
@@ -22,7 +26,8 @@
     ]
   },
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "dist"
   ],
   "awesomeTypescriptLoaderOptions": {
     "forkChecker": true,