feat(aot): aot compilation work in progress

src/app/app.component.ts

@@ -8,14 +8,17 @@ import { BaThemeConfig } from './theme/theme.config';
 import { BaMenuService } from './theme';
 
 import { MENU } from './app.menu';
+
+import 'style!./app.scss';
+
 /*
  * App Component
  * Top Level Component
  */
 @Component({
   selector: 'app',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('normalize.css'), require('./app.scss')],
+  // // encapsulation: ViewEncapsulation.None,
+  // styleUrls: ['./app.scss'],
   template: `
     <main [ngClass]="{'menu-collapsed': isMenuCollapsed}" baThemeRun>
       <div class="additional-bg"></div>

src/app/app.loader.ts

@@ -1,2 +1,2 @@
 // this css loaded separately as a standalone file to speed up the initial styles loading
-require('./theme/initial.scss');
+import './theme/initial.scss';

src/app/app.module.ts

@@ -24,7 +24,7 @@ const APP_PROVIDERS = [
   GlobalState
 ];
 
-type StoreType = {
+export type StoreType = {
   state: InternalStateType,
   restoreInputValues: () => void,
   disposeOldHosts: () => void

src/app/app.routing.ts

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

src/app/app.scss

@@ -1 +1,2 @@
+@import "~normalize.css";
 @import "theme/theme";

src/app/environment.ts

@@ -1,3 +1,5 @@
+// TODO: should be from webpack
+const ENV = 'production';
 
 // Angular 2
 // rc2 workaround

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

@@ -24,4 +24,4 @@ import { ChartistJsService } from './components/chartistJs/chartistJs.service';
     ChartistJsService
   ]
 })
-export default class ChartsModule {}
+export class ChartsModule {}

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

@@ -1,12 +1,11 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
 import {ChartistJsService} from './chartistJs.service';
+import 'style!./chartistJs.scss';
 
 @Component({
   selector: 'chartist-js',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')],
-  template: require('./chartistJs.html'),
+  templateUrl: './chartistJs.html',
 })
 
 export class ChartistJs {

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

@@ -1,13 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'components',
-  styles: [],
-  template: `<router-outlet></router-outlet>`
-})
-export class Components {
-
-  constructor() {
-  }
-
-}

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

@@ -1,25 +0,0 @@
-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,
-    FormsModule,
-    NgaModule,
-    routing
-  ],
-  declarations: [
-    Components,
-    TreeView,
-    TreeComponent
-  ]
-})
-export default class ComponentsModule {}

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

@@ -1,17 +0,0 @@
-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.scss

@@ -1 +0,0 @@
-@import '../../theme/sass/treeView';

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

@@ -1 +0,0 @@
-export * from './treeView.component';

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

@@ -1,36 +0,0 @@
-import {Component} from '@angular/core';
-import {TreeModel} from 'ng2-tree';
-
-@Component({
-  selector: 'tree-view',
-  template: require('./treeView.html'),
-})
-
-export class TreeView {
-
-  private tree: TreeModel = {
-    value: 'Programming languages by programming paradigm',
-    children: [
-      {
-        value: 'Object-oriented programming',
-        children: [
-          {value: 'Java'},
-          {value: 'C++'},
-          {value: 'C#'},
-        ]
-      },
-      {
-        value: 'Prototype-based programming',
-        children: [
-          {value: 'JavaScript'},
-          {value: 'CoffeeScript'},
-          {value: 'Lua'},
-        ]
-      }
-    ]
-  };
-
-  constructor() {
-  }
-
-}

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

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

src/app/pages/components/index.ts

@@ -1 +0,0 @@
-export * from './components.component';

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

@@ -1,12 +1,12 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 
 import {CalendarService} from './calendar.service';
+import 'style!./calendar.scss';
 
 @Component({
   selector: 'calendar',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./calendar.scss')],
-  template: require('./calendar.html')
+  // // encapsulation: ViewEncapsulation.None,
+  templateUrl: './calendar.html'
 })
 export class Calendar {
 

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

@@ -1,10 +1,9 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'dashboard',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./dashboard.scss')],
-  template: require('./dashboard.html')
+  styleUrls: ['./dashboard.scss'],
+  templateUrl: './dashboard.html'
 })
 export class Dashboard {
 

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

@@ -50,4 +50,4 @@ import { UsersMapService } from './usersMap/usersMap.service';
     UsersMapService
   ]
 })
-export default class DashboardModule {}
+export class DashboardModule {}

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

@@ -1,9 +1,10 @@
 import { Routes, RouterModule }  from '@angular/router';
 
 import { Dashboard } from './dashboard.component';
+import { ModuleWithProviders } from '@angular/core';
 
 // noinspection TypeScriptValidateTypes
-const routes: Routes = [
+export const routes: Routes = [
   {
     path: '',
     component: Dashboard,
@@ -13,4 +14,4 @@ const routes: Routes = [
   }
 ];
 
-export const routing = RouterModule.forChild(routes);
+export const routing: ModuleWithProviders = RouterModule.forChild(routes);

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

@@ -4,9 +4,9 @@ import {FeedService} from './feed.service';
 
 @Component({
   selector: 'feed',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./feed.scss')],
-  template: require('./feed.html')
+  // // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./feed.scss'],
+  templateUrl: './feed.html'
 })
 export class Feed {
 

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

@@ -1,12 +1,12 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 
 import {LineChartService} from './lineChart.service';
 
+import 'style!./lineChart.scss';
+
 @Component({
   selector: 'line-chart',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./lineChart.scss')],
-  template: require('./lineChart.html')
+  templateUrl: './lineChart.html'
 })
 export class LineChart {
 

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

@@ -3,12 +3,11 @@ import {Component, ViewEncapsulation} from '@angular/core';
 import {PieChartService} from './pieChart.service';
 
 import './pieChart.loader.ts';
+import 'style!./pieChart.scss';
 
 @Component({
   selector: 'pie-chart',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./pieChart.scss')],
-  template: require('./pieChart.html')
+  templateUrl: './pieChart.html'
 })
 // TODO: move easypiechart to component
 export class PieChart {

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

@@ -1 +1 @@
-require('easy-pie-chart/dist/jquery.easypiechart.js');
+import 'easy-pie-chart/dist/jquery.easypiechart.js';

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

@@ -1,10 +1,9 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
+import 'style!./popularApp.scss';
 
 @Component({
   selector: 'popular-app',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./popularApp.scss')],
-  template: require('./popularApp.html')
+  templateUrl: './popularApp.html'
 })
 export class PopularApp {
 

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

@@ -5,12 +5,12 @@ import {TodoService} from './todo.service';
 
 @Component({
   selector: 'todo',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./todo.scss')],
-  template: require('./todo.html')
+  // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./todo.scss'],
+  templateUrl: './todo.html'
 })
 export class Todo {
-  
+
   public dashboardColors = this._baConfig.get().colors.dashboard;
 
   public todoList:Array<any>;

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

@@ -1,13 +1,14 @@
 import {Component, ViewEncapsulation, ElementRef} from '@angular/core';
 
-import {Chart} from './trafficChart.loader.ts';
+import './trafficChart.loader.ts';
 import {TrafficChartService} from './trafficChart.service';
+import * as Chart from 'chart.js';
 
 @Component({
   selector: 'traffic-chart',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./trafficChart.scss')],
-  template: require('./trafficChart.html')
+  // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./trafficChart.scss'],
+  templateUrl: './trafficChart.html'
 })
 
 // TODO: move chart.js to it's own component

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

@@ -1 +1,3 @@
-export const Chart = require('chart.js');
+
+
+

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

@@ -1,12 +1,11 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 
 import {UsersMapService} from './usersMap.service';
+import 'style!./usersMap.scss';
 
 @Component({
   selector: 'users-map',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./usersMap.scss')],
-  template: require('./usersMap.html')
+  templateUrl: './usersMap.html'
 })
 export class UsersMap {
 

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

@@ -4,9 +4,9 @@ import './ckeditor.loader.ts';
 
 @Component({
   selector: 'ckeditor-component',
-  encapsulation: ViewEncapsulation.None,
-  template: require('./ckeditor.html'),
-  styles: [require('./ckeditor.scss')]
+  // encapsulation: ViewEncapsulation.None,
+  templateUrl: './ckeditor.html',
+  styleUrls: ['./ckeditor.scss']
 })
 
 export class Ckeditor {

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

@@ -1,2 +1,2 @@
 window['CKEDITOR_BASEPATH'] = '//cdn.ckeditor.com/4.6.0/standard/';
-require('ckeditor');
+import 'ckeditor';

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

@@ -22,5 +22,5 @@ import { Ckeditor } from './components/ckeditor/ckeditor.component';
     Ckeditor
   ]
 })
-export default class EditorsModule {
+export class EditorsModule {
 }

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'checkbox-inputs',
-  template: require('./checkboxInputs.html'),
+  templateUrl: './checkboxInputs.html',
 })
 export class CheckboxInputs {
   public checkboxModel = [{

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'group-inputs',
-  template: require('./groupInputs.html'),
+  templateUrl: './groupInputs.html',
 })
 export class GroupInputs {
 

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'rating-inputs',
-  template: require('./ratinginputs.html')
+  templateUrl: './ratinginputs.html'
 })
 
 export class Rating {

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

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'select-inputs',
-  styles: [require('./selectInput.scss')],
-  template: require('./selectInputs.html')
+  styleUrls: ['./selectInput.scss'],
+  templateUrl: './selectInputs.html'
 })
 export class SelectInputs {
   constructor() { }

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'standard-inputs',
-  template: require('./standardInputs.html'),
+  templateUrl: './standardInputs.html',
 })
 export class StandardInputs {
 

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'validation-inputs',
-  template: require('./validationInputs.html'),
+  templateUrl: './validationInputs.html',
 })
 export class ValidationInputs {
   public checkboxModel = [{

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

@@ -2,8 +2,8 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'inputs',
-  encapsulation: ViewEncapsulation.None,
-  template: require('./inputs.html'),
+  // encapsulation: ViewEncapsulation.None,
+  templateUrl: './inputs.html',
 })
 export class Inputs {
 

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'basic-form',
-  template: require('./basicForm.html'),
+  templateUrl: './basicForm.html',
 })
 export class BasicForm {
 

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'block-form',
-  template: require('./blockForm.html'),
+  templateUrl: './blockForm.html',
 })
 export class BlockForm {
 

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'horizontal-form',
-  template: require('./horizontalForm.html'),
+  templateUrl: './horizontalForm.html',
 })
 export class HorizontalForm {
 

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

@@ -2,8 +2,8 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'inline-form',
-  styles: [require('./inlineForm.scss')],
-  template: require('./inlineForm.html'),
+  styleUrls: ['./inlineForm.scss'],
+  templateUrl: './inlineForm.html',
 })
 export class InlineForm {
 

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'without-labels-form',
-  template: require('./withoutLabelsForm.html'),
+  templateUrl: './withoutLabelsForm.html',
 })
 export class WithoutLabelsForm {
 

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

@@ -2,9 +2,9 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'layouts',
-  encapsulation: ViewEncapsulation.None,
+  // encapsulation: ViewEncapsulation.None,
   styles: [],
-  template: require('./layouts.html'),
+  templateUrl: './layouts.html',
 })
 export class Layouts {
 

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

@@ -48,5 +48,5 @@ import { WithoutLabelsForm } from './components/layouts/components/withoutLabels
     WithoutLabelsForm
   ]
 })
-export default class FormsModule {
+export class FormsModule {
 }

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

@@ -3,9 +3,9 @@ import {FormGroup, AbstractControl, FormBuilder, Validators} from '@angular/form
 
 @Component({
   selector: 'login',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./login.scss')],
-  template: require('./login.html'),
+  // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./login.scss'],
+  templateUrl: './login.html',
 })
 export class Login {
 

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

@@ -19,4 +19,4 @@ import { routing }       from './login.routing';
     Login
   ]
 })
-export default class LoginModule {}
+export class LoginModule {}

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

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

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

@@ -1,12 +1,11 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 
 import {BubbleMapsService} from './bubbleMaps.service';
+import 'style!./bubbleMaps.scss';
 
 @Component({
   selector: 'bubble-maps',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./bubbleMaps.scss')],
-  template: require('./bubbleMaps.html'),
+  templateUrl: './bubbleMaps.html',
 })
 export class BubbleMaps {
 

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

@@ -1,10 +1,10 @@
 import {Component, ElementRef} from '@angular/core';
-import {GoogleMapsLoader} from './googleMaps.loader';
+import * as GoogleMapsLoader from 'google-maps';
 
 @Component({
   selector: 'google-maps',
-  styles: [require('./googleMaps.scss')],
-  template: require('./googleMaps.html'),
+  styleUrls: ['./googleMaps.scss'],
+  templateUrl: './googleMaps.html',
 })
 export class GoogleMaps {
 

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

@@ -1 +1 @@
-export const GoogleMapsLoader = require('google-maps');
+import * as GoogleMapsLoader from 'google-maps';

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

@@ -1,12 +1,11 @@
-import {Component, ViewEncapsulation, ElementRef} from '@angular/core';
+import {Component, ElementRef} from '@angular/core';
 
 import './leafletMaps.loader';
 
 @Component({
   selector: 'leaflet-maps',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./leafletMaps.scss')],
-  template: require('./leafletMaps.html')
+  styleUrls: ['./leafletMaps.scss'],
+  templateUrl: './leafletMaps.html'
 })
 export class LeafletMaps {
 

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

@@ -1,2 +1 @@
-require('leaflet-map');
-require('style-loader!leaflet/dist/leaflet.css');
+import 'leaflet-map';

src/app/pages/maps/components/leafletMaps/leafletMaps.scss

@@ -1,3 +1,4 @@
+@import "~leaflet/dist/leaflet";
 @import '../../../../theme/sass/conf/conf';
 
 .leaflet-maps {

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

@@ -1,12 +1,11 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component} from '@angular/core';
 
 import {LineMapsService} from './lineMaps.service';
+import 'style!./lineMaps.scss';
 
 @Component({
   selector: 'line-maps',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./lineMaps.scss')],
-  template: require('./lineMaps.html')
+  templateUrl: './lineMaps.html'
 })
 export class LineMaps {
 

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

@@ -32,4 +32,4 @@ import { LineMapsService } from './components/lineMaps/lineMaps.service';
     LineMapsService
   ]
 })
-export default class MapsModule {}
+export class MapsModule {}

src/app/pages/pages.component.ts

@@ -1,7 +1,7 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 @Component({
   selector: 'pages',
-  encapsulation: ViewEncapsulation.None,
+  // encapsulation: ViewEncapsulation.None,
   styles: [],
   template: `
     <ba-sidebar></ba-sidebar>

src/app/pages/pages.routing.ts

@@ -1,30 +1,34 @@
 import { Routes, RouterModule }  from '@angular/router';
 import { Pages } from './pages.component';
+import { ModuleWithProviders } from '@angular/core';
 // noinspection TypeScriptValidateTypes
-const routes: Routes = [
+
+// export function loadChildren(path) { return System.import(path); };
+
+export const routes: Routes = [
   {
     path: 'login',
-    loadChildren: () => System.import('./login/login.module')
+    loadChildren: 'app/pages/login/login.module#LoginModule'
   },
   {
     path: 'register',
-    loadChildren: () => System.import('./register/register.module')
+    loadChildren: 'app/pages/register/register.module#RegisterModule'
   },
   {
     path: 'pages',
     component: Pages,
     children: [
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
-      { path: 'dashboard', loadChildren: () => System.import('./dashboard/dashboard.module') },
-      { path: 'editors', loadChildren: () => System.import('./editors/editors.module') },
-      //{ path: 'components', loadChildren: () => System.import('./components/components.module') }
-      { path: 'charts', loadChildren: () => System.import('./charts/charts.module') },
-      { path: 'ui', loadChildren: () => System.import('./ui/ui.module') },
-      { path: 'forms', loadChildren: () => System.import('./forms/forms.module') },
-      { path: 'tables', loadChildren: () => System.import('./tables/tables.module') },
-      { path: 'maps', loadChildren: () => System.import('./maps/maps.module') }
+      { path: 'dashboard', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule' },
+      { path: 'editors', loadChildren: 'app/pages/editors/editors.module#EditorsModule' },
+      // //{ path: 'components', loadChildren: 'app/pages/components/components.module') }
+      { path: 'charts', loadChildren: 'app/pages/charts/charts.module#ChartsModule' },
+      { path: 'ui', loadChildren: 'app/pages/ui/ui.module#UiModule' },
+      { path: 'forms', loadChildren: 'app/pages/forms/forms.module#FormsModule' },
+      { path: 'tables', loadChildren: 'app/pages/tables/tables.module#TablesModule' },
+      { path: 'maps', loadChildren: 'app/pages/maps/maps.module#MapsModule' }
     ]
   }
 ];
 
-export const routing = RouterModule.forChild(routes);
+export const routing: ModuleWithProviders = RouterModule.forChild(routes);

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

@@ -4,9 +4,9 @@ import {EmailValidator, EqualPasswordsValidator} from '../../theme/validators';
 
 @Component({
   selector: 'register',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./register.scss')],
-  template: require('./register.html'),
+  // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./register.scss'],
+  templateUrl: './register.html',
 })
 export class Register {
 

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

@@ -19,4 +19,4 @@ import { routing }       from './register.routing';
     Register
   ]
 })
-export default class RegisterModule {}
+export class RegisterModule {}

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

@@ -2,9 +2,9 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'basic-tables',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./basicTables.scss')],
-  template: require('./basicTables.html')
+  // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./basicTables.scss'],
+  templateUrl: './basicTables.html'
 })
 export class BasicTables {
 

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

@@ -4,7 +4,7 @@ import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'bordered-table',
-  template: require('./borderedTable.html'),
+  templateUrl: './borderedTable.html',
 })
 export class BorderedTable {
 

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

@@ -4,7 +4,7 @@ import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'condensed-table',
-  template: require('./condensedTable.html')
+  templateUrl: './condensedTable.html'
 })
 export class CondensedTable {
 

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'contextual-table',
-  template: require('./contextualTable.html'),
+  templateUrl: './contextualTable.html',
 })
 export class ContextualTable {
 

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

@@ -4,7 +4,7 @@ import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'hover-table',
-  template: require('./hoverTable.html')
+  templateUrl: './hoverTable.html'
 })
 export class HoverTable {
 

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'responsive-table',
-  template: require('./responsiveTable.html'),
+  templateUrl: './responsiveTable.html',
 })
 export class ResponsiveTable {
 

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

@@ -4,7 +4,7 @@ import {BasicTablesService} from '../../basicTables.service';
 
 @Component({
   selector: 'striped-table',
-  template: require('./stripedTable.html')
+  templateUrl: './stripedTable.html'
 })
 export class StripedTable {
 

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

@@ -1 +0,0 @@
-export * from './smartTables.component';

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

@@ -1,74 +0,0 @@
-import {Component, ViewEncapsulation} from '@angular/core';
-
-import { SmartTablesService } from './smartTables.service';
-import { LocalDataSource } from 'ng2-smart-table';
-
-@Component({
-  selector: 'basic-tables',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./smartTables.scss')],
-  template: require('./smartTables.html')
-})
-export class SmartTables {
-
-  query: string = '';
-
-  settings = {
-    add: {
-      addButtonContent: '<i class="ion-ios-plus-outline"></i>',
-      createButtonContent: '<i class="ion-checkmark"></i>',
-      cancelButtonContent: '<i class="ion-close"></i>',
-    },
-    edit: {
-      editButtonContent: '<i class="ion-edit"></i>',
-      saveButtonContent: '<i class="ion-checkmark"></i>',
-      cancelButtonContent: '<i class="ion-close"></i>',
-    },
-    delete: {
-      deleteButtonContent: '<i class="ion-trash-a"></i>',
-      confirmDelete: true
-    },
-    columns: {
-      id: {
-        title: 'ID',
-        type: 'number'
-      },
-      firstName: {
-        title: 'First Name',
-        type: 'string'
-      },
-      lastName: {
-        title: 'Last Name',
-        type: 'string'
-      },
-      username: {
-        title: 'Username',
-        type: 'string'
-      },
-      email: {
-        title: 'E-mail',
-        type: 'string'
-      },
-      age: {
-        title: 'Age',
-        type: 'number'
-      }
-    }
-  };
-
-  source: LocalDataSource = new LocalDataSource();
-
-  constructor(protected service: SmartTablesService) {
-    this.service.getData().then((data) => {
-      this.source.load(data);
-    });
-  }
-
-  onDeleteConfirm(event): void {
-    if (window.confirm('Are you sure you want to delete?')) {
-      event.confirm.resolve();
-    } else {
-      event.confirm.reject();
-    }
-  }
-}

src/app/pages/tables/components/smartTables/smartTables.html

@@ -1,9 +0,0 @@
-<div class="widgets">
-
-  <div class="row">
-    <ba-card title="Basic Example" baCardClass="with-scroll">
-      <ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)"></ng2-smart-table>
-    </ba-card>
-  </div>
-
-</div>

src/app/pages/tables/components/smartTables/smartTables.scss

@@ -1,59 +0,0 @@
-@import "../../../../theme/sass/conf/conf";
-
-.ng2-smart-table-container table.ng2-smart-table {
-  th, td {
-    border: 1px solid $border-light !important;
-    line-height: 35px;
-    vertical-align: middle;
-  }
-
-  color: $default-text;
-
-  input {
-    line-height: 1.5 !important;
-  }
-
-  tbody {
-    tr:hover {
-      background: rgba(0, 0, 0, 0.03);
-    }
-  }
-
-  a.ng2-smart-sort-link {
-    font-size: 14px !important;
-    color: $default-text;
-    font-weight: $font-bolder;
-    &.sort {
-      font-weight: $font-bolder !important;
-
-      &::after {
-        border-bottom-color: $default-text !important;
-      }
-    }
-  }
-
-  .ng2-smart-actions {
-    width: 70px;
-    text-align: center;
-    .actions {
-      float: none;
-      text-align: center;
-    }
-  }
-
-  a.ng2-smart-action {
-    font-size: 14px !important;
-    color: $default-text;
-    padding: 0 5px;
-    display: inline-block;
-
-    &.ng2-smart-action-add-add {
-      font-size: 25px !important;
-    }
-  }
-}
-
-nav.ng2-smart-pagination-nav {
-  display: flex;
-  justify-content: center;
-}

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

@@ -1,549 +0,0 @@
-import {Injectable} from '@angular/core';
-
-@Injectable()
-export class SmartTablesService {
-
-  smartTableData = [
-    {
-      id: 1,
-      firstName: 'Mark',
-      lastName: 'Otto',
-      username: '@mdo',
-      email: 'mdo@gmail.com',
-      age: '28'
-    },
-    {
-      id: 2,
-      firstName: 'Jacob',
-      lastName: 'Thornton',
-      username: '@fat',
-      email: 'fat@yandex.ru',
-      age: '45'
-    },
-    {
-      id: 3,
-      firstName: 'Larry',
-      lastName: 'Bird',
-      username: '@twitter',
-      email: 'twitter@outlook.com',
-      age: '18'
-    },
-    {
-      id: 4,
-      firstName: 'John',
-      lastName: 'Snow',
-      username: '@snow',
-      email: 'snow@gmail.com',
-      age: '20'
-    },
-    {
-      id: 5,
-      firstName: 'Jack',
-      lastName: 'Sparrow',
-      username: '@jack',
-      email: 'jack@yandex.ru',
-      age: '30'
-    },
-    {
-      id: 6,
-      firstName: 'Ann',
-      lastName: 'Smith',
-      username: '@ann',
-      email: 'ann@gmail.com',
-      age: '21'
-    },
-    {
-      id: 7,
-      firstName: 'Barbara',
-      lastName: 'Black',
-      username: '@barbara',
-      email: 'barbara@yandex.ru',
-      age: '43'
-    },
-    {
-      id: 8,
-      firstName: 'Sevan',
-      lastName: 'Bagrat',
-      username: '@sevan',
-      email: 'sevan@outlook.com',
-      age: '13'
-    },
-    {
-      id: 9,
-      firstName: 'Ruben',
-      lastName: 'Vardan',
-      username: '@ruben',
-      email: 'ruben@gmail.com',
-      age: '22'
-    },
-    {
-      id: 10,
-      firstName: 'Karen',
-      lastName: 'Sevan',
-      username: '@karen',
-      email: 'karen@yandex.ru',
-      age: '33'
-    },
-    {
-      id: 11,
-      firstName: 'Mark',
-      lastName: 'Otto',
-      username: '@mark',
-      email: 'mark@gmail.com',
-      age: '38'
-    },
-    {
-      id: 12,
-      firstName: 'Jacob',
-      lastName: 'Thornton',
-      username: '@jacob',
-      email: 'jacob@yandex.ru',
-      age: '48'
-    },
-    {
-      id: 13,
-      firstName: 'Haik',
-      lastName: 'Hakob',
-      username: '@haik',
-      email: 'haik@outlook.com',
-      age: '48'
-    },
-    {
-      id: 14,
-      firstName: 'Garegin',
-      lastName: 'Jirair',
-      username: '@garegin',
-      email: 'garegin@gmail.com',
-      age: '40'
-    },
-    {
-      id: 15,
-      firstName: 'Krikor',
-      lastName: 'Bedros',
-      username: '@krikor',
-      email: 'krikor@yandex.ru',
-      age: '32'
-    },
-    {
-      "id": 16,
-      "firstName": "Francisca",
-      "lastName": "Brady",
-      "username": "@Gibson",
-      "email": "franciscagibson@comtours.com",
-      "age": 11
-    },
-    {
-      "id": 17,
-      "firstName": "Tillman",
-      "lastName": "Figueroa",
-      "username": "@Snow",
-      "email": "tillmansnow@comtours.com",
-      "age": 34
-    },
-    {
-      "id": 18,
-      "firstName": "Jimenez",
-      "lastName": "Morris",
-      "username": "@Bryant",
-      "email": "jimenezbryant@comtours.com",
-      "age": 45
-    },
-    {
-      "id": 19,
-      "firstName": "Sandoval",
-      "lastName": "Jacobson",
-      "username": "@Mcbride",
-      "email": "sandovalmcbride@comtours.com",
-      "age": 32
-    },
-    {
-      "id": 20,
-      "firstName": "Griffin",
-      "lastName": "Torres",
-      "username": "@Charles",
-      "email": "griffincharles@comtours.com",
-      "age": 19
-    },
-    {
-      "id": 21,
-      "firstName": "Cora",
-      "lastName": "Parker",
-      "username": "@Caldwell",
-      "email": "coracaldwell@comtours.com",
-      "age": 27
-    },
-    {
-      "id": 22,
-      "firstName": "Cindy",
-      "lastName": "Bond",
-      "username": "@Velez",
-      "email": "cindyvelez@comtours.com",
-      "age": 24
-    },
-    {
-      "id": 23,
-      "firstName": "Frieda",
-      "lastName": "Tyson",
-      "username": "@Craig",
-      "email": "friedacraig@comtours.com",
-      "age": 45
-    },
-    {
-      "id": 24,
-      "firstName": "Cote",
-      "lastName": "Holcomb",
-      "username": "@Rowe",
-      "email": "coterowe@comtours.com",
-      "age": 20
-    },
-    {
-      "id": 25,
-      "firstName": "Trujillo",
-      "lastName": "Mejia",
-      "username": "@Valenzuela",
-      "email": "trujillovalenzuela@comtours.com",
-      "age": 16
-    },
-    {
-      "id": 26,
-      "firstName": "Pruitt",
-      "lastName": "Shepard",
-      "username": "@Sloan",
-      "email": "pruittsloan@comtours.com",
-      "age": 44
-    },
-    {
-      "id": 27,
-      "firstName": "Sutton",
-      "lastName": "Ortega",
-      "username": "@Black",
-      "email": "suttonblack@comtours.com",
-      "age": 42
-    },
-    {
-      "id": 28,
-      "firstName": "Marion",
-      "lastName": "Heath",
-      "username": "@Espinoza",
-      "email": "marionespinoza@comtours.com",
-      "age": 47
-    },
-    {
-      "id": 29,
-      "firstName": "Newman",
-      "lastName": "Hicks",
-      "username": "@Keith",
-      "email": "newmankeith@comtours.com",
-      "age": 15
-    },
-    {
-      "id": 30,
-      "firstName": "Boyle",
-      "lastName": "Larson",
-      "username": "@Summers",
-      "email": "boylesummers@comtours.com",
-      "age": 32
-    },
-    {
-      "id": 31,
-      "firstName": "Haynes",
-      "lastName": "Vinson",
-      "username": "@Mckenzie",
-      "email": "haynesmckenzie@comtours.com",
-      "age": 15
-    },
-    {
-      "id": 32,
-      "firstName": "Miller",
-      "lastName": "Acosta",
-      "username": "@Young",
-      "email": "milleryoung@comtours.com",
-      "age": 55
-    },
-    {
-      "id": 33,
-      "firstName": "Johnston",
-      "lastName": "Brown",
-      "username": "@Knight",
-      "email": "johnstonknight@comtours.com",
-      "age": 29
-    },
-    {
-      "id": 34,
-      "firstName": "Lena",
-      "lastName": "Pitts",
-      "username": "@Forbes",
-      "email": "lenaforbes@comtours.com",
-      "age": 25
-    },
-    {
-      "id": 35,
-      "firstName": "Terrie",
-      "lastName": "Kennedy",
-      "username": "@Branch",
-      "email": "terriebranch@comtours.com",
-      "age": 37
-    },
-    {
-      "id": 36,
-      "firstName": "Louise",
-      "lastName": "Aguirre",
-      "username": "@Kirby",
-      "email": "louisekirby@comtours.com",
-      "age": 44
-    },
-    {
-      "id": 37,
-      "firstName": "David",
-      "lastName": "Patton",
-      "username": "@Sanders",
-      "email": "davidsanders@comtours.com",
-      "age": 26
-    },
-    {
-      "id": 38,
-      "firstName": "Holden",
-      "lastName": "Barlow",
-      "username": "@Mckinney",
-      "email": "holdenmckinney@comtours.com",
-      "age": 11
-    },
-    {
-      "id": 39,
-      "firstName": "Baker",
-      "lastName": "Rivera",
-      "username": "@Montoya",
-      "email": "bakermontoya@comtours.com",
-      "age": 47
-    },
-    {
-      "id": 40,
-      "firstName": "Belinda",
-      "lastName": "Lloyd",
-      "username": "@Calderon",
-      "email": "belindacalderon@comtours.com",
-      "age": 21
-    },
-    {
-      "id": 41,
-      "firstName": "Pearson",
-      "lastName": "Patrick",
-      "username": "@Clements",
-      "email": "pearsonclements@comtours.com",
-      "age": 42
-    },
-    {
-      "id": 42,
-      "firstName": "Alyce",
-      "lastName": "Mckee",
-      "username": "@Daugherty",
-      "email": "alycedaugherty@comtours.com",
-      "age": 55
-    },
-    {
-      "id": 43,
-      "firstName": "Valencia",
-      "lastName": "Spence",
-      "username": "@Olsen",
-      "email": "valenciaolsen@comtours.com",
-      "age": 20
-    },
-    {
-      "id": 44,
-      "firstName": "Leach",
-      "lastName": "Holcomb",
-      "username": "@Humphrey",
-      "email": "leachhumphrey@comtours.com",
-      "age": 28
-    },
-    {
-      "id": 45,
-      "firstName": "Moss",
-      "lastName": "Baxter",
-      "username": "@Fitzpatrick",
-      "email": "mossfitzpatrick@comtours.com",
-      "age": 51
-    },
-    {
-      "id": 46,
-      "firstName": "Jeanne",
-      "lastName": "Cooke",
-      "username": "@Ward",
-      "email": "jeanneward@comtours.com",
-      "age": 59
-    },
-    {
-      "id": 47,
-      "firstName": "Wilma",
-      "lastName": "Briggs",
-      "username": "@Kidd",
-      "email": "wilmakidd@comtours.com",
-      "age": 53
-    },
-    {
-      "id": 48,
-      "firstName": "Beatrice",
-      "lastName": "Perry",
-      "username": "@Gilbert",
-      "email": "beatricegilbert@comtours.com",
-      "age": 39
-    },
-    {
-      "id": 49,
-      "firstName": "Whitaker",
-      "lastName": "Hyde",
-      "username": "@Mcdonald",
-      "email": "whitakermcdonald@comtours.com",
-      "age": 35
-    },
-    {
-      "id": 50,
-      "firstName": "Rebekah",
-      "lastName": "Duran",
-      "username": "@Gross",
-      "email": "rebekahgross@comtours.com",
-      "age": 40
-    },
-    {
-      "id": 51,
-      "firstName": "Earline",
-      "lastName": "Mayer",
-      "username": "@Woodward",
-      "email": "earlinewoodward@comtours.com",
-      "age": 52
-    },
-    {
-      "id": 52,
-      "firstName": "Moran",
-      "lastName": "Baxter",
-      "username": "@Johns",
-      "email": "moranjohns@comtours.com",
-      "age": 20
-    },
-    {
-      "id": 53,
-      "firstName": "Nanette",
-      "lastName": "Hubbard",
-      "username": "@Cooke",
-      "email": "nanettecooke@comtours.com",
-      "age": 55
-    },
-    {
-      "id": 54,
-      "firstName": "Dalton",
-      "lastName": "Walker",
-      "username": "@Hendricks",
-      "email": "daltonhendricks@comtours.com",
-      "age": 25
-    },
-    {
-      "id": 55,
-      "firstName": "Bennett",
-      "lastName": "Blake",
-      "username": "@Pena",
-      "email": "bennettpena@comtours.com",
-      "age": 13
-    },
-    {
-      "id": 56,
-      "firstName": "Kellie",
-      "lastName": "Horton",
-      "username": "@Weiss",
-      "email": "kellieweiss@comtours.com",
-      "age": 48
-    },
-    {
-      "id": 57,
-      "firstName": "Hobbs",
-      "lastName": "Talley",
-      "username": "@Sanford",
-      "email": "hobbssanford@comtours.com",
-      "age": 28
-    },
-    {
-      "id": 58,
-      "firstName": "Mcguire",
-      "lastName": "Donaldson",
-      "username": "@Roman",
-      "email": "mcguireroman@comtours.com",
-      "age": 38
-    },
-    {
-      "id": 59,
-      "firstName": "Rodriquez",
-      "lastName": "Saunders",
-      "username": "@Harper",
-      "email": "rodriquezharper@comtours.com",
-      "age": 20
-    },
-    {
-      "id": 60,
-      "firstName": "Lou",
-      "lastName": "Conner",
-      "username": "@Sanchez",
-      "email": "lousanchez@comtours.com",
-      "age": 16
-    }
-  ];
-
-  metricsTableData = [
-    {
-      image: 'app/browsers/chrome.svg',
-      browser: 'Google Chrome',
-      visits: '10,392',
-      isVisitsUp: true,
-      purchases: '4,214',
-      isPurchasesUp: true,
-      percent: '45%',
-      isPercentUp: true
-    },
-    {
-      image: 'app/browsers/firefox.svg',
-      browser: 'Mozilla Firefox',
-      visits: '7,873',
-      isVisitsUp: true,
-      purchases: '3,031',
-      isPurchasesUp: false,
-      percent: '28%',
-      isPercentUp: true
-    },
-    {
-      image: 'app/browsers/ie.svg',
-      browser: 'Internet Explorer',
-      visits: '5,890',
-      isVisitsUp: false,
-      purchases: '2,102',
-      isPurchasesUp: false,
-      percent: '17%',
-      isPercentUp: false
-    },
-    {
-      image: 'app/browsers/safari.svg',
-      browser: 'Safari',
-      visits: '4,001',
-      isVisitsUp: false,
-      purchases: '1,001',
-      isPurchasesUp: false,
-      percent: '14%',
-      isPercentUp: true
-    },
-    {
-      image: 'app/browsers/opera.svg',
-      browser: 'Opera',
-      visits: '1,833',
-      isVisitsUp: true,
-      purchases: '83',
-      isPurchasesUp: true,
-      percent: '5%',
-      isPercentUp: false
-    }
-  ];
-
-  getData(): Promise<any> {
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve(this.smartTableData);
-      }, 2000);
-    });
-  }
-}

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

@@ -6,8 +6,6 @@ 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';
-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';
@@ -15,7 +13,6 @@ 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({
@@ -23,13 +20,11 @@ import { SmartTablesService } from './components/smartTables/smartTables.service
     CommonModule,
     FormsModule,
     NgaModule,
-    Ng2SmartTableModule,
     routing
   ],
   declarations: [
     Tables,
     BasicTables,
-    SmartTables,
     HoverTable,
     BorderedTable,
     CondensedTable,
@@ -38,8 +33,7 @@ import { SmartTablesService } from './components/smartTables/smartTables.service
     ResponsiveTable
   ],
   providers: [
-    BasicTablesService,
-    SmartTablesService
+    BasicTablesService
   ]
 })
-export default class TablesModule {}
+export class TablesModule {}

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

@@ -2,7 +2,6 @@ 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 = [
@@ -10,8 +9,7 @@ const routes: Routes = [
     path: '',
     component: Tables,
     children: [
-      { path: 'basictables', component: BasicTables },
-      { path: 'smarttables', component: SmartTables }
+      { path: 'basictables', component: BasicTables }
     ]
   }
 ];

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

@@ -2,9 +2,9 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'buttons',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./buttons.scss')],
-  template: require('./buttons.html'),
+  // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./buttons.scss'],
+  templateUrl: './buttons.html',
 })
 export class Buttons {
 

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

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'disabled-buttons',
-  template: require('./disabledButtons.html'),
+  templateUrl: './disabledButtons.html',
 })
 export class DisabledButtons {
 

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

@@ -2,7 +2,7 @@ import {Component, HostListener} from '@angular/core';
 
 @Component({
   selector: 'dropdown-buttons',
-  template: require('./dropdownButtons.html')
+  templateUrl: './dropdownButtons.html'
 })
 
 // TODO: appendToBody does not implemented yet, waiting for it

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

@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'flat-buttons',
-  template: require('./flatButtons.html'),
+  templateUrl: './flatButtons.html',
 })
 export class FlatButtons {
 

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'group-buttons',
-  template: require('./groupButtons.html'),
+  templateUrl: './groupButtons.html',
 })
 export class GroupButtons {
 

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'icon-buttons',
-  template: require('./iconButtons.html'),
+  templateUrl: './iconButtons.html',
 })
 export class IconButtons {
 

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

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'large-buttons',
-  template: require('./largeButtons.html'),
+  templateUrl: './largeButtons.html',
 })
 export class LargeButtons {
 

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

@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'raised-buttons',
-  template: require('./raisedButtons.html'),
+  templateUrl: './raisedButtons.html',
 })
 export class RaisedButtons {
 

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

@@ -3,7 +3,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'sized-buttons',
-  template: require('./sizedButtons.html'),
+  templateUrl: './sizedButtons.html',
 })
 export class SizedButtons {
 

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

@@ -2,9 +2,9 @@ import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'grid',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./grid.scss')],
-  template: require('./grid.html'),
+  // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./grid.scss'],
+  templateUrl: './grid.html',
 })
 export class Grid {
 

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

@@ -4,9 +4,9 @@ import {IconsService} from './icons.service';
 
 @Component({
   selector: 'icons',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./icons.scss')],
-  template: require('./icons.html'),
+  // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./icons.scss'],
+  templateUrl: './icons.html',
 })
 export class Icons {
 

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

@@ -3,8 +3,8 @@ import { ModalDirective } from 'ng2-bootstrap';
 
 @Component({
   selector: 'modals',
-  styles: [require('./modals.scss')],
-  template: require('./modals.html')
+  styleUrls: ['./modals.scss'],
+  templateUrl: './modals.html'
 })
 export class Modals {
   @ViewChild('childModal') childModal: ModalDirective;

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

@@ -4,7 +4,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 @Component({
   selector: 'typography',
   styles: [],
-  template: require('./typography.html'),
+  templateUrl: './typography.html',
 })
 export class Typography {
 

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

@@ -52,5 +52,5 @@ import { IconsService } from './components/icons/icons.service';
     IconsService
   ]
 })
-export default class UiModule {
+export class UiModule {
 }

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

@@ -7,8 +7,9 @@ import {BaAmChartThemeService} from './baAmChartTheme.service';
 
 @Component({
   selector: 'ba-am-chart',
-  template: require('./baAmChart.html'),
-  encapsulation: ViewEncapsulation.None,
+  templateUrl: './baAmChart.html',
+  styleUrls: ['./baAmChart.scss'],
+  // // encapsulation: ViewEncapsulation.None,
   providers: [BaAmChartThemeService],
 })
 export class BaAmChart {

src/app/theme/components/baAmChart/baAmChart.loader.ts

@@ -1,8 +1,6 @@
-require('style-loader!ammap3/ammap/ammap.css');
+import 'amcharts3';
+import 'amcharts3/amcharts/plugins/responsive/responsive.js';
+import 'amcharts3/amcharts/serial.js';
 
-require('amcharts3');
-require('amcharts3/amcharts/plugins/responsive/responsive.js');
-require('amcharts3/amcharts/serial.js');
-
-require('ammap3');
-require('ammap3/ammap/maps/js/worldLow');
+import 'ammap3';
+import 'ammap3/ammap/maps/js/worldLow';

src/app/theme/components/baAmChart/baAmChart.scss

@@ -0,0 +1 @@
+@import "~ammap3/ammap/ammap";

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

@@ -2,7 +2,7 @@ import {Component, ViewChild, HostListener, Input, ElementRef} from '@angular/co
 
 @Component({
   selector: 'ba-back-top',
-  styles: [require('./baBackTop.scss')],
+  styleUrls: ['./baBackTop.scss'],
   template: `
     <i #baBackTop class="fa fa-angle-up back-top ba-back-top" title="Back to Top"></i>
   `
@@ -13,7 +13,7 @@ export class BaBackTop {
   @Input() showSpeed:number = 500;
   @Input() moveSpeed:number = 1000;
 
-  @ViewChild('baBackTop') private _selector:ElementRef;
+  @ViewChild('baBackTop') _selector:ElementRef;
 
   ngAfterViewInit () {
     this._onWindowScroll();

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

@@ -2,11 +2,11 @@ import {Component, ViewEncapsulation, ViewChild, Input} from '@angular/core';
 
 @Component({
   selector: 'ba-card',
-  styles: [require('./baCard.scss')],
-  template: require('./baCard.html'),
-  encapsulation: ViewEncapsulation.None
+  templateUrl: './baCard.html',
+  // encapsulation: ViewEncapsulation.None
 })
 export class BaCard {
   @Input() title:String;
   @Input() baCardClass:String;
+  @Input() cardType:String;
 }

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

@@ -1,23 +1,18 @@
 import {
     Component,
     ViewChild,
-    ViewEncapsulation,
     Input,
     Output,
     ElementRef,
-    EventEmitter,
-    OnInit,
-    OnChanges,
-    OnDestroy,
+    EventEmitter
 } from '@angular/core';
 
-import {Chartist} from './baChartistChart.loader.ts';
+import * as Chartist from 'chartist';
+import 'style!./baChartistChart.scss';
 
 @Component({
   selector: 'ba-chartist-chart',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('chartist/dist/chartist.css'), require('./baChartistChart.scss')],
-  template: require('./baChartistChart.html'),
+  templateUrl: './baChartistChart.html',
   providers: [],
 })
 export class BaChartistChart {

src/app/theme/components/baChartistChart/baChartistChart.loader.ts

@@ -1 +0,0 @@
-export const Chartist = require('chartist');

src/app/theme/components/baChartistChart/baChartistChart.scss

@@ -0,0 +1 @@
+@import "~chartist/dist/chartist";

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

@@ -3,8 +3,9 @@ import {ControlValueAccessor, NgModel} from '@angular/forms';
 
 @Component({
   selector: 'ba-checkbox[ngModel]',
-  styles: [require('./baCheckbox.scss')],
-  template: require('./baCheckbox.html')
+  styleUrls: ['./baCheckbox.scss'],
+  templateUrl: './baCheckbox.html',
+  providers: [NgModel]
 })
 export class BaCheckbox implements ControlValueAccessor {
   @Input() disabled:boolean;

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

@@ -4,8 +4,8 @@ import {GlobalState} from '../../../global.state';
 
 @Component({
   selector: 'ba-content-top',
-  styles: [require('./baContentTop.scss')],
-  template: require('./baContentTop.html'),
+  styleUrls: ['./baContentTop.scss'],
+  templateUrl: './baContentTop.html',
 })
 export class BaContentTop {