feat(rc6): update to rc6

.vscode/launch.json

@@ -5,7 +5,12 @@
       "name": "Launch Chrome against localhost, with sourcemaps",
       "type": "chrome",
       "request": "launch",
-      "url": "http://localhost:3000",
+      "url": "http://localhost:3000/*",
+      "runtimeArgs": [
+        "--disable-web-security",
+        "--user-data-dir",
+        "--remote-debugging-port=9222"
+      ],
       "sourceMaps": true,
       "webRoot": "${workspaceRoot}"
     },
@@ -13,7 +18,7 @@
       "name": "Attach to Chrome, with sourcemaps",
       "type": "chrome",
       "request": "attach",
-      "url": "http://localhost:3000",
+      "url": "http://localhost:3000/*",
       "port": 9222,
       "sourceMaps": true,
       "webRoot": "${workspaceRoot}"

config/webpack.prod.js

@@ -110,7 +110,7 @@ module.exports = webpackMerge(commonConfig, {
      * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
      * See: https://github.com/webpack/docs/wiki/optimization#deduplication
      */
-    new DedupePlugin(),
+    // new DedupePlugin(), // see: https://github.com/angular/angular-cli/issues/1587
 
     /**
      * Plugin: DefinePlugin

package.json

@@ -6,18 +6,26 @@
   "homepage": "http://akveo.github.io/ng2-admin/",
   "license": "MIT",
   "dependencies": {
-    "@angularclass/webpack-toolkit": "^1.3.3",
+
+    "@angular/common": "2.0.0-rc.6",
+    "@angular/compiler": "2.0.0-rc.6",
+    "@angular/core": "2.0.0-rc.6",
+    "@angular/forms": "^2.0.0-rc.6",
+    "@angular/http": "2.0.0-rc.6",
+    "@angular/platform-browser": "2.0.0-rc.6",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
+    "@angular/platform-server": "2.0.0-rc.6",
+    "@angular/router": "3.0.0-rc.2",
+
     "@angularclass/request-idle-callback": "^1.0.7",
+    "@angularclass/webpack-toolkit": "^1.3.3",
     "@angularclass/conventions-loader": "^1.0.2",
-    "@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",
+
+    "http-server": "^0.9.0",
+    "ie-shim": "^0.1.0",
+    "rxjs": "5.0.0-beta.11",
+    "zone.js": "~0.6.17",
+
     "amcharts3": "github:amcharts/amcharts3",
     "ammap3": "github:amcharts/ammap3",
     "animate.css": "^3.5.1",
@@ -33,23 +41,19 @@
     "font-awesome-sass-loader": "^1.0.2",
     "fullcalendar": "^2.7.2",
     "google-maps": "^3.2.1",
-    "http-server": "^0.9.0",
-    "ie-shim": "^0.1.0",
     "ionicons": "^2.0.1",
     "jquery": "^2.2.3",
     "jquery-slimscroll": "^1.3.6",
     "leaflet": "^0.7.7",
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
-    "ng2-bootstrap": "1.1.0",
+    "ng2-bootstrap": "1.1.2",
     "ng2-tree": "^0.0.2-7",
-    "ng2-ckeditor": "1.0.6",
-    "ng2-smart-table": "^0.1.6",
+    "ng2-ckeditor": "1.0.7",
+    "ng2-smart-table": "^0.2.4",
     "ng2-uploader": "0.5.14",
     "normalize.css": "^4.1.1",
-    "rxjs": "5.0.0-beta.6",
-    "tether": "^1.2.4",
-    "zone.js": "~0.6.17"
+    "tether": "^1.2.4"
   },
   "devDependencies": {
     "@angularclass/hmr": "^1.0.1",
@@ -64,7 +68,7 @@
     "@types/lodash": "0.0.28",
     "angular2-hmr": "~0.8.0",
     "gh-pages": "^0.11.0",
-    "parse5": "^1.5.1",
+    "parse5": "^1.3.2",
     "rimraf": "^2.5.2",
     "codelyzer": "~0.0.21",
     "tslint": "^3.15.1",

src/app/app.component.ts

@@ -1,8 +1,6 @@
 import './app.loader.ts';
 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';
 
@@ -12,9 +10,6 @@ import { layoutPaths } from './theme/theme.constants';
  */
 @Component({
   selector: 'app',
-  pipes: [],
-  directives: [BaThemeRun],
-  providers: [BaThemeConfigProvider, BaThemeConfig, BaImageLoaderService, BaThemeSpinner],
   encapsulation: ViewEncapsulation.None,
   styles: [require('normalize.css'), require('./app.scss')],
   template: `
@@ -31,7 +26,7 @@ export class App {
   constructor(private _state: GlobalState,
               private _imageLoader: BaImageLoaderService,
               private _spinner: BaThemeSpinner) {
-    
+
     this._loadImages();
 
     this._state.subscribe('menu.isCollapsed', (isCollapsed) => {

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

@@ -1,11 +1,7 @@
-import {Component} from "@angular/core";
-
-// import {ChartJs} from "./components/chartJs";
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'maps',
-  pipes: [],
-  providers: [],
   styles: [],
   template: `<router-outlet></router-outlet>`
 })

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

@@ -6,6 +6,7 @@ import { NgaModule } from '../../theme/nga.module';
 import { routing }       from './charts.routing';
 import { Charts } from './charts.component';
 import { ChartistJs } from './components/chartistJs/chartistJs.component';
+import { ChartistJsService } from './components/chartistJs/chartistJs.service';
 
 
 @NgModule({
@@ -18,6 +19,9 @@ import { ChartistJs } from './components/chartistJs/chartistJs.component';
   declarations: [
     Charts,
     ChartistJs
+  ],
+  providers: [
+    ChartistJsService
   ]
 })
 export default class ChartsModule {}

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

@@ -5,8 +5,6 @@ import {ChartistJsService} from './chartistJs.service';
 @Component({
   selector: 'chartist-js',
   encapsulation: ViewEncapsulation.None,
-  pipes: [],
-  providers: [ChartistJsService],
   styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')],
   template: require('./chartistJs.html'),
 })

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

@@ -2,8 +2,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'components',
-  pipes: [],
-  providers: [],
   styles: [],
   template: `<router-outlet></router-outlet>`
 })

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

@@ -2,12 +2,13 @@ import { NgModule }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { NgaModule } from '../../theme/nga.module';
+import { TreeComponent } from 'ng2-tree/index';
 
 import { routing }       from './components.routing';
 import { Components } from './components.component';
 import { TreeView } from './components/treeView/treeView.component';
 
-
+// TODO: tree component?
 @NgModule({
   imports: [
     CommonModule,
@@ -17,7 +18,8 @@ import { TreeView } from './components/treeView/treeView.component';
   ],
   declarations: [
     Components,
-    TreeView
+    TreeView,
+    TreeComponent
   ]
 })
 export default class ComponentsModule {}

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

@@ -1,9 +1,8 @@
 import {Component} from '@angular/core';
-import {TreeComponent, TreeModel} from 'ng2-tree';
+import {TreeModel} from 'ng2-tree';
 
 @Component({
   selector: 'tree-view',
-  directives: [TreeComponent],
   template: require('./treeView.html'),
 })
 

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

@@ -6,8 +6,7 @@ import {CalendarService} from './calendar.service';
   selector: 'calendar',
   encapsulation: ViewEncapsulation.None,
   styles: [require('./calendar.scss')],
-  template: require('./calendar.html'),
-  providers: [CalendarService]
+  template: require('./calendar.html')
 })
 export class Calendar {
 
@@ -26,8 +25,8 @@ export class Calendar {
   private _onSelect(start, end):void {
 
     if (this._calendar != null) {
-      var title = prompt('Event Title:');
-      var eventData;
+      let title = prompt('Event Title:');
+      let eventData;
       if (title) {
         eventData = {
           title: title,

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

@@ -14,6 +14,13 @@ import { LineChart } from './lineChart';
 import { Feed } from './feed';
 import { Todo } from './todo';
 import { Calendar } from './calendar';
+import { CalendarService } from './calendar/calendar.service';
+import { FeedService } from './feed/feed.service';
+import { LineChartService } from './lineChart/lineChart.service';
+import { PieChartService } from './pieChart/pieChart.service';
+import { TodoService } from './todo/todo.service';
+import { TrafficChartService } from './trafficChart/trafficChart.service';
+import { UsersMapService } from './usersMap/usersMap.service';
 
 @NgModule({
   imports: [
@@ -32,6 +39,15 @@ import { Calendar } from './calendar';
     Todo,
     Calendar,
     Dashboard
+  ],
+  providers: [
+    CalendarService,
+    FeedService,
+    LineChartService,
+    PieChartService,
+    TodoService,
+    TrafficChartService,
+    UsersMapService
   ]
 })
 export default class DashboardModule {}

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

@@ -1,13 +1,10 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BaProfilePicturePipe, BaAppPicturePipe} from '../../../theme/pipes';
 import {FeedService} from './feed.service';
 
 @Component({
   selector: 'feed',
   encapsulation: ViewEncapsulation.None,
-  providers: [FeedService],
-  pipes: [BaProfilePicturePipe, BaAppPicturePipe],
   styles: [require('./feed.scss')],
   template: require('./feed.html')
 })

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

@@ -5,7 +5,6 @@ import {LineChartService} from './lineChart.service';
 @Component({
   selector: 'line-chart',
   encapsulation: ViewEncapsulation.None,
-  providers: [LineChartService],
   styles: [require('./lineChart.scss')],
   template: require('./lineChart.html')
 })

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

@@ -7,7 +7,6 @@ import './pieChart.loader.ts';
 @Component({
   selector: 'pie-chart',
   encapsulation: ViewEncapsulation.None,
-  providers: [PieChartService],
   styles: [require('./pieChart.scss')],
   template: require('./pieChart.html')
 })
@@ -50,7 +49,7 @@ export class PieChart {
   }
 
   private _updatePieCharts() {
-    let getRandomArbitrary = (min, max) => { return Math.random() * (max - min) + min };
+    let getRandomArbitrary = (min, max) => { return Math.random() * (max - min) + min; };
 
     jQuery('.pie-charts .chart').each(function(index, chart) {
       jQuery(chart).data('easyPieChart').update(getRandomArbitrary(55, 90));

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

@@ -1,11 +1,8 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BaAppPicturePipe} from '../../../theme/pipes';
-
 @Component({
   selector: 'popular-app',
   encapsulation: ViewEncapsulation.None,
-  pipes: [BaAppPicturePipe],
   styles: [require('./popularApp.scss')],
   template: require('./popularApp.html')
 })

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

@@ -6,7 +6,6 @@ import {TodoService} from './todo.service';
 @Component({
   selector: 'todo',
   encapsulation: ViewEncapsulation.None,
-  providers: [TodoService],
   styles: [require('./todo.scss')],
   template: require('./todo.html')
 })

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

@@ -6,7 +6,6 @@ import {TrafficChartService} from './trafficChart.service';
 @Component({
   selector: 'traffic-chart',
   encapsulation: ViewEncapsulation.None,
-  providers: [TrafficChartService],
   styles: [require('./trafficChart.scss')],
   template: require('./trafficChart.html')
 })

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

@@ -5,7 +5,6 @@ import {UsersMapService} from './usersMap.service';
 @Component({
   selector: 'users-map',
   encapsulation: ViewEncapsulation.None,
-  providers: [UsersMapService],
   styles: [require('./usersMap.scss')],
   template: require('./usersMap.html')
 })

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

@@ -1,12 +1,10 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-import {CKEditor} from 'ng2-ckeditor';
 
 import './ckeditor.loader.ts';
 
 @Component({
   selector: 'ckeditor-component',
   encapsulation: ViewEncapsulation.None,
-  directives: [CKEditor],
   template: require('./ckeditor.html'),
   styles: [require('./ckeditor.scss')]
 })

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

@@ -1,6 +1,7 @@
 import { NgModule }      from '@angular/core';
 import { CommonModule }  from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { CKEditorModule } from 'ng2-ckeditor';
 import { NgaModule } from '../../theme/nga.module';
 
 import { routing }       from './editors.routing';
@@ -13,6 +14,7 @@ import { Ckeditor } from './components/ckeditor/ckeditor.component';
     CommonModule,
     FormsModule,
     NgaModule,
+    CKEditorModule,
     routing
   ],
   declarations: [
@@ -20,4 +22,5 @@ import { Ckeditor } from './components/ckeditor/ckeditor.component';
     Ckeditor
   ]
 })
-export default class EditorsModule {}
+export default class EditorsModule {
+}

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

@@ -1,17 +1,8 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-
-import {StandardInputs} from './components/standardInputs';
-import {ValidationInputs} from './components/validationInputs';
-import {GroupInputs} from './components/groupInputs';
-import {CheckboxInputs} from './components/checkboxInputs';
-import {Rating} from './components/ratinginputs';
-
-
 @Component({
   selector: 'inputs',
   encapsulation: ViewEncapsulation.None,
-  directives: [StandardInputs, ValidationInputs, GroupInputs, CheckboxInputs, Rating],
   template: require('./inputs.html'),
 })
 export class Inputs {

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

@@ -1,16 +1,8 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-
-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';
-
 @Component({
   selector: 'layouts',
   encapsulation: ViewEncapsulation.None,
-  directives: [InlineForm, BlockForm, HorizontalForm, BasicForm, WithoutLabelsForm],
   styles: [],
   template: require('./layouts.html'),
 })

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

@@ -2,8 +2,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'forms',
-  pipes: [],
-  providers: [],
   styles: [],
   template: `<router-outlet></router-outlet>`
 })

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

@@ -10,6 +10,17 @@ import { Forms } from './forms.component';
 import { Inputs } from './components/inputs';
 import { Layouts } from './components/layouts';
 
+import { StandardInputs } from './components/inputs/components/standardInputs';
+import { ValidationInputs } from './components/inputs/components/validationInputs';
+import { GroupInputs } from './components/inputs/components/groupInputs';
+import { CheckboxInputs } from './components/inputs/components/checkboxInputs';
+import { Rating } from './components/inputs/components/ratinginputs';
+
+import { InlineForm } from './components/layouts/components/inlineForm';
+import { BlockForm } from './components/layouts/components/blockForm';
+import { HorizontalForm } from './components/layouts/components/horizontalForm';
+import { BasicForm } from './components/layouts/components/basicForm';
+import { WithoutLabelsForm } from './components/layouts/components/withoutLabelsForm';
 
 @NgModule({
   imports: [
@@ -22,7 +33,18 @@ import { Layouts } from './components/layouts';
   declarations: [
     Layouts,
     Inputs,
-    Forms
+    Forms,
+    StandardInputs,
+    ValidationInputs,
+    GroupInputs,
+    CheckboxInputs,
+    Rating,
+    InlineForm,
+    BlockForm,
+    HorizontalForm,
+    BasicForm,
+    WithoutLabelsForm
   ]
 })
-export default class FormsModule {}
+export default class FormsModule {
+}

src/app/pages/login/login.component.ts

@@ -4,7 +4,6 @@ import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/form
 @Component({
   selector: 'login',
   encapsulation: ViewEncapsulation.None,
-  directives: [],
   styles: [require('./login.scss')],
   template: require('./login.html'),
 })

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

@@ -4,8 +4,6 @@ import {BubbleMapsService} from './bubbleMaps.service';
 
 @Component({
   selector: 'bubble-maps',
-  pipes: [],
-  providers: [BubbleMapsService],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./bubbleMaps.scss')],
   template: require('./bubbleMaps.html'),

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

@@ -3,8 +3,6 @@ import {GoogleMapsLoader} from './googleMaps.loader';
 
 @Component({
   selector: 'google-maps',
-  pipes: [],
-  providers: [],
   styles: [require('./googleMaps.scss')],
   template: require('./googleMaps.html'),
 })

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

@@ -4,8 +4,6 @@ import './leafletMaps.loader';
 
 @Component({
   selector: 'leaflet-maps',
-  pipes: [],
-  providers: [],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./leafletMaps.scss')],
   template: require('./leafletMaps.html')

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

@@ -4,8 +4,6 @@ import {LineMapsService} from './lineMaps.service';
 
 @Component({
   selector: 'line-maps',
-  pipes: [],
-  providers: [LineMapsService],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./lineMaps.scss')],
   template: require('./lineMaps.html')

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

@@ -2,8 +2,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'maps',
-  pipes: [],
-  providers: [],
   styles: [],
   template: `<router-outlet></router-outlet>`
 })

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

@@ -9,6 +9,8 @@ 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';
+import { BubbleMapsService } from './components/bubbleMaps/bubbleMaps.service';
+import { LineMapsService } from './components/lineMaps/lineMaps.service';
 
 
 @NgModule({
@@ -24,6 +26,10 @@ import { LineMaps } from './components/lineMaps/lineMaps.component';
     GoogleMaps,
     LeafletMaps,
     LineMaps
+  ],
+  providers: [
+    BubbleMapsService,
+    LineMapsService
   ]
 })
 export default class MapsModule {}

src/app/pages/pages.menu.ts

@@ -36,28 +36,28 @@ export const PAGES_MENU = [
           }
         ]
       },
-      {
-        path: 'components',
-        data: {
-          menu: {
-            title: 'Components',
-            icon: 'ion-gear-a',
-            selected: false,
-            expanded: false,
-            order: 250,
-          }
-        },
-        children: [
-          {
-            path: 'treeview',
-            data: {
-              menu: {
-                title: 'Tree View',
-              }
-            }
-          }
-        ]
-      },
+      //{
+      //  path: 'components',
+      //  data: {
+      //    menu: {
+      //      title: 'Components',
+      //      icon: 'ion-gear-a',
+      //      selected: false,
+      //      expanded: false,
+      //      order: 250,
+      //    }
+      //  },
+      //  children: [
+      //    {
+      //      path: 'treeview',
+      //      data: {
+      //        menu: {
+      //          title: 'Tree View',
+      //        }
+      //      }
+      //    }
+      //  ]
+      //},
       {
         path: 'charts',
         data: {

src/app/pages/register/register.component.ts

@@ -5,7 +5,6 @@ import {EmailValidator, EqualPasswordsValidator} from '../../theme/validators';
 @Component({
   selector: 'register',
   encapsulation: ViewEncapsulation.None,
-  directives: [],
   styles: [require('./register.scss')],
   template: require('./register.html'),
 })

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

@@ -1,20 +1,10 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {BasicTablesService} from './basicTables.service';
-import {HoverTable} from './components/hoverTable';
-import {BorderedTable} from './components/borderedTable';
-import {CondensedTable} from './components/condensedTable';
-import {StripedTable} from './components/stripedTable';
-import {ContextualTable} from './components/contextualTable';
-import {ResponsiveTable} from './components/responsiveTable';
-
 @Component({
   selector: 'basic-tables',
   encapsulation: ViewEncapsulation.None,
-  directives: [HoverTable, BorderedTable, CondensedTable, StripedTable, ContextualTable, ResponsiveTable],
   styles: [require('./basicTables.scss')],
-  template: require('./basicTables.html'),
-  providers: [BasicTablesService]
+  template: require('./basicTables.html')
 })
 export class BasicTables {
 

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

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import { Injectable } from '@angular/core';
 
 @Injectable()
 export class BasicTablesService {
@@ -488,7 +488,7 @@ export class BasicTablesService {
     }
   ];
 
-  editableTableData:Array<any>;
+  editableTableData: Array<any>;
 
   peopleTableData = [
     {
@@ -654,16 +654,16 @@ export class BasicTablesService {
   ];
 
   statuses = [
-    {value: 1, text: 'Good'},
-    {value: 2, text: 'Awesome'},
-    {value: 3, text: 'Excellent'},
+    { value: 1, text: 'Good' },
+    { value: 2, text: 'Awesome' },
+    { value: 3, text: 'Excellent' },
   ];
 
   groups = [
-    {id: 1, text: 'user'},
-    {id: 2, text: 'customer'},
-    {id: 3, text: 'vip'},
-    {id: 4, text: 'admin'}
+    { id: 1, text: 'user' },
+    { id: 2, text: 'customer' },
+    { id: 3, text: 'vip' },
+    { id: 4, text: 'admin' }
   ];
 
   constructor() {

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

@@ -1,16 +1,13 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-
-import {NG2_SMART_TABLE_DIRECTIVES, LocalDataSource} from 'ng2-smart-table';
 import { SmartTablesService } from './smartTables.service';
+import { LocalDataSource } from 'ng2-smart-table';
 
 @Component({
   selector: 'basic-tables',
   encapsulation: ViewEncapsulation.None,
-  directives: [NG2_SMART_TABLE_DIRECTIVES],
   styles: [require('./smartTables.scss')],
-  template: require('./smartTables.html'),
-  providers: [SmartTablesService]
+  template: require('./smartTables.html')
 })
 export class SmartTables {
 

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

@@ -2,8 +2,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'forms',
-  pipes: [],
-  providers: [],
   styles: [],
   template: `<router-outlet></router-outlet>`
 })

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

@@ -7,6 +7,15 @@ import { routing }       from './tables.routing';
 import { Tables } from './tables.component';
 import { BasicTables } from './components/basicTables/basicTables.component';
 import { SmartTables } from './components/smartTables/smartTables.component';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+import { BasicTablesService } from './components/basicTables/basicTables.service';
+import { ResponsiveTable } from './components/basicTables/components/responsiveTable';
+import { StripedTable } from './components/basicTables/components/stripedTable';
+import { BorderedTable } from './components/basicTables/components/borderedTable';
+import { HoverTable } from './components/basicTables/components/hoverTable';
+import { CondensedTable } from './components/basicTables/components/condensedTable';
+import { ContextualTable } from './components/basicTables/components/contextualTable';
+import { SmartTablesService } from './components/smartTables/smartTables.service';
 
 
 @NgModule({
@@ -14,12 +23,23 @@ import { SmartTables } from './components/smartTables/smartTables.component';
     CommonModule,
     FormsModule,
     NgaModule,
+    Ng2SmartTableModule,
     routing
   ],
   declarations: [
     Tables,
     BasicTables,
-    SmartTables
+    SmartTables,
+    HoverTable,
+    BorderedTable,
+    CondensedTable,
+    StripedTable,
+    ContextualTable,
+    ResponsiveTable
+  ],
+  providers: [
+    BasicTablesService,
+    SmartTablesService
   ]
 })
 export default class TablesModule {}

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

@@ -1,27 +1,8 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
-import {FlatButtons} from './components/flatButtons';
-import {RaisedButtons} from './components/raisedButtons';
-import {SizedButtons} from './components/sizedButtons';
-import {DisabledButtons} from './components/disabledButtons';
-import {IconButtons} from './components/iconButtons';
-import {LargeButtons} from './components/largeButtons';
-import {DropdownButtons} from './components/dropdownButtons';
-import {GroupButtons} from './components/groupButtons';
-
 @Component({
   selector: 'buttons',
   encapsulation: ViewEncapsulation.None,
-  directives: [
-    FlatButtons,
-    RaisedButtons,
-    SizedButtons,
-    DisabledButtons,
-    IconButtons,
-    LargeButtons,
-    DropdownButtons,
-    GroupButtons
-  ],
   styles: [require('./buttons.scss')],
   template: require('./buttons.html'),
 })

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 
 @Component({

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

@@ -5,7 +5,6 @@ import {IconsService} from './icons.service';
 @Component({
   selector: 'icons',
   encapsulation: ViewEncapsulation.None,
-  providers: [IconsService],
   styles: [require('./icons.scss')],
   template: require('./icons.html'),
 })

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

@@ -3,7 +3,6 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'typography',
-  providers: [],
   styles: [],
   template: require('./typography.html'),
 })

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

@@ -2,8 +2,6 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'ui',
-  pipes: [],
-  providers: [],
   styles: [],
   template: `<router-outlet></router-outlet>`
 })

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

@@ -11,6 +11,16 @@ import { Grid } from './components/grid/grid.component';
 import { Icons } from './components/icons/icons.component';
 import { Typography } from './components/typography/typography.component';
 
+import { FlatButtons } from './components/buttons/components/flatButtons';
+import { RaisedButtons } from './components/buttons/components/raisedButtons';
+import { SizedButtons } from './components/buttons/components/sizedButtons';
+import { DisabledButtons } from './components/buttons/components/disabledButtons';
+import { IconButtons } from './components/buttons/components/iconButtons';
+import { LargeButtons } from './components/buttons/components/largeButtons';
+import { DropdownButtons } from './components/buttons/components/dropdownButtons';
+import { GroupButtons } from './components/buttons/components/groupButtons';
+import { IconsService } from './components/icons/icons.service';
+
 
 @NgModule({
   imports: [
@@ -25,7 +35,19 @@ import { Typography } from './components/typography/typography.component';
     Grid,
     Icons,
     Typography,
-    Ui
+    Ui,
+    FlatButtons,
+    RaisedButtons,
+    SizedButtons,
+    DisabledButtons,
+    IconButtons,
+    LargeButtons,
+    DropdownButtons,
+    GroupButtons
+  ],
+  providers: [
+    IconsService
   ]
 })
-export default class UiModule {}
+export default class UiModule {
+}

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

@@ -1,10 +1,8 @@
 import {Component, ViewEncapsulation, ViewChild, Input} from '@angular/core';
-import {BaCardBlur} from './baCardBlur.directive';
 
 @Component({
   selector: 'ba-card',
   styles: [require('./baCard.scss')],
-  directives: [BaCardBlur],
   template: require('./baCard.html'),
   encapsulation: ViewEncapsulation.None
 })

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

@@ -2,9 +2,7 @@ import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angula
 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 {GlobalState} from '../../../global.state';
 
 @Component({
@@ -12,8 +10,7 @@ import {GlobalState} from '../../../global.state';
   encapsulation: ViewEncapsulation.None,
   styles: [require('./baMenu.scss')],
   template: require('./baMenu.html'),
-  providers: [BaMenuService],
-  directives: [BaMenuItem, BaSlimScroll]
+  providers: [BaMenuService]
 })
 export class BaMenu {
 

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

@@ -4,9 +4,7 @@ import {Component, ViewEncapsulation, Input, Output, EventEmitter} from '@angula
   selector: 'ba-menu-item',
   encapsulation: ViewEncapsulation.None,
   styles: [require('./baMenuItem.scss')],
-  template: require('./baMenuItem.html'),
-  providers: [],
-  directives: [BaMenuItem]
+  template: require('./baMenuItem.html')
 })
 export class BaMenuItem {
 

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

@@ -1,14 +1,12 @@
 import {Component} from '@angular/core';
 
 import {BaMsgCenterService} from './baMsgCenter.service';
-import {BaProfilePicturePipe} from '../../pipes';
 
 @Component({
   selector: 'ba-msg-center',
   providers: [BaMsgCenterService],
   styles: [require('./baMsgCenter.scss')],
-  template: require('./baMsgCenter.html'),
-  pipes: [BaProfilePicturePipe]
+  template: require('./baMsgCenter.html')
 })
 export class BaMsgCenter {
 

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

@@ -1,11 +1,9 @@
 import {Component, Input, Self} from '@angular/core';
 import {ControlValueAccessor, NgModel} from '@angular/forms';
-import {BaCheckbox} from '../baCheckbox';
 
 @Component({
   selector: 'ba-multi-checkbox[ngModel]',
   template: require('./baMultiCheckbox.html'),
-  directives: [BaCheckbox]
 })
 export class BaMultiCheckbox implements ControlValueAccessor {
   @Input() baMultiCheckboxClass:string;

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

@@ -1,16 +1,11 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
 import {GlobalState} from '../../../global.state';
-import {BaProfilePicturePipe} from '../../pipes';
-import {BaMsgCenter} from '../../components/baMsgCenter';
-import {BaScrollPosition} from '../../directives';
 
 @Component({
   selector: 'ba-page-top',
   styles: [require('./baPageTop.scss')],
   template: require('./baPageTop.html'),
-  directives: [BaMsgCenter, BaScrollPosition],
-  pipes: [BaProfilePicturePipe],
   encapsulation: ViewEncapsulation.None
 })
 export class BaPageTop {

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

@@ -1,7 +1,6 @@
 import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/core';
 import {GlobalState} from '../../../global.state';
 import {layoutSizes} from '../../../theme';
-import {BaMenu} from '../baMenu';
 import {MENU} from '../../../../app/app.menu';
 import * as _ from 'lodash';
 
@@ -9,9 +8,7 @@ import * as _ from 'lodash';
   selector: 'ba-sidebar',
   encapsulation: ViewEncapsulation.None,
   styles: [require('./baSidebar.scss')],
-  template: require('./baSidebar.html'),
-  providers: [],
-  directives: [BaMenu]
+  template: require('./baSidebar.html')
 })
 export class BaSidebar {
 

src/app/theme/components/index.ts

@@ -1,6 +1,7 @@
 export * from './baPageTop';
 export * from './baMsgCenter';
 export * from './baSidebar';
+export * from './baMenu/components/baMenuItem';
 export * from './baMenu';
 export * from './baContentTop';
 export * from './baCard';

src/app/theme/nga.module.ts

@@ -19,6 +19,7 @@ import {
   BaCheckbox,
   BaContentTop,
   BaFullCalendar,
+  BaMenuItem,
   BaMenu,
   BaMsgCenter,
   BaMultiCheckbox,
@@ -27,6 +28,8 @@ import {
   BaSidebar
 } from './components';
 
+import { BaCardBlur } from './components/baCard/baCardBlur.directive';
+
 import {
   BaScrollPosition,
   BaSlimScroll,
@@ -58,6 +61,7 @@ const NGA_COMPONENTS = [
   BaCheckbox,
   BaContentTop,
   BaFullCalendar,
+  BaMenuItem,
   BaMenu,
   BaMsgCenter,
   BaMultiCheckbox,
@@ -69,7 +73,8 @@ const NGA_COMPONENTS = [
 const NGA_DIRECTIVES = [
   BaScrollPosition,
   BaSlimScroll,
-  BaThemeRun
+  BaThemeRun,
+  BaCardBlur
 ];
 
 const NGA_PIPES = [