feat(aot): aot compilation work in progress

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 {
 

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

@@ -4,8 +4,8 @@ import './baFullCalendar.loader.ts';
 
 @Component({
   selector: 'ba-full-calendar',
-  template: require('./baFullCalendar.html'),
-  encapsulation: ViewEncapsulation.None,
+  templateUrl: './baFullCalendar.html',
+  // // encapsulation: ViewEncapsulation.None,
 })
 export class BaFullCalendar {
 

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

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

src/app/theme/components/baFullCalendar/baFullCalendar.scss

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

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

@@ -7,9 +7,9 @@ import { GlobalState } from '../../../global.state';
 
 @Component({
   selector: 'ba-menu',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./baMenu.scss')],
-  template: require('./baMenu.html')
+  // // encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./baMenu.scss'],
+  templateUrl: './baMenu.html'
 })
 export class BaMenu {
 

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

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

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

@@ -5,8 +5,8 @@ import {BaMsgCenterService} from './baMsgCenter.service';
 @Component({
   selector: 'ba-msg-center',
   providers: [BaMsgCenterService],
-  styles: [require('./baMsgCenter.scss')],
-  template: require('./baMsgCenter.html')
+  styleUrls: ['./baMsgCenter.scss'],
+  templateUrl: './baMsgCenter.html'
 })
 export class BaMsgCenter {
 

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

@@ -3,7 +3,8 @@ import {ControlValueAccessor, NgModel} from '@angular/forms';
 
 @Component({
   selector: 'ba-multi-checkbox[ngModel]',
-  template: require('./baMultiCheckbox.html'),
+  templateUrl: './baMultiCheckbox.html',
+  providers: [NgModel]
 })
 export class BaMultiCheckbox implements ControlValueAccessor {
   @Input() baMultiCheckboxClass:string;

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

@@ -4,9 +4,9 @@ import {GlobalState} from '../../../global.state';
 
 @Component({
   selector: 'ba-page-top',
-  styles: [require('./baPageTop.scss')],
-  template: require('./baPageTop.html'),
-  encapsulation: ViewEncapsulation.None
+  styleUrls: ['./baPageTop.scss'],
+  templateUrl: './baPageTop.html',
+  // encapsulation: ViewEncapsulation.None
 })
 export class BaPageTop {
 

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

@@ -3,8 +3,8 @@ import {Ng2Uploader} from 'ng2-uploader/ng2-uploader';
 
 @Component({
   selector: 'ba-picture-uploader',
-  styles: [require('./baPictureUploader.scss')],
-  template: require('./baPictureUploader.html'),
+  styleUrls: ['./baPictureUploader.scss'],
+  templateUrl: './baPictureUploader.html',
   providers: [Ng2Uploader]
 })
 export class BaPictureUploader {

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

@@ -2,18 +2,17 @@ import {Component, ElementRef, HostListener, ViewEncapsulation} from '@angular/c
 import {GlobalState} from '../../../global.state';
 import {layoutSizes} from '../../../theme';
 
+import 'style!./baSidebar.scss';
+
 @Component({
   selector: 'ba-sidebar',
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('./baSidebar.scss')],
-  template: require('./baSidebar.html')
+  templateUrl: './baSidebar.html'
 })
 export class BaSidebar {
   public menuHeight:number;
   public isMenuCollapsed:boolean = false;
   public isMenuShouldCollapsed:boolean = false;
 
-
   constructor(private _elementRef:ElementRef, private _state:GlobalState) {
 
     this._state.subscribe('menu.isCollapsed', (isCollapsed) => {

src/app/theme/components/baSidebar/baSidebar.html

@@ -1,4 +1,4 @@
-<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea" sidebarResize>
+<aside class="al-sidebar" sidebarResize>
   <ba-menu [menuHeight]="menuHeight"
            [sidebarCollapsed]="isMenuCollapsed"
            (expandMenu)="menuExpand()"></ba-menu>

src/app/theme/directives/baSlimScroll/baSlimScroll.loader.ts

@@ -1 +1 @@
-require('jquery-slimscroll');
+import 'jquery-slimscroll';