diff --git a/config/webpack.aot.js b/config/webpack.aot.js
new file mode 100644
index 00000000..d2d35540
--- /dev/null
+++ b/config/webpack.aot.js
@@ -0,0 +1,548 @@
+const helpers = require('./helpers');
+const webpackMerge = require('webpack-merge'); // used to merge webpack configs
+const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
+const ngtools = require('@ngtools/webpack');
+const webpack = require('webpack');
+
+/**
+ * Webpack Plugins
+ */
+const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
+const DefinePlugin = require('webpack/lib/DefinePlugin');
+const IgnorePlugin = require('webpack/lib/IgnorePlugin');
+const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
+const ProvidePlugin = require('webpack/lib/ProvidePlugin');
+const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
+const WebpackMd5Hash = require('webpack-md5-hash');
+const AssetsPlugin = require('assets-webpack-plugin');
+const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
+const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
+const HtmlElementsPlugin = require('./html-elements-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+/**
+ * Webpack Constants
+ */
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+const HOST = process.env.HOST || 'localhost';
+const PORT = process.env.PORT || 8080;
+const METADATA = webpackMerge(commonConfig({
+  env: ENV
+}).metadata, {
+  host: HOST,
+  port: PORT,
+  ENV: ENV,
+  HMR: false
+});
+
+module.exports = function (env) {
+  isProd = true;
+  return {
+
+    /**
+     * Developer tool to enhance debugging
+     *
+     * See: http://webpack.github.io/docs/configuration.html#devtool
+     * See: https://github.com/webpack/docs/wiki/build-performance#sourcemaps
+     */
+    devtool: 'source-map',
+
+    /*
+     * The entry point for the bundle
+     * Our Angular.js app
+     *
+     * See: http://webpack.github.io/docs/configuration.html#entry
+     */
+    entry: {
+
+      'polyfills': './src/polyfills.browser.ts',
+      'vendor': './src/vendor.browser.ts',
+      'main': './src/main.browser.aot.ts'
+
+    },
+
+    /*
+     * Options affecting the resolving of modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#resolve
+     */
+    resolve: {
+
+      /*
+       * An array of extensions that should be used to resolve modules.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
+       */
+      extensions: ['.ts', '.js', '.json', '.scss'],
+
+      // An array of directory names to be resolved to the current directory
+      modules: [helpers.root('src'), 'node_modules'],
+
+    },
+
+    /**
+     * Options affecting the output of the compilation.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#output
+     */
+    output: {
+
+      /**
+       * The output directory as absolute path (required).
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-path
+       */
+      path: helpers.root('dist'),
+
+      /**
+       * Specifies the name of each output file on disk.
+       * IMPORTANT: You must not specify an absolute path here!
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-filename
+       */
+      filename: '[name].[chunkhash].bundle.js',
+
+      /**
+       * The filename of the SourceMaps for the JavaScript files.
+       * They are inside the output.path directory.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-sourcemapfilename
+       */
+      sourceMapFilename: '[name].[chunkhash].bundle.map',
+
+      /**
+       * The filename of non-entry chunks as relative path
+       * inside the output.path directory.
+       *
+       * See: http://webpack.github.io/docs/configuration.html#output-chunkfilename
+       */
+      chunkFilename: '[id].[chunkhash].chunk.js'
+
+    },
+
+    /*
+     * Options affecting the normal modules.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#module
+     */
+    module: {
+
+      rules: [
+
+        /*
+         * Typescript loader support for .ts and Angular 2 async routes via .async.ts
+         * Replace templateUrl and stylesUrl with require()
+         *
+         * See: https://github.com/s-panferov/awesome-typescript-loader
+         * See: https://github.com/TheLarkInn/angular2-template-loader
+         */
+        {
+          test: /\.ts$/,
+          loaders: [
+            // '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
+            // 'awesome-typescript-loader',
+            // 'angular2-template-loader',
+            // 'angular2-router-loader'
+            '@ngtools/webpack'
+
+          ],
+          exclude: [/\.(spec|e2e)\.ts$/]
+        },
+
+        /*
+         * Json loader support for *.json files.
+         *
+         * See: https://github.com/webpack/json-loader
+         */
+        {
+          test: /\.json$/,
+          loader: 'json-loader'
+        },
+
+        /*
+         * to string and css loader support for *.css files
+         * Returns file content as string
+         *
+         */
+        {
+          test: /\.css$/,
+          loaders: ['to-string-loader', 'css-loader']
+        },
+
+        /* Raw loader support for *.html
+         * Returns file content as string
+         *
+         * See: https://github.com/webpack/raw-loader
+         */
+        {
+          test: /\.html$/,
+          loader: 'raw-loader',
+          exclude: [helpers.root('src/index.html')]
+        },
+
+        /* File loader for supporting images, for example, in CSS files.
+         */
+        {
+          test: /\.(jpg|png|gif)$/,
+          loader: 'file'
+        },
+        {
+          test: /\.css$/,
+          // loaders: ['to-string-loader', 'css-loader']
+          use: ['raw-loader']
+        },
+
+        {
+          test: /\.scss$/,
+          use: ['raw-loader', 'sass-loader']
+        },
+
+        {
+          test: /\.woff(2)?(\?v=.+)?$/,
+          use: 'url-loader?limit=10000&mimetype=application/font-woff'
+        },
+
+        {
+          test: /\.(ttf|eot|svg)(\?v=.+)?$/,
+          use: 'file-loader'
+        },
+
+        {
+          test: /initial\.scss$/,
+          loader: ExtractTextPlugin.extract({
+            fallbackLoader: 'style-loader',
+            loader: 'css-loader!sass-loader?sourceMap'
+          })
+        },
+
+      ],
+
+
+
+    },
+
+    resolveLoader: {
+      moduleExtensions: ['-loader']
+    },
+
+
+    /**
+     * Add additional plugins to the compiler.
+     *
+     * See: http://webpack.github.io/docs/configuration.html#plugins
+     */
+    plugins: [
+      new ExtractTextPlugin({filename: 'initial.css', allChunks: true}),
+
+      /**
+       * Plugin: WebpackMd5Hash
+       * Description: Plugin to replace a standard webpack chunkhash with md5.
+       *
+       * See: https://www.npmjs.com/package/webpack-md5-hash
+       */
+      new WebpackMd5Hash(),
+
+      new ngtools.AotPlugin({
+        tsConfigPath: './tsconfig.aot.json',
+        baseDir: process.cwd(),
+        entryModule: helpers.root('src/app/app.module') + '#AppModule'
+      }),
+
+      new AssetsPlugin({
+        path: helpers.root('dist'),
+        filename: 'webpack-assets.json',
+        prettyPrint: true
+      }),
+
+      /*
+       * Plugin: ForkCheckerPlugin
+       * Description: Do type checking in a separate process, so webpack don't need to wait.
+       *
+       * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse
+       */
+      new ForkCheckerPlugin(),
+
+      /*
+       * Plugin: CommonsChunkPlugin
+       * Description: Shares common code between the pages.
+       * It identifies common modules and put them into a commons chunk.
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
+       * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app
+       */
+      new CommonsChunkPlugin({
+        name: ['polyfills', 'vendor'].reverse()
+      }),
+
+
+
+      /**
+       * Plugin: ContextReplacementPlugin
+       * Description: Provides context to Angular's use of System.import
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
+       * See: https://github.com/angular/angular/issues/11580
+       */
+      new ContextReplacementPlugin(
+        // The (\\|\/) piece accounts for path separators in *nix and Windows
+        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
+        helpers.root('src') // location of your src
+      ),
+
+      /**
+       * Plugin: DedupePlugin
+       * Description: Prevents the inclusion of duplicate code into your bundle
+       * and instead applies a copy of the function at runtime.
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+       * See: https://github.com/webpack/docs/wiki/optimization#deduplication
+       */
+      // new DedupePlugin(), // see: https://github.com/angular/angular-cli/issues/1587
+
+      /**
+       * Plugin: DefinePlugin
+       * Description: Define free variables.
+       * Useful for having development builds with debug logging or adding global constants.
+       *
+       * фironment helpers
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
+       */
+      // NOTE: when adding more properties make sure you include them in custom-typings.d.ts
+      new DefinePlugin({
+        'ENV': JSON.stringify(METADATA.ENV),
+        'HMR': METADATA.HMR,
+        'process.env': {
+          'ENV': JSON.stringify(METADATA.ENV),
+          'NODE_ENV': JSON.stringify(METADATA.ENV),
+          'HMR': METADATA.HMR,
+        }
+      }),
+
+      /**
+       * Plugin: UglifyJsPlugin
+       * Description: Minimize all JavaScript output of chunks.
+       * Loaders are switched into minimizing mode.
+       *
+       * See: https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
+       */
+      // NOTE: To debug prod builds uncomment //debug lines and comment //prod lines
+      // new UglifyJsPlugin({
+      //   // beautify: true, //debug
+      //   // mangle: false, //debug
+      //   // dead_code: false, //debug
+      //   // unused: false, //debug
+      //   // deadCode: false, //debug
+      //   // compress: {
+      //   //   screw_ie8: true,
+      //   //   keep_fnames: true,
+      //   //   drop_debugger: false,
+      //   //   dead_code: false,
+      //   //   unused: false
+      //   // }, // debug
+      //   // comments: true, //debug
+      //
+      //
+      //   beautify: false, //prod
+      //   mangle: {
+      //     screw_ie8: true,
+      //     keep_fnames: true
+      //   }, //prod
+      //   compress: {
+      //     screw_ie8: true
+      //   }, //prod
+      //   comments: false //prod
+      // }),
+
+      /**
+       * Plugin: NormalModuleReplacementPlugin
+       * Description: Replace resources that matches resourceRegExp with newResource
+       *
+       * See: http://webpack.github.io/docs/list-of-plugins.html#normalmodulereplacementplugin
+       */
+
+      new NormalModuleReplacementPlugin(
+        /angular2-hmr/,
+        helpers.root('config/modules/angular2-hmr-prod.js')
+      ),
+
+      /**
+       * Plugin: IgnorePlugin
+       * Description: Don’t generate modules for requests matching the provided RegExp.
+       *
+       * See: http://webpack.github.io/docs/list-of-plugins.html#ignoreplugin
+       */
+
+      // new IgnorePlugin(/angular2-hmr/),
+
+      /**
+       * Plugin: CompressionPlugin
+       * Description: Prepares compressed versions of assets to serve
+       * them with Content-Encoding
+       *
+       * See: https://github.com/webpack/compression-webpack-plugin
+       */
+      //  install compression-webpack-plugin
+      // new CompressionPlugin({
+      //   regExp: /\.css$|\.html$|\.js$|\.map$/,
+      //   threshold: 2 * 1024
+      // })
+
+      /*
+       * Plugin: CopyWebpackPlugin
+       * Description: Copy files and directories in webpack.
+       *
+       * Copies project static assets.
+       *
+       * See: https://www.npmjs.com/package/copy-webpack-plugin
+       */
+      new CopyWebpackPlugin([
+        { from: 'src/assets', to: 'assets' },
+        { from: 'node_modules/ckeditor', to: 'ckeditor' },
+        { from: 'src/meta'}
+      ]),
+
+
+      /*
+       * Plugin: HtmlWebpackPlugin
+       * Description: Simplifies creation of HTML files to serve your webpack bundles.
+       * This is especially useful for webpack bundles that include a hash in the filename
+       * which changes every compilation.
+       *
+       * See: https://github.com/ampedandwired/html-webpack-plugin
+       */
+      new HtmlWebpackPlugin({
+        template: 'src/index.html',
+        title: METADATA.title,
+        chunksSortMode: 'dependency',
+        metadata: METADATA,
+        inject: 'head'
+      }),
+
+      /*
+       * Plugin: ScriptExtHtmlWebpackPlugin
+       * Description: Enhances html-webpack-plugin functionality
+       * with different deployment options for your scripts including:
+       *
+       * See: https://github.com/numical/script-ext-html-webpack-plugin
+       */
+      new ScriptExtHtmlWebpackPlugin({
+        defaultAttribute: 'defer'
+      }),
+
+      /*
+       * Plugin: HtmlHeadConfigPlugin
+       * Description: Generate html tags based on javascript maps.
+       *
+       * If a publicPath is set in the webpack output configuration, it will be automatically added to
+       * href attributes, you can disable that by adding a "=href": false property.
+       * You can also enable it to other attribute by settings "=attName": true.
+       *
+       * The configuration supplied is map between a location (key) and an element definition object (value)
+       * The location (key) is then exported to the template under then htmlElements property in webpack configuration.
+       *
+       * Example:
+       *  Adding this plugin configuration
+       *  new HtmlElementsPlugin({
+       *    headTags: { ... }
+       *  })
+       *
+       *  Means we can use it in the template like this:
+       *  <%= webpackConfig.htmlElements.headTags %>
+       *
+       * Dependencies: HtmlWebpackPlugin
+       */
+      new HtmlElementsPlugin({
+        headTags: require('./head-config.common')
+      }),
+
+      new webpack.ProvidePlugin({
+        $: "jquery",
+        jQuery: "jquery",
+        "window.jQuery": "jquery",
+        Tether: "tether",
+        "window.Tether": "tether",
+        Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
+        Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
+        Button: "exports-loader?Button!bootstrap/js/dist/button",
+        Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
+        Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
+        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
+        Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
+        Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
+        Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
+        Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
+        Util: "exports-loader?Util!bootstrap/js/dist/util"
+      }),
+
+      /**
+       * Plugin LoaderOptionsPlugin (experimental)
+       *
+       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
+       */
+      new LoaderOptionsPlugin({
+        debug: false,
+        options: {
+          context: helpers.root('src'),
+          output: {
+            path: helpers.root('dist')
+          },
+
+          /**
+           * Static analysis linter for TypeScript advanced options configuration
+           * Description: An extensible linter for the TypeScript language.
+           *
+           * See: https://github.com/wbuchwalter/tslint-loader
+           */
+          tslint: {
+            emitErrors: true,
+            failOnHint: true,
+            resourcePath: 'src'
+          },
+
+
+          /**
+           * Html loader advanced options
+           *
+           * See: https://github.com/webpack/html-loader#advanced-options
+           */
+          // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
+          htmlLoader: {
+            minimize: true,
+            removeAttributeQuotes: false,
+            caseSensitive: true,
+            customAttrSurround: [
+              [/#/, /(?:)/],
+              [/\*/, /(?:)/],
+              [/\[?\(?/, /(?:)/]
+            ],
+            customAttrAssign: [/\)?\]?=/]
+          },
+
+        }
+      }),
+
+    ],
+
+    /*
+     * Include polyfills or mocks for various node stuff
+     * Description: Node configuration
+     *
+     * See: https://webpack.github.io/docs/configuration.html#node
+     */
+    node: {
+      global: true,
+      crypto: 'empty',
+      process: false,
+      module: false,
+      clearImmediate: false,
+      setImmediate: false
+    }
+
+  }
+}
diff --git a/config/webpack.common.js b/config/webpack.common.js
index d6394e25..e45ce064 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -247,6 +247,7 @@ module.exports = function (options) {
        */
       new CopyWebpackPlugin([
         { from: 'src/assets', to: 'assets' },
+        { from: 'node_modules/ckeditor', to: 'ckeditor' },
         { from: 'src/meta'}
       ]),
 
diff --git a/package.json b/package.json
index 0f051c4c..04670fc6 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "homepage": "http://akveo.github.io/ng2-admin/",
   "license": "MIT",
   "dependencies": {
+
     "@angular/common": "2.2.3",
     "@angular/compiler": "2.2.3",
     "@angular/core": "2.2.3",
@@ -15,9 +16,11 @@
     "@angular/platform-browser-dynamic": "2.2.3",
     "@angular/platform-server": "2.2.3",
     "@angular/router": "3.2.3",
+
     "@angularclass/conventions-loader": "^1.0.2",
     "@angularclass/hmr": "~1.2.2",
     "@angularclass/hmr-loader": "~3.0.2",
+
     "amcharts3": "github:amcharts/amcharts3",
     "ammap3": "github:amcharts/ammap3",
     "animate.css": "^3.5.1",
@@ -43,11 +46,11 @@
     "leaflet": "^0.7.7",
     "leaflet-map": "^0.2.1",
     "lodash": "^4.12.0",
-    "ng2-bootstrap": "^1.3.0",
-    "ng2-ckeditor": "1.0.7",
+    "ng2-bootstrap": "1.1.16",
+    "ng2-ckeditor": "1.1.4",
     "ng2-smart-table": "^0.3.2",
     "ng2-tree": "^0.0.2-7",
-    "ng2-uploader": "1.1.0",
+    "ng2-uploader": "1.6.1",
     "normalize.css": "^4.1.1",
     "postcss-loader": "^1.0.0",
     "rxjs": "5.0.0-beta.12",
@@ -55,60 +58,62 @@
     "zone.js": "~0.7.1"
   },
   "devDependencies": {
+    "@ngtools/webpack": "1.1.9",
+    "@angular/compiler-cli": "2.2.3",
+    "angular2-router-loader": "^0.3.4",
+    "angular2-template-loader": "^0.6.0",
     "@types/electron": "^1.3.20",
-    "@types/fullcalendar": "^2.7.35",
     "@types/hammerjs": "^2.0.33",
     "@types/jasmine": "^2.2.34",
-    "@types/jquery ": "^2.0.33",
-    "@types/jquery.slimscroll": "^1.3.30",
-    "@types/lodash": "0.0.28",
     "@types/node": "^6.0.38",
     "@types/source-map": "^0.1.27",
     "@types/uglify-js": "^2.0.27",
     "@types/webpack": "2.0.0",
-    "angular2-router-loader": "^0.3.4",
-    "angular2-template-loader": "^0.6.0",
-    "awesome-typescript-loader": "^2.2.1",
+    "@types/lodash": "0.0.28",
+    "@types/jquery ": "^2.0.33",
+    "@types/fullcalendar": "^2.7.35",
+    "@types/jquery.slimscroll": "^1.3.30",
+    "gh-pages": "^0.11.0",
+    "parse5": "^2.2.2",
+    "rimraf": "~2.5.4",
+    "script-ext-html-webpack-plugin": "^1.3.2",
     "codelyzer": "~1.0.0-beta.4",
-    "compression-webpack-plugin": "0.3.2",
-    "copy-webpack-plugin": "4.0.1",
+    "tslint": "3.15.1",
+    "ts-helpers": "1.1.2",
+    "ts-node": "^1.7.0",
+    "typedoc": "^0.5.0",
+    "typescript": "2.0.3",
+    "awesome-typescript-loader": "^2.2.1",
+    "tslint-loader": "^2.1.3",
+    "url-loader": "^0.5.7",
+    "style-loader": "^0.13.1",
+    "raw-loader": "0.5.1",
+    "source-map-loader": "^0.1.5",
+    "string-replace-loader": "1.0.5",
+    "imports-loader": "^0.6.5",
+    "json-loader": "^0.5.4",
     "css-loader": "^0.25.0",
-    "electron": "^1.4.0",
-    "es6-promise": "^3.1.2",
-    "es6-shim": "^0.35.0",
-    "es7-reflect-metadata": "^1.6.0",
     "exports-loader": "^0.6.3",
     "expose-loader": "^0.7.1",
     "file-loader": "^0.9.0",
-    "gh-pages": "^0.11.0",
-    "html-webpack-plugin": "2.26.0",
-    "imports-loader": "^0.6.5",
-    "json-loader": "^0.5.4",
-    "node-sass": "^3.5.3",
-    "parse5": "^2.2.2",
-    "raw-loader": "0.5.1",
-    "resolve-url-loader": "^1.4.3",
-    "rimraf": "~2.5.4",
-    "sass-loader": "^4.0.2",
-    "script-ext-html-webpack-plugin": "1.5.0",
-    "source-map-loader": "^0.1.5",
-    "string-replace-loader": "1.0.5",
-    "style-loader": "^0.13.1",
     "to-string-loader": "^1.1.4",
-    "ts-helpers": "1.1.2",
-    "ts-node": "^1.7.0",
-    "tslint": "3.15.1",
-    "tslint-loader": "^2.1.3",
-    "typedoc": "^0.5.0",
-    "typescript": "2.0.3",
-    "url-loader": "^0.5.7",
-    "v8-lazy-parse-webpack-plugin": "0.3.0",
-    "webpack": "2.2.0",
-    "webpack-dashboard": "0.2.1",
-    "webpack-dev-middleware": "1.9.0",
-    "webpack-dev-server": "2.2.0",
-    "webpack-md5-hash": "0.0.5",
-    "webpack-merge": "2.4.0"
+    "sass-loader": "^4.0.2",
+    "resolve-url-loader": "^1.4.3",
+    "node-sass": "^3.5.3",
+    "html-webpack-plugin": "^2.21.0",
+    "copy-webpack-plugin": "^3.0.1",
+    "v8-lazy-parse-webpack-plugin": "^0.3.0",
+    "webpack": "2.1.0-beta.27",
+    "webpack-dashboard": "^0.1.8",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-dev-server": "2.1.0-beta.11",
+    "webpack-md5-hash": "^0.0.5",
+    "webpack-merge": "^0.17.0",
+    "compression-webpack-plugin": "^0.3.1",
+    "es6-promise": "^3.1.2",
+    "es6-shim": "^0.35.0",
+    "es7-reflect-metadata": "^1.6.0",
+    "electron": "^1.4.0"
   },
   "scripts": {
     "rimraf": "rimraf",
@@ -154,7 +159,9 @@
     "postbuild:electron.full": "npm run electron:start",
     "build:electron.renderer": "npm run webpack -- --config config/electron/webpack.renderer.prod.js",
     "build:electron.main": "npm run webpack -- --config config/electron/webpack.electron.prod.js",
-    "electron:start": "electron build"
+    "electron:start": "electron build",
+    "prebuild:aot": "npm run clean:dist",
+    "build:aot": "webpack --config config/webpack.aot.js  --progress --profile"
   },
   "repository": {
     "type": "git",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 25441a4d..2bc8edb8 100644
--- a/src/app/app.component.ts
+++ b/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>
diff --git a/src/app/app.loader.ts b/src/app/app.loader.ts
index 6e306cce..c1ff14f7 100644
--- a/src/app/app.loader.ts
+++ b/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';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 99c990bc..dcd7b82c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -24,7 +24,7 @@ const APP_PROVIDERS = [
   GlobalState
 ];
 
-type StoreType = {
+export type StoreType = {
   state: InternalStateType,
   restoreInputValues: () => void,
   disposeOldHosts: () => void
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
index 8b05849d..ad5cd75c 100644
--- a/src/app/app.routing.ts
+++ b/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 });
diff --git a/src/app/app.scss b/src/app/app.scss
index eed9569d..4edfcd5a 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -1 +1,2 @@
+@import "~normalize.css";
 @import "theme/theme";
diff --git a/src/app/environment.ts b/src/app/environment.ts
index c24f64e3..a6c9375b 100644
--- a/src/app/environment.ts
+++ b/src/app/environment.ts
@@ -1,3 +1,5 @@
+// TODO: should be from webpack
+const ENV = 'production';
 
 // Angular 2
 // rc2 workaround
diff --git a/src/app/pages/charts/charts.module.ts b/src/app/pages/charts/charts.module.ts
index e9a72762..efaf2fab 100644
--- a/src/app/pages/charts/charts.module.ts
+++ b/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 {}
diff --git a/src/app/pages/charts/components/chartistJs/chartistJs.component.ts b/src/app/pages/charts/components/chartistJs/chartistJs.component.ts
index 4030f3ac..88f48f14 100644
--- a/src/app/pages/charts/components/chartistJs/chartistJs.component.ts
+++ b/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 {
diff --git a/src/app/pages/components/components.component.ts b/src/app/pages/components/components.component.ts
deleted file mode 100644
index 0a3f7a1d..00000000
--- a/src/app/pages/components/components.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'components',
-  styles: [],
-  template: `<router-outlet></router-outlet>`
-})
-export class Components {
-
-  constructor() {
-  }
-
-}
diff --git a/src/app/pages/components/components.module.ts b/src/app/pages/components/components.module.ts
deleted file mode 100644
index a6fa6b59..00000000
--- a/src/app/pages/components/components.module.ts
+++ /dev/null
@@ -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 {}
diff --git a/src/app/pages/components/components.routing.ts b/src/app/pages/components/components.routing.ts
deleted file mode 100644
index 8fc5d945..00000000
--- a/src/app/pages/components/components.routing.ts
+++ /dev/null
@@ -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);
diff --git a/src/app/pages/components/components.scss b/src/app/pages/components/components.scss
deleted file mode 100644
index 1999f610..00000000
--- a/src/app/pages/components/components.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '../../theme/sass/treeView';
diff --git a/src/app/pages/components/components/treeView/index.ts b/src/app/pages/components/components/treeView/index.ts
deleted file mode 100644
index 15f949fe..00000000
--- a/src/app/pages/components/components/treeView/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './treeView.component';
diff --git a/src/app/pages/components/components/treeView/treeView.component.ts b/src/app/pages/components/components/treeView/treeView.component.ts
deleted file mode 100644
index 402094b0..00000000
--- a/src/app/pages/components/components/treeView/treeView.component.ts
+++ /dev/null
@@ -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() {
-  }
-
-}
diff --git a/src/app/pages/components/components/treeView/treeView.html b/src/app/pages/components/components/treeView/treeView.html
deleted file mode 100644
index 250124af..00000000
--- a/src/app/pages/components/components/treeView/treeView.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="col-md-6">
-  <ba-card title="basic">
-    <tree id="tree-view" [tree]="tree"></tree>
-  </ba-card>
-</div>
diff --git a/src/app/pages/components/index.ts b/src/app/pages/components/index.ts
deleted file mode 100644
index 86211eac..00000000
--- a/src/app/pages/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components.component';
diff --git a/src/app/pages/dashboard/calendar/calendar.component.ts b/src/app/pages/dashboard/calendar/calendar.component.ts
index fba8e940..857ac6d5 100644
--- a/src/app/pages/dashboard/calendar/calendar.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts
index c711d271..bfbf8e25 100644
--- a/src/app/pages/dashboard/dashboard.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts
index ded799d2..aaba861d 100644
--- a/src/app/pages/dashboard/dashboard.module.ts
+++ b/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 {}
diff --git a/src/app/pages/dashboard/dashboard.routing.ts b/src/app/pages/dashboard/dashboard.routing.ts
index 56bffa50..b1402bbe 100644
--- a/src/app/pages/dashboard/dashboard.routing.ts
+++ b/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);
diff --git a/src/app/pages/dashboard/feed/feed.component.ts b/src/app/pages/dashboard/feed/feed.component.ts
index af408040..b53479a2 100644
--- a/src/app/pages/dashboard/feed/feed.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/dashboard/lineChart/lineChart.component.ts b/src/app/pages/dashboard/lineChart/lineChart.component.ts
index e1512d4d..e38334d4 100644
--- a/src/app/pages/dashboard/lineChart/lineChart.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/dashboard/pieChart/pieChart.component.ts b/src/app/pages/dashboard/pieChart/pieChart.component.ts
index 53a318c7..6071f6e7 100644
--- a/src/app/pages/dashboard/pieChart/pieChart.component.ts
+++ b/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 {
diff --git a/src/app/pages/dashboard/pieChart/pieChart.loader.ts b/src/app/pages/dashboard/pieChart/pieChart.loader.ts
index c5568b93..3470558f 100644
--- a/src/app/pages/dashboard/pieChart/pieChart.loader.ts
+++ b/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';
diff --git a/src/app/pages/dashboard/popularApp/popularApp.component.ts b/src/app/pages/dashboard/popularApp/popularApp.component.ts
index ecf43cbb..6b7015e4 100644
--- a/src/app/pages/dashboard/popularApp/popularApp.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/dashboard/todo/todo.component.ts b/src/app/pages/dashboard/todo/todo.component.ts
index b599bd65..4bc9d93a 100644
--- a/src/app/pages/dashboard/todo/todo.component.ts
+++ b/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>;
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.component.ts b/src/app/pages/dashboard/trafficChart/trafficChart.component.ts
index bf51915f..35c04369 100644
--- a/src/app/pages/dashboard/trafficChart/trafficChart.component.ts
+++ b/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
diff --git a/src/app/pages/dashboard/trafficChart/trafficChart.loader.ts b/src/app/pages/dashboard/trafficChart/trafficChart.loader.ts
index b1f1fcd4..b28b04f6 100644
--- a/src/app/pages/dashboard/trafficChart/trafficChart.loader.ts
+++ b/src/app/pages/dashboard/trafficChart/trafficChart.loader.ts
@@ -1 +1,3 @@
-export const Chart = require('chart.js');
+
+
+
diff --git a/src/app/pages/dashboard/usersMap/usersMap.component.ts b/src/app/pages/dashboard/usersMap/usersMap.component.ts
index 4936be09..e4dcc4ec 100644
--- a/src/app/pages/dashboard/usersMap/usersMap.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/editors/components/ckeditor/ckeditor.component.ts b/src/app/pages/editors/components/ckeditor/ckeditor.component.ts
index 4fb7f006..15d5d392 100644
--- a/src/app/pages/editors/components/ckeditor/ckeditor.component.ts
+++ b/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 {
diff --git a/src/app/pages/editors/components/ckeditor/ckeditor.loader.ts b/src/app/pages/editors/components/ckeditor/ckeditor.loader.ts
index ba0fce39..c272f9c9 100644
--- a/src/app/pages/editors/components/ckeditor/ckeditor.loader.ts
+++ b/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';
diff --git a/src/app/pages/editors/editors.module.ts b/src/app/pages/editors/editors.module.ts
index 681bea74..4a8d2c95 100644
--- a/src/app/pages/editors/editors.module.ts
+++ b/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 {
 }
diff --git a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts
index 351936bf..51906738 100644
--- a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts
+++ b/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 = [{
diff --git a/src/app/pages/forms/components/inputs/components/groupInputs/groupInputs.component.ts b/src/app/pages/forms/components/inputs/components/groupInputs/groupInputs.component.ts
index d2102d42..4e338148 100644
--- a/src/app/pages/forms/components/inputs/components/groupInputs/groupInputs.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.component.ts b/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.component.ts
index 8b2322a8..8926903a 100644
--- a/src/app/pages/forms/components/inputs/components/ratinginputs/ratinginputs.component.ts
+++ b/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 {
diff --git a/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts b/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts
index 88b06579..ed7d5bbb 100644
--- a/src/app/pages/forms/components/inputs/components/selectInputs/selectInputs.component.ts
+++ b/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() { }
diff --git a/src/app/pages/forms/components/inputs/components/standardInputs/standardInputs.component.ts b/src/app/pages/forms/components/inputs/components/standardInputs/standardInputs.component.ts
index 898ba7ad..975f50de 100644
--- a/src/app/pages/forms/components/inputs/components/standardInputs/standardInputs.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/forms/components/inputs/components/validationInputs/validationInputs.component.ts b/src/app/pages/forms/components/inputs/components/validationInputs/validationInputs.component.ts
index f43418f4..101612a1 100644
--- a/src/app/pages/forms/components/inputs/components/validationInputs/validationInputs.component.ts
+++ b/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 = [{
diff --git a/src/app/pages/forms/components/inputs/inputs.component.ts b/src/app/pages/forms/components/inputs/inputs.component.ts
index 829d0642..800d605b 100644
--- a/src/app/pages/forms/components/inputs/inputs.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts b/src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts
index 3a3d60a0..05553d61 100644
--- a/src/app/pages/forms/components/layouts/components/basicForm/basicForm.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/forms/components/layouts/components/blockForm/blockForm.component.ts b/src/app/pages/forms/components/layouts/components/blockForm/blockForm.component.ts
index aa85aeca..587f63b1 100644
--- a/src/app/pages/forms/components/layouts/components/blockForm/blockForm.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts b/src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts
index 4eec8323..bc45a962 100644
--- a/src/app/pages/forms/components/layouts/components/horizontalForm/horizontalForm.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts b/src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts
index 4e11653d..c2d73a6d 100644
--- a/src/app/pages/forms/components/layouts/components/inlineForm/inlineForm.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.component.ts b/src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.component.ts
index c5cfab74..17bcf355 100644
--- a/src/app/pages/forms/components/layouts/components/withoutLabelsForm/withoutLabelsForm.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/forms/components/layouts/layouts.component.ts b/src/app/pages/forms/components/layouts/layouts.component.ts
index b664cb35..bf13d883 100644
--- a/src/app/pages/forms/components/layouts/layouts.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/forms/forms.module.ts b/src/app/pages/forms/forms.module.ts
index 0619f5a1..9c5539da 100644
--- a/src/app/pages/forms/forms.module.ts
+++ b/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 {
 }
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index ded054ad..de6f4c45 100644
--- a/src/app/pages/login/login.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/login/login.module.ts b/src/app/pages/login/login.module.ts
index d6e17afe..1263da88 100644
--- a/src/app/pages/login/login.module.ts
+++ b/src/app/pages/login/login.module.ts
@@ -19,4 +19,4 @@ import { routing }       from './login.routing';
     Login
   ]
 })
-export default class LoginModule {}
+export class LoginModule {}
diff --git a/src/app/pages/login/login.routing.ts b/src/app/pages/login/login.routing.ts
index 2749e97f..3b4796b0 100644
--- a/src/app/pages/login/login.routing.ts
+++ b/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);
diff --git a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts b/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts
index b37257e7..f325e9fb 100644
--- a/src/app/pages/maps/components/bubbleMaps/bubbleMaps.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/maps/components/googleMaps/googleMaps.component.ts b/src/app/pages/maps/components/googleMaps/googleMaps.component.ts
index 99051e26..b88f88ca 100644
--- a/src/app/pages/maps/components/googleMaps/googleMaps.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/maps/components/googleMaps/googleMaps.loader.ts b/src/app/pages/maps/components/googleMaps/googleMaps.loader.ts
index 4ddd34d0..816e69b5 100644
--- a/src/app/pages/maps/components/googleMaps/googleMaps.loader.ts
+++ b/src/app/pages/maps/components/googleMaps/googleMaps.loader.ts
@@ -1 +1 @@
-export const GoogleMapsLoader = require('google-maps');
+import * as GoogleMapsLoader from 'google-maps';
diff --git a/src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts b/src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts
index c88cd5dd..6e5f410f 100644
--- a/src/app/pages/maps/components/leafletMaps/leafletMaps.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/maps/components/leafletMaps/leafletMaps.loader.ts b/src/app/pages/maps/components/leafletMaps/leafletMaps.loader.ts
index 2ad06ae3..ae5ee456 100644
--- a/src/app/pages/maps/components/leafletMaps/leafletMaps.loader.ts
+++ b/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';
diff --git a/src/app/pages/maps/components/leafletMaps/leafletMaps.scss b/src/app/pages/maps/components/leafletMaps/leafletMaps.scss
index e002eceb..61d6df59 100644
--- a/src/app/pages/maps/components/leafletMaps/leafletMaps.scss
+++ b/src/app/pages/maps/components/leafletMaps/leafletMaps.scss
@@ -1,3 +1,4 @@
+@import "~leaflet/dist/leaflet";
 @import '../../../../theme/sass/conf/conf';
 
 .leaflet-maps {
diff --git a/src/app/pages/maps/components/lineMaps/lineMaps.component.ts b/src/app/pages/maps/components/lineMaps/lineMaps.component.ts
index 1ba6c4d9..8b8bad02 100644
--- a/src/app/pages/maps/components/lineMaps/lineMaps.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/maps/maps.module.ts b/src/app/pages/maps/maps.module.ts
index 0688b5d1..648ccdc9 100644
--- a/src/app/pages/maps/maps.module.ts
+++ b/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 {}
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 683d534e..67f50062 100644
--- a/src/app/pages/pages.component.ts
+++ b/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>
diff --git a/src/app/pages/pages.routing.ts b/src/app/pages/pages.routing.ts
index a938b672..bee54590 100644
--- a/src/app/pages/pages.routing.ts
+++ b/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);
diff --git a/src/app/pages/register/register.component.ts b/src/app/pages/register/register.component.ts
index 9d968214..b3f6e8bf 100644
--- a/src/app/pages/register/register.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/register/register.module.ts b/src/app/pages/register/register.module.ts
index 623c0c6c..dafd4f2b 100644
--- a/src/app/pages/register/register.module.ts
+++ b/src/app/pages/register/register.module.ts
@@ -19,4 +19,4 @@ import { routing }       from './register.routing';
     Register
   ]
 })
-export default class RegisterModule {}
+export class RegisterModule {}
diff --git a/src/app/pages/tables/components/basicTables/basicTables.component.ts b/src/app/pages/tables/components/basicTables/basicTables.component.ts
index 6589d82b..f70af3e5 100644
--- a/src/app/pages/tables/components/basicTables/basicTables.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts b/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts
index 683427bd..1000e3a2 100644
--- a/src/app/pages/tables/components/basicTables/components/borderedTable/borderedTable.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts b/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts
index 8fb0cf3d..e240a2d0 100644
--- a/src/app/pages/tables/components/basicTables/components/condensedTable/condensedTable.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/tables/components/basicTables/components/contextualTable/contextualTable.component.ts b/src/app/pages/tables/components/basicTables/components/contextualTable/contextualTable.component.ts
index 1eefb647..b5bc8168 100644
--- a/src/app/pages/tables/components/basicTables/components/contextualTable/contextualTable.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts b/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts
index 37826143..83b1bf60 100644
--- a/src/app/pages/tables/components/basicTables/components/hoverTable/hoverTable.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/tables/components/basicTables/components/responsiveTable/responsiveTable.component.ts b/src/app/pages/tables/components/basicTables/components/responsiveTable/responsiveTable.component.ts
index fb7353af..4110fdfb 100644
--- a/src/app/pages/tables/components/basicTables/components/responsiveTable/responsiveTable.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts b/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts
index 6dfb2ac1..ee0bbace 100644
--- a/src/app/pages/tables/components/basicTables/components/stripedTable/stripedTable.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/tables/components/smartTables/index.ts b/src/app/pages/tables/components/smartTables/index.ts
deleted file mode 100644
index 4492e392..00000000
--- a/src/app/pages/tables/components/smartTables/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './smartTables.component';
diff --git a/src/app/pages/tables/components/smartTables/smartTables.component.ts b/src/app/pages/tables/components/smartTables/smartTables.component.ts
deleted file mode 100644
index 7949c4d2..00000000
--- a/src/app/pages/tables/components/smartTables/smartTables.component.ts
+++ /dev/null
@@ -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();
-    }
-  }
-}
diff --git a/src/app/pages/tables/components/smartTables/smartTables.html b/src/app/pages/tables/components/smartTables/smartTables.html
deleted file mode 100644
index b01cc91c..00000000
--- a/src/app/pages/tables/components/smartTables/smartTables.html
+++ /dev/null
@@ -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>
diff --git a/src/app/pages/tables/components/smartTables/smartTables.scss b/src/app/pages/tables/components/smartTables/smartTables.scss
deleted file mode 100644
index 68524547..00000000
--- a/src/app/pages/tables/components/smartTables/smartTables.scss
+++ /dev/null
@@ -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;
-}
diff --git a/src/app/pages/tables/components/smartTables/smartTables.service.ts b/src/app/pages/tables/components/smartTables/smartTables.service.ts
deleted file mode 100644
index 674861a0..00000000
--- a/src/app/pages/tables/components/smartTables/smartTables.service.ts
+++ /dev/null
@@ -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);
-    });
-  }
-}
diff --git a/src/app/pages/tables/tables.module.ts b/src/app/pages/tables/tables.module.ts
index d6f75f80..ab99244f 100644
--- a/src/app/pages/tables/tables.module.ts
+++ b/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 {}
diff --git a/src/app/pages/tables/tables.routing.ts b/src/app/pages/tables/tables.routing.ts
index 2c8755c7..3ce094e6 100644
--- a/src/app/pages/tables/tables.routing.ts
+++ b/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 }
     ]
   }
 ];
diff --git a/src/app/pages/ui/components/buttons/buttons.component.ts b/src/app/pages/ui/components/buttons/buttons.component.ts
index 07b8bfff..a1e4b33b 100644
--- a/src/app/pages/ui/components/buttons/buttons.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.component.ts b/src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.component.ts
index f912d1dd..12828ca6 100644
--- a/src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.component.ts b/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.component.ts
index 6c89df9a..10305092 100644
--- a/src/app/pages/ui/components/buttons/components/dropdownButtons/dropdownButtons.component.ts
+++ b/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
diff --git a/src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.component.ts b/src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.component.ts
index 0cc4b092..5c0c34b6 100644
--- a/src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/components/buttons/components/groupButtons/groupButtons.component.ts b/src/app/pages/ui/components/buttons/components/groupButtons/groupButtons.component.ts
index 1ff8ee53..726464ff 100644
--- a/src/app/pages/ui/components/buttons/components/groupButtons/groupButtons.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/components/buttons/components/iconButtons/iconButtons.component.ts b/src/app/pages/ui/components/buttons/components/iconButtons/iconButtons.component.ts
index bd369f11..864b0203 100644
--- a/src/app/pages/ui/components/buttons/components/iconButtons/iconButtons.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/components/buttons/components/largeButtons/largeButtons.component.ts b/src/app/pages/ui/components/buttons/components/largeButtons/largeButtons.component.ts
index 73f097c2..9dd40f59 100644
--- a/src/app/pages/ui/components/buttons/components/largeButtons/largeButtons.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.component.ts b/src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.component.ts
index c339552e..d74943bd 100644
--- a/src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.component.ts b/src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.component.ts
index 5462a293..8af72411 100644
--- a/src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/components/grid/grid.component.ts b/src/app/pages/ui/components/grid/grid.component.ts
index f9685b33..83765d00 100644
--- a/src/app/pages/ui/components/grid/grid.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/components/icons/icons.component.ts b/src/app/pages/ui/components/icons/icons.component.ts
index 2b01be1a..f51b0720 100644
--- a/src/app/pages/ui/components/icons/icons.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/components/modals/modals.component.ts b/src/app/pages/ui/components/modals/modals.component.ts
index f7df7b6b..1277523c 100644
--- a/src/app/pages/ui/components/modals/modals.component.ts
+++ b/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;
diff --git a/src/app/pages/ui/components/typography/typography.component.ts b/src/app/pages/ui/components/typography/typography.component.ts
index 544f4253..65f22984 100644
--- a/src/app/pages/ui/components/typography/typography.component.ts
+++ b/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 {
 
diff --git a/src/app/pages/ui/ui.module.ts b/src/app/pages/ui/ui.module.ts
index 5ed69b2b..bba85240 100644
--- a/src/app/pages/ui/ui.module.ts
+++ b/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 {
 }
diff --git a/src/app/theme/components/baAmChart/baAmChart.component.ts b/src/app/theme/components/baAmChart/baAmChart.component.ts
index f6fdead9..14289c04 100644
--- a/src/app/theme/components/baAmChart/baAmChart.component.ts
+++ b/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 {
diff --git a/src/app/theme/components/baAmChart/baAmChart.loader.ts b/src/app/theme/components/baAmChart/baAmChart.loader.ts
index 116eaaf2..47f4dfe1 100644
--- a/src/app/theme/components/baAmChart/baAmChart.loader.ts
+++ b/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';
diff --git a/src/app/theme/components/baAmChart/baAmChart.scss b/src/app/theme/components/baAmChart/baAmChart.scss
new file mode 100644
index 00000000..fee5f398
--- /dev/null
+++ b/src/app/theme/components/baAmChart/baAmChart.scss
@@ -0,0 +1 @@
+@import "~ammap3/ammap/ammap";
diff --git a/src/app/theme/components/baBackTop/baBackTop.component.ts b/src/app/theme/components/baBackTop/baBackTop.component.ts
index 3bcdb94a..0b226bd1 100644
--- a/src/app/theme/components/baBackTop/baBackTop.component.ts
+++ b/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();
diff --git a/src/app/theme/components/baCard/baCard.component.ts b/src/app/theme/components/baCard/baCard.component.ts
index 9f5fd0b2..bac86833 100644
--- a/src/app/theme/components/baCard/baCard.component.ts
+++ b/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;
 }
diff --git a/src/app/theme/components/baCard/baCard.scss b/src/app/theme/components/baCard/baCard.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/app/theme/components/baChartistChart/baChartistChart.component.ts b/src/app/theme/components/baChartistChart/baChartistChart.component.ts
index 2c5f477e..0565f9d6 100644
--- a/src/app/theme/components/baChartistChart/baChartistChart.component.ts
+++ b/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 {
diff --git a/src/app/theme/components/baChartistChart/baChartistChart.loader.ts b/src/app/theme/components/baChartistChart/baChartistChart.loader.ts
deleted file mode 100644
index 92856c1c..00000000
--- a/src/app/theme/components/baChartistChart/baChartistChart.loader.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const Chartist = require('chartist');
diff --git a/src/app/theme/components/baChartistChart/baChartistChart.scss b/src/app/theme/components/baChartistChart/baChartistChart.scss
index e69de29b..3863db1b 100644
--- a/src/app/theme/components/baChartistChart/baChartistChart.scss
+++ b/src/app/theme/components/baChartistChart/baChartistChart.scss
@@ -0,0 +1 @@
+@import "~chartist/dist/chartist";
diff --git a/src/app/theme/components/baCheckbox/baCheckbox.component.ts b/src/app/theme/components/baCheckbox/baCheckbox.component.ts
index a058fe3c..8f45347b 100644
--- a/src/app/theme/components/baCheckbox/baCheckbox.component.ts
+++ b/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;
diff --git a/src/app/theme/components/baContentTop/baContentTop.component.ts b/src/app/theme/components/baContentTop/baContentTop.component.ts
index faf47b1a..a04dc5e4 100644
--- a/src/app/theme/components/baContentTop/baContentTop.component.ts
+++ b/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 {
 
diff --git a/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts b/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
index b9e71b72..cc1d6ae5 100644
--- a/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
+++ b/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 {
 
diff --git a/src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts b/src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts
index 984a777e..1ff83d37 100644
--- a/src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts
+++ b/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';
diff --git a/src/app/theme/components/baFullCalendar/baFullCalendar.scss b/src/app/theme/components/baFullCalendar/baFullCalendar.scss
new file mode 100644
index 00000000..6c51ef8e
--- /dev/null
+++ b/src/app/theme/components/baFullCalendar/baFullCalendar.scss
@@ -0,0 +1 @@
+@import "~fullcalendar/dist/fullcalendar";
diff --git a/src/app/theme/components/baMenu/baMenu.component.ts b/src/app/theme/components/baMenu/baMenu.component.ts
index 8e2b57ad..f4d85cea 100644
--- a/src/app/theme/components/baMenu/baMenu.component.ts
+++ b/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 {
 
diff --git a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts b/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts
index efc4e0f1..2d453cf3 100644
--- a/src/app/theme/components/baMenu/components/baMenuItem/baMenuItem.component.ts
+++ b/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 {
 
diff --git a/src/app/theme/components/baMsgCenter/baMsgCenter.component.ts b/src/app/theme/components/baMsgCenter/baMsgCenter.component.ts
index e0ab7072..39700d25 100644
--- a/src/app/theme/components/baMsgCenter/baMsgCenter.component.ts
+++ b/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 {
 
diff --git a/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.component.ts b/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.component.ts
index f0382bf0..445f4c3a 100644
--- a/src/app/theme/components/baMultiCheckbox/baMultiCheckbox.component.ts
+++ b/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;
diff --git a/src/app/theme/components/baPageTop/baPageTop.component.ts b/src/app/theme/components/baPageTop/baPageTop.component.ts
index e20d38a7..e8a3904d 100644
--- a/src/app/theme/components/baPageTop/baPageTop.component.ts
+++ b/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 {
 
diff --git a/src/app/theme/components/baPictureUploader/baPictureUploader.component.ts b/src/app/theme/components/baPictureUploader/baPictureUploader.component.ts
index 1d97dd21..e575d095 100644
--- a/src/app/theme/components/baPictureUploader/baPictureUploader.component.ts
+++ b/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 {
diff --git a/src/app/theme/components/baSidebar/baSidebar.component.ts b/src/app/theme/components/baSidebar/baSidebar.component.ts
index a5a2af16..2a5503ea 100644
--- a/src/app/theme/components/baSidebar/baSidebar.component.ts
+++ b/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) => {
diff --git a/src/app/theme/components/baSidebar/baSidebar.html b/src/app/theme/components/baSidebar/baSidebar.html
index 268b73f0..8dc516e7 100644
--- a/src/app/theme/components/baSidebar/baSidebar.html
+++ b/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>
diff --git a/src/app/theme/directives/baSlimScroll/baSlimScroll.loader.ts b/src/app/theme/directives/baSlimScroll/baSlimScroll.loader.ts
index 594509f0..3103aa5c 100644
--- a/src/app/theme/directives/baSlimScroll/baSlimScroll.loader.ts
+++ b/src/app/theme/directives/baSlimScroll/baSlimScroll.loader.ts
@@ -1 +1 @@
-require('jquery-slimscroll');
+import 'jquery-slimscroll';
diff --git a/src/main.browser.aot.ts b/src/main.browser.aot.ts
new file mode 100644
index 00000000..fc2fb74a
--- /dev/null
+++ b/src/main.browser.aot.ts
@@ -0,0 +1,24 @@
+/*
+ * Angular bootstraping
+ */
+import { platformBrowser } from '@angular/platform-browser';
+import { decorateModuleRef } from './app/environment';
+import { bootloader } from '@angularclass/hmr';
+/*
+ * App Module
+ * our top level module that holds all of our components
+ */
+import { AppModuleNgFactory } from './app/app.module.ngfactory';
+/*
+ * Bootstrap our Angular app with a top level NgModule
+ */
+export function main(): Promise<any> {
+  return platformBrowser()
+    .bootstrapModuleFactory(AppModuleNgFactory)
+    .then(decorateModuleRef)
+    .catch(err => console.error(err));
+
+}
+
+
+bootloader(main);
diff --git a/tsconfig.aot.json b/tsconfig.aot.json
new file mode 100644
index 00000000..b330ba35
--- /dev/null
+++ b/tsconfig.aot.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es2015",
+    "moduleResolution": "node",
+    "declaration": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "noEmitHelpers": true,
+    "strictNullChecks": false,
+    "baseUrl": "./src",
+    "paths": {
+    },
+    "lib": [
+      "dom",
+      "es6"
+    ],
+    "types": [
+      "hammerjs",
+      "node",
+      "source-map",
+      "webpack",
+      "fullcalendar",
+      "jquery.slimscroll"
+    ]
+  },
+  "exclude": [
+    "node_modules",
+    "dist"
+  ],
+  "awesomeTypescriptLoaderOptions": {
+    "forkChecker": true,
+    "useWebpackText": true
+  },
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "atom": { "rewriteTsconfig": false }
+}