diff --git a/ng2-components/ng2-activiti-analytics/.gitignore b/ng2-components/ng2-activiti-analytics/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-activiti-analytics/.gitignore
+++ b/ng2-components/ng2-activiti-analytics/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-activiti-analytics/demo/config/helpers.js b/ng2-components/ng2-activiti-analytics/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-activiti-analytics/demo/config/webpack.common.js b/ng2-components/ng2-activiti-analytics/demo/config/webpack.common.js
new file mode 100644
index 0000000000..a58f62ff50
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/config/webpack.common.js
@@ -0,0 +1,134 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-activiti-analytics/demo/config/webpack.dev.js b/ng2-components/ng2-activiti-analytics/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..f1cc186cc7
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/config/webpack.dev.js
@@ -0,0 +1,37 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-activiti-diagrams$": path.resolve(__dirname, '../../ng2-activiti-diagrams/index.ts'),
+            "ng2-activiti-analytics$": path.resolve(__dirname, '../../ng2-activiti-analytics/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-activiti-analytics/demo/config/webpack.prod.js b/ng2-components/ng2-activiti-analytics/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..431d4fb5ea
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/config/webpack.prod.js
@@ -0,0 +1,66 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-activiti-analytics',
+    'ng2-activiti-diagrams'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-activiti-analytics/demo/index.html b/ng2-components/ng2-activiti-analytics/demo/index.html
index 05273a659d..b97d1e90e0 100644
--- a/ng2-components/ng2-activiti-analytics/demo/index.html
+++ b/ng2-components/ng2-activiti-analytics/demo/index.html
@@ -6,51 +6,8 @@
     <title>Alfresco Angular 2 Activiti Analytics - Demo</title>
     <base href="./">
 
-    <!-- Charts -->
-    <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
-    <script src="node_modules/raphael/raphael.min.js"></script>
-
-    <!-- Moment js -->
-    <script src="node_modules/moment/min/moment.min.js"></script>
-
-    <!-- Date picker -->
-    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
-    <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
-
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<style> .chart {display: block; width: 100%;}</style>
-
-
 <body>
 
 <alfresco-app-demo></alfresco-app-demo>
diff --git a/ng2-components/ng2-activiti-analytics/demo/package.json b/ng2-components/ng2-activiti-analytics/demo/package.json
index e1bab4ae48..2806ddff73 100644
--- a/ng2-components/ng2-activiti-analytics/demo/package.json
+++ b/ng2-components/ng2-activiti-analytics/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Diagrams Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-activiti-diagrams ng2-activiti-analytics",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -71,10 +68,54 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   }
 }
diff --git a/ng2-components/ng2-activiti-analytics/demo/src/polyfills.ts b/ng2-components/ng2-activiti-analytics/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-activiti-analytics/demo/src/vendor.ts b/ng2-components/ng2-activiti-analytics/demo/src/vendor.ts
new file mode 100644
index 0000000000..89975527a1
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/src/vendor.ts
@@ -0,0 +1,30 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-activiti-analytics';
+
+import 'ng2-charts';
+import 'chart.js';
+require('script-loader!raphael/raphael.min.js');
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js b/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
deleted file mode 100644
index 07f10a7da3..0000000000
--- a/ng2-components/ng2-activiti-analytics/demo/systemjs.config.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'moment': 'npm:moment/min/moment.min.js',
-            'ng2-charts': 'npm:ng2-charts',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams',
-            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'moment': 'npm:moment/min/moment.min.js',
-            'ng2-translate': { defaultExtension: 'js' },
-            'ng2-charts': { main: './bundles/ng2-charts.umd.js', defaultExtension: 'js'},
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-activiti-diagrams': { main: './bundles/ng2-activiti-diagrams.js', defaultExtension: 'js'},
-            'ng2-activiti-analytics': { main: './bundles/ng2-activiti-analytics.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-activiti-analytics/demo/tsconfig.json b/ng2-components/ng2-activiti-analytics/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-activiti-analytics/demo/tsconfig.json
+++ b/ng2-components/ng2-activiti-analytics/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-activiti-analytics/demo/tslint.json b/ng2-components/ng2-activiti-analytics/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-activiti-analytics/demo/tslint.json
+++ b/ng2-components/ng2-activiti-analytics/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-activiti-analytics/demo/webpack.config.js b/ng2-components/ng2-activiti-analytics/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-activiti-analytics/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-activiti-diagrams/.gitignore b/ng2-components/ng2-activiti-diagrams/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-activiti-diagrams/.gitignore
+++ b/ng2-components/ng2-activiti-diagrams/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-activiti-diagrams/demo/config/helpers.js b/ng2-components/ng2-activiti-diagrams/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-activiti-diagrams/demo/config/webpack.common.js b/ng2-components/ng2-activiti-diagrams/demo/config/webpack.common.js
new file mode 100644
index 0000000000..c51e7424e5
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/demo/config/webpack.common.js
@@ -0,0 +1,133 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-activiti-diagrams'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-activiti-diagrams/demo/config/webpack.dev.js b/ng2-components/ng2-activiti-diagrams/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..22e4712a19
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/demo/config/webpack.dev.js
@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-activiti-diagrams$": path.resolve(__dirname, '../../ng2-activiti-diagrams/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-activiti-diagrams/demo/config/webpack.prod.js b/ng2-components/ng2-activiti-diagrams/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..6cdb145a7b
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/demo/config/webpack.prod.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-activiti-diagrams'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-activiti-diagrams/demo/index.html b/ng2-components/ng2-activiti-diagrams/demo/index.html
index 78a50121bb..7e3fd23855 100644
--- a/ng2-components/ng2-activiti-diagrams/demo/index.html
+++ b/ng2-components/ng2-activiti-diagrams/demo/index.html
@@ -6,40 +6,7 @@
     <title>Alfresco Angular 2 Activiti Diagrams - Demo</title>
     <base href="./">
 
-    <!-- Raphael -->
-    <script src="node_modules/raphael/raphael.min.js"></script>
-    <!-- Diagrams -->
-    <script src="node_modules/ng2-activiti-diagrams/assets/Polyline.js"></script>
-
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 
diff --git a/ng2-components/ng2-activiti-diagrams/demo/package.json b/ng2-components/ng2-activiti-diagrams/demo/package.json
index fe3e7744bf..a7c9922412 100644
--- a/ng2-components/ng2-activiti-diagrams/demo/package.json
+++ b/ng2-components/ng2-activiti-diagrams/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Diagrams Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-activiti-diagrams",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -62,12 +59,57 @@
     "raphael": "^2.2.6"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   }
 }
diff --git a/ng2-components/ng2-activiti-diagrams/demo/src/polyfills.ts b/ng2-components/ng2-activiti-diagrams/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-activiti-diagrams/demo/src/vendor.ts b/ng2-components/ng2-activiti-diagrams/demo/src/vendor.ts
new file mode 100644
index 0000000000..31ca6be475
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/demo/src/vendor.ts
@@ -0,0 +1,30 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-activiti-diagrams';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+import 'ng2-charts';
+import 'chart.js';
+require('script-loader!raphael/raphael.min.js');
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js b/ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js
deleted file mode 100644
index a3fb7b584d..0000000000
--- a/ng2-components/ng2-activiti-diagrams/demo/systemjs.config.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'moment': 'npm:moment/min/moment.min.js',
-            'raphael': 'npm:raphael',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'moment': { defaultExtension: 'js' },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-activiti-diagrams': { main: './bundles/ng2-activiti-diagrams.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-activiti-diagrams/demo/tsconfig.json b/ng2-components/ng2-activiti-diagrams/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-activiti-diagrams/demo/tsconfig.json
+++ b/ng2-components/ng2-activiti-diagrams/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-activiti-diagrams/demo/tslint.json b/ng2-components/ng2-activiti-diagrams/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-activiti-diagrams/demo/tslint.json
+++ b/ng2-components/ng2-activiti-diagrams/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-activiti-diagrams/demo/webpack.config.js b/ng2-components/ng2-activiti-diagrams/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-activiti-diagrams/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-activiti-form/.gitignore b/ng2-components/ng2-activiti-form/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-activiti-form/.gitignore
+++ b/ng2-components/ng2-activiti-form/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-activiti-form/demo/config/helpers.js b/ng2-components/ng2-activiti-form/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-activiti-form/demo/config/webpack.common.js b/ng2-components/ng2-activiti-form/demo/config/webpack.common.js
new file mode 100644
index 0000000000..5a6dcbd682
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/demo/config/webpack.common.js
@@ -0,0 +1,133 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-activiti-form'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-activiti-form/demo/config/webpack.dev.js b/ng2-components/ng2-activiti-form/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..f01c3bcfa8
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/demo/config/webpack.dev.js
@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-activiti-form$": path.resolve(__dirname, '../../ng2-activiti-form/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-activiti-form/demo/config/webpack.prod.js b/ng2-components/ng2-activiti-form/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..555564baf3
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/demo/config/webpack.prod.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-activiti-form'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-activiti-form/demo/index.html b/ng2-components/ng2-activiti-form/demo/index.html
index e56ebeef76..7fbc5d9e5e 100644
--- a/ng2-components/ng2-activiti-form/demo/index.html
+++ b/ng2-components/ng2-activiti-form/demo/index.html
@@ -6,47 +6,8 @@
     <title>Alfresco Angular 2 Activiti Form - Demo</title>
     <base href="./">
 
-    <!-- Moment js -->
-    <script src="node_modules/moment/min/moment.min.js"></script>
-
-    <!-- Date picker -->
-    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
-    <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
-
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<style> .chart {display: block; width: 100%;}</style>
-
-
 <body>
 
 <alfresco-app-demo></alfresco-app-demo>
diff --git a/ng2-components/ng2-activiti-form/demo/package.json b/ng2-components/ng2-activiti-form/demo/package.json
index 15f537cd94..d50ff6ee99 100644
--- a/ng2-components/ng2-activiti-form/demo/package.json
+++ b/ng2-components/ng2-activiti-form/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Activiti Form Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-activiti-form",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -63,12 +60,57 @@
     "ng2-activiti-form": "1.5.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   }
 }
diff --git a/ng2-components/ng2-activiti-form/demo/src/polyfills.ts b/ng2-components/ng2-activiti-form/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-activiti-form/demo/src/vendor.ts b/ng2-components/ng2-activiti-form/demo/src/vendor.ts
new file mode 100644
index 0000000000..fa2e1d1c56
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-activiti-form';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-activiti-form/demo/systemjs.config.js b/ng2-components/ng2-activiti-form/demo/systemjs.config.js
deleted file mode 100644
index 7a7f9a1355..0000000000
--- a/ng2-components/ng2-activiti-form/demo/systemjs.config.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'moment': 'npm:moment/min/moment.min.js',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-activiti-form': 'npm:ng2-activiti-form'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'moment': { defaultExtension: 'js' },
-            'ng2-translate': { defaultExtension: 'js' },
-            'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js'},
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-activiti-form': { main: './bundles/ng2-activiti-form.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-activiti-form/demo/tsconfig.json b/ng2-components/ng2-activiti-form/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-activiti-form/demo/tsconfig.json
+++ b/ng2-components/ng2-activiti-form/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-activiti-form/demo/tslint.json b/ng2-components/ng2-activiti-form/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-activiti-form/demo/tslint.json
+++ b/ng2-components/ng2-activiti-form/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-activiti-form/demo/webpack.config.js b/ng2-components/ng2-activiti-form/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-activiti-form/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-activiti-processlist/.gitignore b/ng2-components/ng2-activiti-processlist/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-activiti-processlist/.gitignore
+++ b/ng2-components/ng2-activiti-processlist/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-activiti-processlist/demo/config/helpers.js b/ng2-components/ng2-activiti-processlist/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-activiti-processlist/demo/config/webpack.common.js b/ng2-components/ng2-activiti-processlist/demo/config/webpack.common.js
new file mode 100644
index 0000000000..43cc210237
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/demo/config/webpack.common.js
@@ -0,0 +1,136 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-activiti-processlist',
+    'ng2-activiti-tasklist',
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-activiti-processlist/demo/config/webpack.dev.js b/ng2-components/ng2-activiti-processlist/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..51f2e1232b
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/demo/config/webpack.dev.js
@@ -0,0 +1,38 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-datatable$": path.resolve(__dirname, '../../ng2-alfresco-datatable/index.ts'),
+            "ng2-activiti-processlist$": path.resolve(__dirname, '../../ng2-activiti-processlist/index.ts'),
+            "ng2-activiti-tasklist$": path.resolve(__dirname, '../../ng2-activiti-tasklist/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-activiti-processlist/demo/config/webpack.prod.js b/ng2-components/ng2-activiti-processlist/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..81fbc96579
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/demo/config/webpack.prod.js
@@ -0,0 +1,68 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-activiti-processlist',
+    'ng2-activiti-tasklist',
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-activiti-processlist/demo/index.html b/ng2-components/ng2-activiti-processlist/demo/index.html
index fe525218aa..d52218c9f4 100644
--- a/ng2-components/ng2-activiti-processlist/demo/index.html
+++ b/ng2-components/ng2-activiti-processlist/demo/index.html
@@ -6,47 +6,8 @@
   <title>Alfresco Angular 2 Activiti Process - Demo</title>
   <base href="./">
 
-  <!-- Moment js -->
-  <script src="node_modules/moment/min/moment.min.js"></script>
-
-  <!-- Date picker -->
-  <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
-  <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
-  <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
-
-  <!-- Google Material Design Lite -->
-  <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-  <script src="node_modules/material-design-lite/material.min.js"></script>
-  <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-  <!-- Polyfill(s) for Safari (pre-10.x) -->
-  <script src="node_modules/intl/dist/Intl.min.js"></script>
-  <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-  <!-- Polyfill(s) for older browsers -->
-  <script src="node_modules/core-js/client/shim.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-  <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-  <!-- Polyfill(s) for dialogs -->
-  <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-  <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-  <style>._dialog_overlay { position: static !important; } </style>
-
-  <!-- Modules  -->
-  <script src="node_modules/zone.js/dist/zone.js"></script>
-  <script src="node_modules/reflect-metadata/Reflect.js"></script>
-  <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-  <script src="systemjs.config.js"></script>
-  <script>
-    System.import('app').catch(function(err){ console.error(err); });
-  </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<style> .chart {display: block; width: 100%;}</style>
-
-
 <body>
 
 <alfresco-app-demo></alfresco-app-demo>
diff --git a/ng2-components/ng2-activiti-processlist/demo/package.json b/ng2-components/ng2-activiti-processlist/demo/package.json
index b65aecae94..1eaabcded8 100644
--- a/ng2-components/ng2-activiti-processlist/demo/package.json
+++ b/ng2-components/ng2-activiti-processlist/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Show available processes from the Activiti Process Services suite - Demo",
   "version": "0.1.0",
   "author": "Will Abson",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-form ng2-activiti-tasklist ng2-activiti-processlist",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "keywords": [
     "ng2",
@@ -58,12 +55,57 @@
     "ng2-activiti-processlist": "1.5.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   }
 }
diff --git a/ng2-components/ng2-activiti-processlist/demo/src/polyfills.ts b/ng2-components/ng2-activiti-processlist/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-activiti-processlist/demo/src/vendor.ts b/ng2-components/ng2-activiti-processlist/demo/src/vendor.ts
new file mode 100644
index 0000000000..5296ead28f
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-activiti-processlist';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-activiti-processlist/demo/systemjs.config.js b/ng2-components/ng2-activiti-processlist/demo/systemjs.config.js
deleted file mode 100644
index fb4d4b00b7..0000000000
--- a/ng2-components/ng2-activiti-processlist/demo/systemjs.config.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'moment' : 'npm:moment/min/moment.min.js',
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable',
-            'ng2-activiti-form': 'npm:ng2-activiti-form',
-            'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist',
-            'ng2-activiti-processlist': 'npm:ng2-activiti-processlist'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'moment': { defaultExtension: 'js' },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'},
-            'ng2-activiti-form': { main: './bundles/ng2-activiti-form.js', defaultExtension: 'js'},
-            'ng2-activiti-tasklist': { main: './bundles/ng2-activiti-tasklist.js', defaultExtension: 'js'},
-            'ng2-activiti-processlist': { main: './bundles/ng2-activiti-processlist.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-activiti-processlist/demo/tsconfig.json b/ng2-components/ng2-activiti-processlist/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-activiti-processlist/demo/tsconfig.json
+++ b/ng2-components/ng2-activiti-processlist/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-activiti-processlist/demo/tslint.json b/ng2-components/ng2-activiti-processlist/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-activiti-processlist/demo/tslint.json
+++ b/ng2-components/ng2-activiti-processlist/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-activiti-processlist/demo/webpack.config.js b/ng2-components/ng2-activiti-processlist/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-activiti-processlist/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-activiti-tasklist/.gitignore b/ng2-components/ng2-activiti-tasklist/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-activiti-tasklist/.gitignore
+++ b/ng2-components/ng2-activiti-tasklist/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-activiti-tasklist/demo/config/helpers.js b/ng2-components/ng2-activiti-tasklist/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-activiti-tasklist/demo/config/webpack.common.js b/ng2-components/ng2-activiti-tasklist/demo/config/webpack.common.js
new file mode 100644
index 0000000000..fa4dd56996
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/demo/config/webpack.common.js
@@ -0,0 +1,134 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-activiti-tasklist',
+    'ng2-alfresco-datatable'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-activiti-tasklist/demo/config/webpack.dev.js b/ng2-components/ng2-activiti-tasklist/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..e5a81b1a66
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/demo/config/webpack.dev.js
@@ -0,0 +1,37 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-datatable$": path.resolve(__dirname, '../../ng2-alfresco-datatable/index.ts'),
+            "ng2-activiti-tasklist$": path.resolve(__dirname, '../../ng2-activiti-tasklist/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-activiti-tasklist/demo/config/webpack.prod.js b/ng2-components/ng2-activiti-tasklist/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..f3bf52c1dd
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/demo/config/webpack.prod.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-activiti-tasklist'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-activiti-tasklist/demo/index.html b/ng2-components/ng2-activiti-tasklist/demo/index.html
index eff28149d9..94acaac38b 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/index.html
+++ b/ng2-components/ng2-activiti-tasklist/demo/index.html
@@ -6,47 +6,8 @@
     <title>Alfresco Angular 2 Activiti Tasks - Demo</title>
     <base href="./">
 
-    <!-- Moment js -->
-    <script src="node_modules/moment/min/moment.min.js"></script>
-
-    <!-- Date picker -->
-    <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script>
-    <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script>
-    <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all">
-
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<style> .chart {display: block; width: 100%;}</style>
-
-
 <body>
 
 <alfresco-app-demo></alfresco-app-demo>
diff --git a/ng2-components/ng2-activiti-tasklist/demo/package.json b/ng2-components/ng2-activiti-tasklist/demo/package.json
index 81f721541c..6030622290 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/package.json
+++ b/ng2-components/ng2-activiti-tasklist/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Task List Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-activiti-form ng2-activiti-tasklist",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "dependencies": {
@@ -51,14 +48,58 @@
     "ng2-activiti-tasklist": "1.5.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "license-check": "1.1.5",
-    "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.2",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "angular2",
diff --git a/ng2-components/ng2-activiti-tasklist/demo/src/polyfills.ts b/ng2-components/ng2-activiti-tasklist/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-activiti-tasklist/demo/src/vendor.ts b/ng2-components/ng2-activiti-tasklist/demo/src/vendor.ts
new file mode 100644
index 0000000000..f1c936d5e0
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-activiti-tasklist';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-activiti-tasklist/demo/systemjs.config.js b/ng2-components/ng2-activiti-tasklist/demo/systemjs.config.js
deleted file mode 100644
index bf04333fc7..0000000000
--- a/ng2-components/ng2-activiti-tasklist/demo/systemjs.config.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'moment' : 'npm:moment/min/moment.min.js',
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable',
-            'ng2-activiti-form': 'npm:ng2-activiti-form',
-            'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'moment': { defaultExtension: 'js' },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'},
-            'ng2-activiti-form': { main: './bundles/ng2-activiti-form.js', defaultExtension: 'js'},
-            'ng2-activiti-tasklist': { main: './bundles/ng2-activiti-tasklist.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-activiti-tasklist/demo/tsconfig.json b/ng2-components/ng2-activiti-tasklist/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/tsconfig.json
+++ b/ng2-components/ng2-activiti-tasklist/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-activiti-tasklist/demo/tslint.json b/ng2-components/ng2-activiti-tasklist/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-activiti-tasklist/demo/tslint.json
+++ b/ng2-components/ng2-activiti-tasklist/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-activiti-tasklist/demo/webpack.config.js b/ng2-components/ng2-activiti-tasklist/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-activiti-tasklist/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-alfresco-core/.gitignore b/ng2-components/ng2-alfresco-core/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-alfresco-core/.gitignore
+++ b/ng2-components/ng2-alfresco-core/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-alfresco-datatable/.gitignore b/ng2-components/ng2-alfresco-datatable/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-alfresco-datatable/.gitignore
+++ b/ng2-components/ng2-alfresco-datatable/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-alfresco-datatable/demo/config/helpers.js b/ng2-components/ng2-alfresco-datatable/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-alfresco-datatable/demo/config/webpack.common.js b/ng2-components/ng2-alfresco-datatable/demo/config/webpack.common.js
new file mode 100644
index 0000000000..c0b8ee56bf
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/demo/config/webpack.common.js
@@ -0,0 +1,133 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-alfresco-datatable'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-alfresco-datatable/demo/config/webpack.dev.js b/ng2-components/ng2-alfresco-datatable/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..349e60ebb4
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/demo/config/webpack.dev.js
@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-datatable$": path.resolve(__dirname, '../../ng2-alfresco-datatable/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-datatable/demo/config/webpack.prod.js b/ng2-components/ng2-alfresco-datatable/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..624852d1f0
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/demo/config/webpack.prod.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-alfresco-datatable'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-datatable/demo/index.html b/ng2-components/ng2-alfresco-datatable/demo/index.html
index c9a7a00b04..78a685ef33 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/index.html
+++ b/ng2-components/ng2-alfresco-datatable/demo/index.html
@@ -5,24 +5,7 @@
     <title>Angular 2 DataTable - Demo</title>
     <base href="./">
 
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- 1. Load libraries -->
-    <!-- 1. Load libraries -->
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 
diff --git a/ng2-components/ng2-alfresco-datatable/demo/package.json b/ng2-components/ng2-alfresco-datatable/demo/package.json
index 73f9cd849a..ee3fe12106 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/package.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 DataTable Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -55,13 +52,58 @@
     "ng2-alfresco-datatable": "1.5.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "angular2",
diff --git a/ng2-components/ng2-alfresco-datatable/demo/src/polyfills.ts b/ng2-components/ng2-alfresco-datatable/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-alfresco-datatable/demo/src/vendor.ts b/ng2-components/ng2-alfresco-datatable/demo/src/vendor.ts
new file mode 100644
index 0000000000..f7ea34ae96
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-datatable';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js b/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js
deleted file mode 100644
index 4fa982b2e9..0000000000
--- a/ng2-components/ng2-alfresco-datatable/demo/systemjs.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': { main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-alfresco-datatable/demo/tsconfig.json b/ng2-components/ng2-alfresco-datatable/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-datatable/demo/tslint.json b/ng2-components/ng2-alfresco-datatable/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-alfresco-datatable/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-datatable/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-alfresco-datatable/demo/webpack.config.js b/ng2-components/ng2-alfresco-datatable/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-datatable/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-alfresco-documentlist/.gitignore b/ng2-components/ng2-alfresco-documentlist/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-alfresco-documentlist/.gitignore
+++ b/ng2-components/ng2-alfresco-documentlist/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/config/helpers.js b/ng2-components/ng2-alfresco-documentlist/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/config/webpack.common.js b/ng2-components/ng2-alfresco-documentlist/demo/config/webpack.common.js
new file mode 100644
index 0000000000..8f78b2736b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/demo/config/webpack.common.js
@@ -0,0 +1,134 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/config/webpack.dev.js b/ng2-components/ng2-alfresco-documentlist/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..bd9afd9e9e
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/demo/config/webpack.dev.js
@@ -0,0 +1,37 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-datatable$": path.resolve(__dirname, '../../ng2-alfresco-datatable/index.ts'),
+            "ng2-alfresco-documentlist$": path.resolve(__dirname, '../../ng2-alfresco-documentlist/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/config/webpack.prod.js b/ng2-components/ng2-alfresco-documentlist/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..74461019dd
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/demo/config/webpack.prod.js
@@ -0,0 +1,66 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/index.html b/ng2-components/ng2-alfresco-documentlist/demo/index.html
index 46982ae396..bb50166d8d 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/index.html
+++ b/ng2-components/ng2-alfresco-documentlist/demo/index.html
@@ -4,30 +4,8 @@
     <meta charset="UTF-8">
     <title>Alfresco Angular 2 Document List - Demo</title>
     <base href="./">
+
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- 1. Load libraries -->
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
 </head>
 <body>
 
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/package.json b/ng2-components/ng2-alfresco-documentlist/demo/package.json
index 6e15b9c75c..e5a920b4d8 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/package.json
+++ b/ng2-components/ng2-alfresco-documentlist/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Documentlist Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-alfresco-documentlist",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "dependencies": {
@@ -47,13 +44,58 @@
     "intl": "^1.2.5"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "angular2",
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/src/polyfills.ts b/ng2-components/ng2-alfresco-documentlist/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/src/vendor.ts b/ng2-components/ng2-alfresco-documentlist/demo/src/vendor.ts
new file mode 100644
index 0000000000..b6048893d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-documentlist';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js b/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
deleted file mode 100644
index cc70793519..0000000000
--- a/ng2-components/ng2-alfresco-documentlist/demo/systemjs.config.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable',
-            'ng2-alfresco-documentlist': 'npm:ng2-alfresco-documentlist'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': {defaultExtension: 'js'},
-            'alfresco-js-api': {main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': {main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'},
-            'ng2-alfresco-documentlist': {main: './bundles/ng2-alfresco-documentlist.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/tsconfig.json b/ng2-components/ng2-alfresco-documentlist/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-documentlist/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/tslint.json b/ng2-components/ng2-alfresco-documentlist/demo/tslint.json
index 8e3f8b16ac..f5ca6283b5 100644
--- a/ng2-components/ng2-alfresco-documentlist/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-documentlist/demo/tslint.json
@@ -1,123 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-alfresco-documentlist/demo/webpack.config.js b/ng2-components/ng2-alfresco-documentlist/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-documentlist/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-alfresco-login/.gitignore b/ng2-components/ng2-alfresco-login/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-alfresco-login/.gitignore
+++ b/ng2-components/ng2-alfresco-login/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-alfresco-login/demo/config/helpers.js b/ng2-components/ng2-alfresco-login/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-alfresco-login/demo/config/webpack.common.js b/ng2-components/ng2-alfresco-login/demo/config/webpack.common.js
new file mode 100644
index 0000000000..a64b0c6926
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/demo/config/webpack.common.js
@@ -0,0 +1,133 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-alfresco-login'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-alfresco-login/demo/config/webpack.dev.js b/ng2-components/ng2-alfresco-login/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..4209ba629b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/demo/config/webpack.dev.js
@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-login$": path.resolve(__dirname, '../../ng2-alfresco-login/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-login/demo/config/webpack.prod.js b/ng2-components/ng2-alfresco-login/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..15c8575bc0
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/demo/config/webpack.prod.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-alfresco-login'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-login/demo/index.html b/ng2-components/ng2-alfresco-login/demo/index.html
index 919ff26850..db70c731eb 100644
--- a/ng2-components/ng2-alfresco-login/demo/index.html
+++ b/ng2-components/ng2-alfresco-login/demo/index.html
@@ -6,34 +6,7 @@
     <title>Alfresco Angular 2 Login - Demo</title>
     <base href="./">
 
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="assets/material.orange-blue.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 
diff --git a/ng2-components/ng2-alfresco-login/demo/package.json b/ng2-components/ng2-alfresco-login/demo/package.json
index e8d5c42c14..b25f63b180 100644
--- a/ng2-components/ng2-alfresco-login/demo/package.json
+++ b/ng2-components/ng2-alfresco-login/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Login Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-login",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -76,12 +73,57 @@
     "ng2-alfresco-login": "1.5.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "^3.8.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   }
 }
diff --git a/ng2-components/ng2-alfresco-login/demo/src/polyfills.ts b/ng2-components/ng2-alfresco-login/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-alfresco-login/demo/src/vendor.ts b/ng2-components/ng2-alfresco-login/demo/src/vendor.ts
new file mode 100644
index 0000000000..7adf081eed
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-login';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-alfresco-login/demo/systemjs.config.js b/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
deleted file mode 100644
index 49c8cd8c90..0000000000
--- a/ng2-components/ng2-alfresco-login/demo/systemjs.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-login': 'npm:ng2-alfresco-login'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-login': {main: './bundles/ng2-alfresco-login.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-alfresco-login/demo/tsconfig.json b/ng2-components/ng2-alfresco-login/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-alfresco-login/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-login/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-login/demo/tslint.json b/ng2-components/ng2-alfresco-login/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-alfresco-login/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-login/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-alfresco-login/demo/webpack.config.js b/ng2-components/ng2-alfresco-login/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-login/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-alfresco-search/.gitignore b/ng2-components/ng2-alfresco-search/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-alfresco-search/.gitignore
+++ b/ng2-components/ng2-alfresco-search/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-alfresco-search/demo/config/helpers.js b/ng2-components/ng2-alfresco-search/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-alfresco-search/demo/config/webpack.common.js b/ng2-components/ng2-alfresco-search/demo/config/webpack.common.js
new file mode 100644
index 0000000000..ef3e400d2c
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/demo/config/webpack.common.js
@@ -0,0 +1,136 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist',
+    'ng2-alfresco-search'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-alfresco-search/demo/config/webpack.dev.js b/ng2-components/ng2-alfresco-search/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..a248ae4f72
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/demo/config/webpack.dev.js
@@ -0,0 +1,38 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-datatable$": path.resolve(__dirname, '../../ng2-alfresco-datatable/index.ts'),
+            "ng2-alfresco-documentlist$": path.resolve(__dirname, '../../ng2-alfresco-documentlist/index.ts'),
+            "ng2-alfresco-search$": path.resolve(__dirname, '../../ng2-alfresco-search/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-search/demo/config/webpack.prod.js b/ng2-components/ng2-alfresco-search/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..7ac3aa4744
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/demo/config/webpack.prod.js
@@ -0,0 +1,68 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-alfresco-core',
+    'ng2-alfresco-datatable',
+    'ng2-alfresco-documentlist',
+    'ng2-alfresco-search'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-search/demo/index.html b/ng2-components/ng2-alfresco-search/demo/index.html
index d7fe291524..2dd46cc55e 100644
--- a/ng2-components/ng2-alfresco-search/demo/index.html
+++ b/ng2-components/ng2-alfresco-search/demo/index.html
@@ -5,41 +5,11 @@
     <title>Alfresco Angular 2 Search - Demo</title>
     <base href="./">
 
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 
-<div mdl class="mdl-layout mdl-js-layout">
-    <alfresco-app-demo></alfresco-app-demo>
-</div>
+<alfresco-app-demo></alfresco-app-demo>
 
 </body>
 </html>
diff --git a/ng2-components/ng2-alfresco-search/demo/package.json b/ng2-components/ng2-alfresco-search/demo/package.json
index b4984d2904..7ff17f49c7 100644
--- a/ng2-components/ng2-alfresco-search/demo/package.json
+++ b/ng2-components/ng2-alfresco-search/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Search Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link  ng2-alfresco-search ng2-alfresco-core ng2-alfresco-datatable ng2-alfresco-documentlist",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -78,12 +75,57 @@
     "ng2-alfresco-search": "1.5.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.2",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   }
 }
diff --git a/ng2-components/ng2-alfresco-search/demo/src/polyfills.ts b/ng2-components/ng2-alfresco-search/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-alfresco-search/demo/src/vendor.ts b/ng2-components/ng2-alfresco-search/demo/src/vendor.ts
new file mode 100644
index 0000000000..13a187bfb9
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-search';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-alfresco-search/demo/systemjs.config.js b/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
deleted file mode 100644
index 527c9b8a1f..0000000000
--- a/ng2-components/ng2-alfresco-search/demo/systemjs.config.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-documentlist': 'npm:ng2-alfresco-documentlist',
-            'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable',
-            'ng2-alfresco-search': 'npm:ng2-alfresco-search'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-documentlist': {main: './bundles/ng2-alfresco-documentlist.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': {main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'},
-            'ng2-alfresco-search': {main: './bundles/ng2-alfresco-search.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-alfresco-search/demo/tsconfig.json b/ng2-components/ng2-alfresco-search/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-alfresco-search/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-search/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-search/demo/tslint.json b/ng2-components/ng2-alfresco-search/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-alfresco-search/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-search/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-alfresco-search/demo/webpack.config.js b/ng2-components/ng2-alfresco-search/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-search/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-alfresco-social/.gitignore b/ng2-components/ng2-alfresco-social/.gitignore
index 8dd503835e..9cd0e8a569 100644
--- a/ng2-components/ng2-alfresco-social/.gitignore
+++ b/ng2-components/ng2-alfresco-social/.gitignore
@@ -8,7 +8,6 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
diff --git a/ng2-components/ng2-alfresco-social/demo/config/helpers.js b/ng2-components/ng2-alfresco-social/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-alfresco-social/demo/config/webpack.common.js b/ng2-components/ng2-alfresco-social/demo/config/webpack.common.js
new file mode 100644
index 0000000000..ea0bb7090c
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/demo/config/webpack.common.js
@@ -0,0 +1,133 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-alfresco-social'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-alfresco-social/demo/config/webpack.dev.js b/ng2-components/ng2-alfresco-social/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..689825dc01
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/demo/config/webpack.dev.js
@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-social$": path.resolve(__dirname, '../../ng2-alfresco-social/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-social/demo/config/webpack.prod.js b/ng2-components/ng2-alfresco-social/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..16ff9a4d92
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/demo/config/webpack.prod.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-alfresco-social'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-social/demo/index.html b/ng2-components/ng2-alfresco-social/demo/index.html
index 73ffc4d31b..d37f0af965 100644
--- a/ng2-components/ng2-alfresco-social/demo/index.html
+++ b/ng2-components/ng2-alfresco-social/demo/index.html
@@ -4,40 +4,8 @@
     <meta charset="UTF-8">
     <title>Alfresco Angular 2 Social - Demo</title>
     <base href="./">
+
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(
-                function (err) {
-                    console.error(err);
-                });
-    </script>
-
 </head>
 <body>
 
diff --git a/ng2-components/ng2-alfresco-social/demo/package.json b/ng2-components/ng2-alfresco-social/demo/package.json
index 6d0dbc3477..f49f9bc34a 100644
--- a/ng2-components/ng2-alfresco-social/demo/package.json
+++ b/ng2-components/ng2-alfresco-social/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Rating - Demo",
   "version": "0.3.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-social",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "dependencies": {
@@ -48,13 +45,58 @@
     "ng2-alfresco-social": "1.5.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "contributors": [
     {
diff --git a/ng2-components/ng2-alfresco-social/demo/src/polyfills.ts b/ng2-components/ng2-alfresco-social/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-alfresco-social/demo/src/vendor.ts b/ng2-components/ng2-alfresco-social/demo/src/vendor.ts
new file mode 100644
index 0000000000..e329b60b22
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-social';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-alfresco-social/demo/systemjs.config.js b/ng2-components/ng2-alfresco-social/demo/systemjs.config.js
deleted file mode 100644
index 2a250d51b1..0000000000
--- a/ng2-components/ng2-alfresco-social/demo/systemjs.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-social': 'npm:ng2-alfresco-social'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-social': {main: './bundles/ng2-alfresco-social.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-alfresco-social/demo/tsconfig.json b/ng2-components/ng2-alfresco-social/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-alfresco-social/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-social/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-social/demo/tslint.json b/ng2-components/ng2-alfresco-social/demo/tslint.json
index 8c9703b9de..f5ca6283b5 100644
--- a/ng2-components/ng2-alfresco-social/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-social/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": true,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": true,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-alfresco-social/demo/webpack.config.js b/ng2-components/ng2-alfresco-social/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-alfresco-tag/.gitignore b/ng2-components/ng2-alfresco-tag/.gitignore
index 8dd503835e..6a080fcee3 100644
--- a/ng2-components/ng2-alfresco-tag/.gitignore
+++ b/ng2-components/ng2-alfresco-tag/.gitignore
@@ -8,11 +8,10 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
-index.js.map
+index.js.map.gitignore
 !systemjs.config.js
 *.tgz
 /package/
diff --git a/ng2-components/ng2-alfresco-tag/demo/config/helpers.js b/ng2-components/ng2-alfresco-tag/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-alfresco-tag/demo/config/webpack.common.js b/ng2-components/ng2-alfresco-tag/demo/config/webpack.common.js
new file mode 100644
index 0000000000..49bd4fa1b1
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/demo/config/webpack.common.js
@@ -0,0 +1,133 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-alfresco-tag'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-alfresco-tag/demo/config/webpack.dev.js b/ng2-components/ng2-alfresco-tag/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..a8c810c6a9
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/demo/config/webpack.dev.js
@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-tag$": path.resolve(__dirname, '../../ng2-alfresco-tag/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-tag/demo/config/webpack.prod.js b/ng2-components/ng2-alfresco-tag/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..aa6b920019
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/demo/config/webpack.prod.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-alfresco-tag'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-tag/demo/index.html b/ng2-components/ng2-alfresco-tag/demo/index.html
index c32e19e790..4c1cb050b1 100644
--- a/ng2-components/ng2-alfresco-tag/demo/index.html
+++ b/ng2-components/ng2-alfresco-tag/demo/index.html
@@ -5,39 +5,6 @@
     <title>Alfresco Angular 2 Tag - Demo</title>
     <base href="./">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(
-                function (err) {
-                    console.error(err);
-                });
-    </script>
-
 </head>
 <body>
 
diff --git a/ng2-components/ng2-alfresco-tag/demo/package.json b/ng2-components/ng2-alfresco-tag/demo/package.json
index 717d173bdd..572e0797ae 100644
--- a/ng2-components/ng2-alfresco-tag/demo/package.json
+++ b/ng2-components/ng2-alfresco-tag/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Tag - Demo",
   "version": "0.3.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-tag",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "dependencies": {
@@ -25,15 +22,15 @@
     "@angular/core": "~4.0.0",
     "@angular/forms": "~4.0.0",
     "@angular/http": "~4.0.0",
+    "@angular/material": "2.0.0-beta.1",
     "@angular/platform-browser": "~4.0.0",
     "@angular/platform-browser-dynamic": "~4.0.0",
     "@angular/router": "~4.0.0",
-
-    "@angular/material": "2.0.0-beta.1",
     "alfresco-js-api": "~1.5.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "ng2-alfresco-core": "1.5.0",
+    "ng2-alfresco-tagy": "1.5.0",
     "ng2-translate": "5.0.0",
     "reflect-metadata": "0.1.10",
     "rxjs": "5.1.0",
@@ -44,11 +41,55 @@
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "2.5.35",
     "@types/node": "6.0.45",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "contributors": [
     {
diff --git a/ng2-components/ng2-alfresco-tag/demo/src/polyfills.ts b/ng2-components/ng2-alfresco-tag/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-alfresco-tag/demo/src/vendor.ts b/ng2-components/ng2-alfresco-tag/demo/src/vendor.ts
new file mode 100644
index 0000000000..5e8f932d2b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-tag';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js b/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js
deleted file mode 100644
index d4c4f382bc..0000000000
--- a/ng2-components/ng2-alfresco-tag/demo/systemjs.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-tag': 'npm:ng2-alfresco-tag'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-tag': {main: './bundles/ng2-alfresco-tag.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-alfresco-tag/demo/tsconfig.json b/ng2-components/ng2-alfresco-tag/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-alfresco-tag/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-tag/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-tag/demo/tslint.json b/ng2-components/ng2-alfresco-tag/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-alfresco-tag/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-tag/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-alfresco-tag/demo/webpack.config.js b/ng2-components/ng2-alfresco-tag/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-tag/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-alfresco-upload/.gitignore b/ng2-components/ng2-alfresco-upload/.gitignore
index 8dd503835e..6a080fcee3 100644
--- a/ng2-components/ng2-alfresco-upload/.gitignore
+++ b/ng2-components/ng2-alfresco-upload/.gitignore
@@ -8,11 +8,10 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
-index.js.map
+index.js.map.gitignore
 !systemjs.config.js
 *.tgz
 /package/
diff --git a/ng2-components/ng2-alfresco-upload/demo/config/helpers.js b/ng2-components/ng2-alfresco-upload/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-alfresco-upload/demo/config/webpack.common.js b/ng2-components/ng2-alfresco-upload/demo/config/webpack.common.js
new file mode 100644
index 0000000000..eb00661966
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/demo/config/webpack.common.js
@@ -0,0 +1,133 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-alfresco-upload'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-alfresco-upload/demo/config/webpack.dev.js b/ng2-components/ng2-alfresco-upload/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..c96287b560
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/demo/config/webpack.dev.js
@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-upload$": path.resolve(__dirname, '../../ng2-alfresco-upload/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-upload/demo/config/webpack.prod.js b/ng2-components/ng2-alfresco-upload/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..99b0533975
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/demo/config/webpack.prod.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-alfresco-upload'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-upload/demo/index.html b/ng2-components/ng2-alfresco-upload/demo/index.html
index 0809dc80d6..c803e7283f 100644
--- a/ng2-components/ng2-alfresco-upload/demo/index.html
+++ b/ng2-components/ng2-alfresco-upload/demo/index.html
@@ -7,38 +7,7 @@
     <title>Alfresco Angular 2 Upload - Demo</title>
     <base href="./">
 
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <!-- Load the Angular Material 2 stylesheet -->
-    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 
diff --git a/ng2-components/ng2-alfresco-upload/demo/package.json b/ng2-components/ng2-alfresco-upload/demo/package.json
index 6752088815..0231f8ca01 100644
--- a/ng2-components/ng2-alfresco-upload/demo/package.json
+++ b/ng2-components/ng2-alfresco-upload/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Upload Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-upload",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -76,12 +73,57 @@
     "ng2-alfresco-upload": "1.5.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   }
 }
diff --git a/ng2-components/ng2-alfresco-upload/demo/src/polyfills.ts b/ng2-components/ng2-alfresco-upload/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-alfresco-upload/demo/src/vendor.ts b/ng2-components/ng2-alfresco-upload/demo/src/vendor.ts
new file mode 100644
index 0000000000..f1eed84a0b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-upload';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js b/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
deleted file mode 100644
index 5ac7852681..0000000000
--- a/ng2-components/ng2-alfresco-upload/demo/systemjs.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-upload': 'npm:ng2-alfresco-upload'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-upload': {main: './bundles/ng2-alfresco-upload.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-alfresco-upload/demo/tsconfig.json b/ng2-components/ng2-alfresco-upload/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-alfresco-upload/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-upload/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-upload/demo/tslint.json b/ng2-components/ng2-alfresco-upload/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-alfresco-upload/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-upload/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-alfresco-upload/demo/webpack.config.js b/ng2-components/ng2-alfresco-upload/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-upload/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-alfresco-userinfo/.gitignore b/ng2-components/ng2-alfresco-userinfo/.gitignore
index 8dd503835e..6a080fcee3 100644
--- a/ng2-components/ng2-alfresco-userinfo/.gitignore
+++ b/ng2-components/ng2-alfresco-userinfo/.gitignore
@@ -8,11 +8,10 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
-index.js.map
+index.js.map.gitignore
 !systemjs.config.js
 *.tgz
 /package/
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/config/helpers.js b/ng2-components/ng2-alfresco-userinfo/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/config/webpack.common.js b/ng2-components/ng2-alfresco-userinfo/demo/config/webpack.common.js
new file mode 100644
index 0000000000..01cfb0c086
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/demo/config/webpack.common.js
@@ -0,0 +1,134 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-alfresco-login',
+    'ng2-alfresco-userinfo'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/config/webpack.dev.js b/ng2-components/ng2-alfresco-userinfo/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..fee598f7cb
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/demo/config/webpack.dev.js
@@ -0,0 +1,37 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-login$": path.resolve(__dirname, '../../ng2-alfresco-login/index.ts'),
+            "ng2-alfresco-userinfo$": path.resolve(__dirname, '../../ng2-alfresco-userinfo/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/config/webpack.prod.js b/ng2-components/ng2-alfresco-userinfo/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..e06d82e4c2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/demo/config/webpack.prod.js
@@ -0,0 +1,66 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-alfresco-userinfo',
+    'ng2-alfresco-login'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/index.html b/ng2-components/ng2-alfresco-userinfo/demo/index.html
index 837414bba8..9283b43532 100644
--- a/ng2-components/ng2-alfresco-userinfo/demo/index.html
+++ b/ng2-components/ng2-alfresco-userinfo/demo/index.html
@@ -4,35 +4,7 @@
     <title>Angular 2 UserInfo - Demo</title>
     <base href="./">
 
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/package.json b/ng2-components/ng2-alfresco-userinfo/demo/package.json
index b4d437a03d..adeb951358 100644
--- a/ng2-components/ng2-alfresco-userinfo/demo/package.json
+++ b/ng2-components/ng2-alfresco-userinfo/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 User Info Component - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-login ng2-alfresco-userinfo",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "dependencies": {
@@ -49,14 +46,58 @@
     "ng2-alfresco-userinfo": "1.5.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "license-check": "1.1.5",
-    "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.2",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "keywords": [
     "angular2",
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/src/polyfills.ts b/ng2-components/ng2-alfresco-userinfo/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/src/vendor.ts b/ng2-components/ng2-alfresco-userinfo/demo/src/vendor.ts
new file mode 100644
index 0000000000..c5ff83170b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-userinfo';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js b/ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js
deleted file mode 100644
index 284d7d0b4c..0000000000
--- a/ng2-components/ng2-alfresco-userinfo/demo/systemjs.config.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo',
-            'ng2-alfresco-login': 'npm:ng2-alfresco-login'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-userinfo': {main: './bundles/ng2-alfresco-userinfo.js', defaultExtension: 'js'},
-            'ng2-alfresco-login': {main: './bundles/ng2-alfresco-login.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/tsconfig.json b/ng2-components/ng2-alfresco-userinfo/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-alfresco-userinfo/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-userinfo/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/tslint.json b/ng2-components/ng2-alfresco-userinfo/demo/tslint.json
index acc666937e..f5ca6283b5 100644
--- a/ng2-components/ng2-alfresco-userinfo/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-userinfo/demo/tslint.json
@@ -21,7 +21,6 @@
         "interface-name": false,
         "jsdoc-format": true,
         "label-position": true,
-        "label-undefined": true,
         "max-line-length": [
             true,
             180
@@ -47,7 +46,6 @@
         "no-construct": true,
         "no-constructor-vars": false,
         "no-debugger": true,
-        "no-duplicate-key": true,
         "no-duplicate-variable": true,
         "no-empty": false,
         "no-eval": true,
@@ -57,12 +55,11 @@
         "no-shadowed-variable": true,
         "no-switch-case-fall-through": true,
         "no-trailing-whitespace": true,
-        "no-unreachable": true,
         "no-unused-expression": true,
         "no-unused-variable": true,
         "no-use-before-declare": true,
         "no-var-keyword": true,
-        "no-var-requires": true,
+        "no-var-requires": false,
         "object-literal-sort-keys": false,
         "one-line": [
             true,
diff --git a/ng2-components/ng2-alfresco-userinfo/demo/webpack.config.js b/ng2-components/ng2-alfresco-userinfo/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-alfresco-userinfo/index.js.map b/ng2-components/ng2-alfresco-userinfo/index.js.map
new file mode 100644
index 0000000000..70e2d33bfb
--- /dev/null
+++ b/ng2-components/ng2-alfresco-userinfo/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;;;;;;AAEH,sCAA8D;AAC9D,uDAA+C;AAE/C,4EAAyE;AACzE,oEAAiE;AACjE,oEAAiE;AAEjE,0DAAqD;AACrD,qDAAgD;AAChD,qDAAgD;AAEnC,QAAA,oBAAoB,GAAU;IACvC,uCAAiB;CACpB,CAAC;AAEW,QAAA,mBAAmB,GAAU;IACtC,iCAAc;IACd,iCAAc;CACjB,CAAC;AAgBF,IAAa,uBAAuB;IAApC;IASA,CAAC;IARU,+BAAO,GAAd;QACI,MAAM,CAAC;YACH,QAAQ,EAAE,yBAAuB;YACjC,SAAS,EACF,2BAAmB,QACzB;SACJ,CAAC;IACN,CAAC;IACL,8BAAC;AAAD,CAAC,AATD,IASC;AATY,uBAAuB;IAdnC,eAAQ,CAAC;QACN,OAAO,EAAE;YACL,8BAAU;SACb;QACD,YAAY,EACL,4BAAoB,QAC1B;QACD,SAAS,EACF,2BAAmB,QACzB;QACD,OAAO,EACA,4BAAoB,QAC1B;KACJ,CAAC;GACW,uBAAuB,CASnC;AATY,0DAAuB"}
\ No newline at end of file
diff --git a/ng2-components/ng2-alfresco-viewer/.gitignore b/ng2-components/ng2-alfresco-viewer/.gitignore
index 8dd503835e..6a080fcee3 100644
--- a/ng2-components/ng2-alfresco-viewer/.gitignore
+++ b/ng2-components/ng2-alfresco-viewer/.gitignore
@@ -8,11 +8,10 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
-index.js.map
+index.js.map.gitignore
 !systemjs.config.js
 *.tgz
 /package/
diff --git a/ng2-components/ng2-alfresco-viewer/demo/config/helpers.js b/ng2-components/ng2-alfresco-viewer/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-alfresco-viewer/demo/config/webpack.common.js b/ng2-components/ng2-alfresco-viewer/demo/config/webpack.common.js
new file mode 100644
index 0000000000..d8bf047741
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/demo/config/webpack.common.js
@@ -0,0 +1,133 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-alfresco-viewer'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-alfresco-viewer/demo/config/webpack.dev.js b/ng2-components/ng2-alfresco-viewer/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..35066196de
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/demo/config/webpack.dev.js
@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-viewer$": path.resolve(__dirname, '../../ng2-alfresco-viewer/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-viewer/demo/config/webpack.prod.js b/ng2-components/ng2-alfresco-viewer/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..db7f9e5b53
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/demo/config/webpack.prod.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-alfresco-viewer'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-viewer/demo/index.html b/ng2-components/ng2-alfresco-viewer/demo/index.html
index 86aea902df..38ad18588e 100644
--- a/ng2-components/ng2-alfresco-viewer/demo/index.html
+++ b/ng2-components/ng2-alfresco-viewer/demo/index.html
@@ -5,41 +5,7 @@
     <title>Angular 2 Viewer - Demo</title>
     <base href="./">
 
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <!-- Polyfill(s) for pdf support -->
-    <script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
-
-    <script src="node_modules/pdfjs-dist/build/pdf.js"></script>
-    <script src="node_modules/pdfjs-dist/build/pdf.worker.js"></script>
-    <script src="node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
 
@@ -47,3 +13,4 @@
 
 </body>
 </html>
+
diff --git a/ng2-components/ng2-alfresco-viewer/demo/package.json b/ng2-components/ng2-alfresco-viewer/demo/package.json
index 8690ac4c79..2788d027d2 100644
--- a/ng2-components/ng2-alfresco-viewer/demo/package.json
+++ b/ng2-components/ng2-alfresco-viewer/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Viewer - Demo",
   "version": "0.1.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-viewer",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "dependencies": {
@@ -49,13 +46,58 @@
     "pdfjs-dist": "1.5.404"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "contributors": [
     {
diff --git a/ng2-components/ng2-alfresco-viewer/demo/src/polyfills.ts b/ng2-components/ng2-alfresco-viewer/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-alfresco-viewer/demo/src/vendor.ts b/ng2-components/ng2-alfresco-viewer/demo/src/vendor.ts
new file mode 100644
index 0000000000..9ecf93d432
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/demo/src/vendor.ts
@@ -0,0 +1,38 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-viewer';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
+
+require('pdfjs-dist/web/compatibility.js');
+
+// Setting worker path to worker bundle.
+let pdfjsLib = require('pdfjs-dist');
+if (process.env.ENV === 'production') {
+    pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
+} else {
+    pdfjsLib.PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';
+}
+
+require('pdfjs-dist/web/pdf_viewer.js');
diff --git a/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js b/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
deleted file mode 100644
index 8a17b8f848..0000000000
--- a/ng2-components/ng2-alfresco-viewer/demo/systemjs.config.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-viewer': 'npm:ng2-alfresco-viewer'
-
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-viewer': {main: './bundles/ng2-alfresco-viewer.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-alfresco-viewer/demo/tsconfig.json b/ng2-components/ng2-alfresco-viewer/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-alfresco-viewer/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-viewer/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-viewer/demo/tslint.json b/ng2-components/ng2-alfresco-viewer/demo/tslint.json
index 2956587706..f5ca6283b5 100644
--- a/ng2-components/ng2-alfresco-viewer/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-viewer/demo/tslint.json
@@ -1,121 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-alfresco-viewer/demo/webpack.config.js b/ng2-components/ng2-alfresco-viewer/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-viewer/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/ng2-components/ng2-alfresco-webscript/.gitignore b/ng2-components/ng2-alfresco-webscript/.gitignore
index 8dd503835e..6a080fcee3 100644
--- a/ng2-components/ng2-alfresco-webscript/.gitignore
+++ b/ng2-components/ng2-alfresco-webscript/.gitignore
@@ -8,11 +8,10 @@ dist
 src/**/*.js
 src/**/*.js.map
 src/**/*.d.ts
-demo/**/*.js
 demo/**/*.js.map
 demo/**/*.d.ts
 index.js
-index.js.map
+index.js.map.gitignore
 !systemjs.config.js
 *.tgz
 /package/
diff --git a/ng2-components/ng2-alfresco-webscript/demo/config/helpers.js b/ng2-components/ng2-alfresco-webscript/demo/config/helpers.js
new file mode 100644
index 0000000000..a11fa771d6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/demo/config/helpers.js
@@ -0,0 +1,10 @@
+var path = require('path');
+
+var _root = path.resolve(__dirname, '..');
+
+function root(args) {
+  args = Array.prototype.slice.call(arguments, 0);
+  return path.join.apply(path, [_root].concat(args));
+}
+
+exports.root = root;
diff --git a/ng2-components/ng2-alfresco-webscript/demo/config/webpack.common.js b/ng2-components/ng2-alfresco-webscript/demo/config/webpack.common.js
new file mode 100644
index 0000000000..1cf846f12b
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/demo/config/webpack.common.js
@@ -0,0 +1,133 @@
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const helpers = require('./helpers');
+const path = require('path');
+
+const alfrescoLibs = [
+    'ng2-alfresco-webscript'
+];
+
+module.exports = {
+    entry: {
+        'polyfills': './src/polyfills.ts',
+        'vendor': './src/vendor.ts',
+        'dist': './src/main.ts'
+    },
+
+    module: {
+        rules: [
+            {
+                enforce: 'pre',
+                test: /\.js$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'source-map-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.ts$/,
+                include: [helpers.root('src'), helpers.root('..')],
+                loader: [
+                    'ts-loader',
+                    'angular2-template-loader'
+                ],
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                loader: 'tslint-loader',
+                include: [helpers.root('src')],
+                options: {
+                    emitErrors: true
+                },
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                enforce: 'pre',
+                test: /\.ts$/,
+                use: 'source-map-loader',
+                exclude: [ /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.html$/,
+                loader: 'html-loader',
+                exclude: [ /node_modules/, /public/, /resources/, /dist/]
+            },
+            {
+                test: /\.css$/,
+                exclude: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader?sourceMap'
+                })
+            },
+            {
+                test: /\.css$/,
+                include: [helpers.root('src'), helpers.root('../ng2-components')],
+                loader: 'raw-loader'
+            },
+            {
+                test: /\.component.scss$/,
+                use: ['to-string-loader', 'raw-loader', 'sass-loader']
+            },
+            {
+                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+                loader: 'file-loader?name=assets/[name].[hash].[ext]'
+            }
+        ]
+    },
+
+    plugins: [
+        // Workaround for angular/angular#11580
+        new webpack.ContextReplacementPlugin(
+            // The (\\|\/) piece accounts for path separators in *nix and Windows
+            /angular(\\|\/)core(\\|\/)@angular/,
+            helpers.root('./src'), // location of your src
+            {} // a map of your routes
+        ),
+        new HtmlWebpackPlugin({
+            template: './index.html'
+        }),
+
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `../ng2-components/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            }),
+            {
+                context: 'resources/i18n',
+                from: '**/*.json',
+                to: 'resources/i18n'
+            },
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: 'node_modules',
+                    from: `${lib}/src/i18n/*.json`,
+                    to: 'node_modules'
+                }
+            })
+        ]),
+
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['src', 'vendor', 'polyfills']
+        })
+    ],
+
+    devServer: {
+        contentBase: helpers.root('dist'),
+        compress: true,
+        port: 3000,
+        historyApiFallback: true,
+        host: '0.0.0.0',
+        inline: true
+    },
+
+    node: {
+        fs: 'empty'
+    }
+};
diff --git a/ng2-components/ng2-alfresco-webscript/demo/config/webpack.dev.js b/ng2-components/ng2-alfresco-webscript/demo/config/webpack.dev.js
new file mode 100644
index 0000000000..e924f38164
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/demo/config/webpack.dev.js
@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const path = require('path');
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'cheap-module-eval-source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        filename: '[name].js',
+        chunkFilename: '[id].chunk.js'
+    },
+
+    resolve: {
+        alias: {
+            "ng2-alfresco-core$": path.resolve(__dirname, '../../ng2-alfresco-core/index.ts'),
+            "ng2-alfresco-webscript$": path.resolve(__dirname, '../../ng2-alfresco-webscript/index.ts')
+        },
+        extensions: ['.ts', '.js'],
+        modules: [path.resolve(__dirname, '../node_modules')]
+    },
+
+    plugins: [
+        new webpack.NoEmitOnErrorsPlugin(),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-webscript/demo/config/webpack.prod.js b/ng2-components/ng2-alfresco-webscript/demo/config/webpack.prod.js
new file mode 100644
index 0000000000..cc87960206
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/demo/config/webpack.prod.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const commonConfig = require('./webpack.common.js');
+const helpers = require('./helpers');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+const alfrescoLibs = [
+    'ng2-alfresco-webscript'
+];
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        path: helpers.root('dist'),
+        publicPath: '/',
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js'
+    },
+
+    resolve: {
+        extensions: ['.ts', '.js'],
+        modules: [helpers.root('node_modules')]
+    },
+
+    plugins: [
+        new CopyWebpackPlugin([
+            ... alfrescoLibs.map(lib => {
+                return {
+                    context: `node_modules/${lib}/bundles/assets/` ,
+                    from: '**/*',
+                    to: `assets/`
+                }
+            })
+        ]),
+        new webpack.NoEmitOnErrorsPlugin(),
+        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+            mangle: {
+                keep_fnames: true
+            },
+            compress: {
+                warnings: false
+            },
+            output: {
+                comments: false
+            },
+            sourceMap: true
+        }),
+        new ExtractTextPlugin('[name].[hash].css'),
+        new webpack.DefinePlugin({
+            'process.env': {
+                'ENV': JSON.stringify(ENV)
+            }
+        }),
+        new webpack.LoaderOptionsPlugin({
+            htmlLoader: {
+                minimize: false // workaround for ng2
+            }
+        })
+    ]
+});
diff --git a/ng2-components/ng2-alfresco-webscript/demo/index.html b/ng2-components/ng2-alfresco-webscript/demo/index.html
index e274c4debe..409135109d 100644
--- a/ng2-components/ng2-alfresco-webscript/demo/index.html
+++ b/ng2-components/ng2-alfresco-webscript/demo/index.html
@@ -5,39 +5,6 @@
     <title>Alfresco Angular 2 Web Script - Demo</title>
     <base href="./">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <!-- Google Material Design Lite -->
-    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
-    <script src="node_modules/material-design-lite/material.min.js"></script>
-    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
-
-    <!-- Polyfill(s) for Safari (pre-10.x) -->
-    <script src="node_modules/intl/dist/Intl.min.js"></script>
-    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
-
-    <!-- Polyfill(s) for older browsers -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script>
-    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
-
-    <!-- Polyfill(s) for dialogs -->
-    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
-    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
-    <style>._dialog_overlay { position: static !important; } </style>
-
-    <!-- Modules  -->
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/reflect-metadata/Reflect.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(
-                function (err) {
-                    console.error(err);
-                });
-    </script>
-
 </head>
 <body>
 
diff --git a/ng2-components/ng2-alfresco-webscript/demo/package.json b/ng2-components/ng2-alfresco-webscript/demo/package.json
index 3f59e22235..0f35b59893 100644
--- a/ng2-components/ng2-alfresco-webscript/demo/package.json
+++ b/ng2-components/ng2-alfresco-webscript/demo/package.json
@@ -3,19 +3,16 @@
   "description": "Alfresco Angular2 Viewer - Demo",
   "version": "0.2.0",
   "author": "Alfresco Software, Ltd.",
-  "main": "index.js",
   "scripts": {
-    "clean": "npm run clean-build && rimraf dist node_modules typings dist",
-    "clean-build" : "rimraf 'src/{,**/}**.js' 'src/{,**/}**.js.map' 'src/{,**/}**.d.ts'",
-    "postinstall": "npm run build",
-    "start": "npm run build && concurrently \"npm run tsc:w\" \"npm run server\" ",
-    "server": "wsrv -o -s -l",
-    "build": "npm run tslint && npm run clean-build && npm run tsc",
-    "build:w": "npm run tslint && rimraf dist && npm run tsc:w",
-    "travis": "npm link ng2-alfresco-core ng2-alfresco-datatable ng2-alfresco-webscript",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json src/{,**/}**.ts  -e '{,**/}**.d.ts'"
+    "build": "rimraf dist && npm run webpack -- --config  config/webpack.prod.js --progress --profile --bail",
+    "build:dev": "rimraf dist && npm run webpack -- --config  config/webpack.dev.js --progress --profile --bail",
+    "start:dist": "wsrv -s dist/ -p 3000 -a 0.0.0.0",
+    "start": "npm run webpack-dev-server -- --config config/webpack.prod.js --progress  --content-base app/",
+    "start:dev": "npm run webpack-dev-server -- --config config/webpack.dev.js --progress --content-base app/",
+    "clean": "npm run clean-build  && rimraf dist node_modules typings dist",
+    "clean-build": "rimraf 'app/{,**/}**.js' 'app/{,**/}**.js.map' 'app/{,**/}**.d.ts'",
+    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "webpack": "webpack"
   },
   "license": "Apache-2.0",
   "dependencies": {
@@ -49,13 +46,58 @@
     "ng2-alfresco-webscript": "1.5.0"
   },
   "devDependencies": {
-    "@types/jasmine": "^2.2.33",
-    "@types/node": "^6.0.42",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
-    "tslint": "3.15.1",
-    "typescript": "^2.0.2",
-    "wsrv": "^0.1.5"
+    "@types/hammerjs": "^2.0.34",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "angular2-template-loader": "^0.6.2",
+    "autoprefixer": "^6.5.4",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.23.1",
+    "css-to-string-loader": "^0.1.2",
+    "cssnano": "^3.8.1",
+    "extract-text-webpack-plugin": "^2.0.0-rc.3",
+    "file-loader": "0.11.1",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^2.28.0",
+    "istanbul-instrumenter-loader": "0.2.0",
+    "jasmine-ajax": "^3.2.0",
+    "jasmine-core": "2.4.1",
+    "karma": "^0.13.22",
+    "karma-chrome-launcher": "~1.0.1",
+    "karma-coverage": "^1.1.1",
+    "karma-jasmine": "~1.0.2",
+    "karma-jasmine-ajax": "^0.1.13",
+    "karma-jasmine-html-reporter": "0.2.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-remap-istanbul": "^0.6.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-systemjs": "^0.16.0",
+    "karma-webpack": "^2.0.2",
+    "loader-utils": "^1.1.0",
+    "merge-stream": "^1.0.1",
+    "null-loader": "^0.1.1",
+    "package-json-merge": "0.0.1",
+    "raw-loader": "^0.5.1",
+    "remap-istanbul": "^0.6.3",
+    "rimraf": "^2.5.4",
+    "run-sequence": "^1.2.2",
+    "script-loader": "0.7.0",
+    "source-map-loader": "^0.1.6",
+    "style-loader": "^0.13.1",
+    "systemjs-builder": "^0.15.34",
+    "to-string-loader": "^1.1.4",
+    "traceur": "^0.0.91",
+    "ts-loader": "^2.0.0",
+    "ts-node": "^1.7.0",
+    "tslint": "^4.4.2",
+    "tslint-loader": "^3.3.0",
+    "typescript": "^2.1.6",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
+    "webpack-merge": "2.6.1",
+    "wsrv": "^0.1.7",
+    "node-sass": "^3.13.1",
+    "sass-loader": "6.0.2"
   },
   "contributors": [
     {
diff --git a/ng2-components/ng2-alfresco-webscript/demo/src/polyfills.ts b/ng2-components/ng2-alfresco-webscript/demo/src/polyfills.ts
new file mode 100644
index 0000000000..541adc72dc
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/demo/src/polyfills.ts
@@ -0,0 +1,17 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+import 'intl';
+
+require('zone.js/dist/zone'); // IE 8-11
+require('element.scrollintoviewifneeded-polyfill'); // IE/FF
+
+if (process.env.ENV === 'production') {
+    // Production
+
+} else {
+    // Development
+
+    Error['stackTraceLimit'] = Infinity;
+
+    require('zone.js/dist/long-stack-trace-zone');
+}
diff --git a/ng2-components/ng2-alfresco-webscript/demo/src/vendor.ts b/ng2-components/ng2-alfresco-webscript/demo/src/vendor.ts
new file mode 100644
index 0000000000..20feebd9c2
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/demo/src/vendor.ts
@@ -0,0 +1,26 @@
+// Angular
+import '@angular/platform-browser';
+import '@angular/platform-browser-dynamic';
+import '@angular/core';
+import '@angular/common';
+import '@angular/http';
+import '@angular/router';
+
+// RxJS
+import 'rxjs';
+
+// hammerjs
+import 'hammerjs';
+
+// Alfresco
+import 'alfresco-js-api';
+import 'ng2-alfresco-webscript';
+
+// Google Material Design Lite
+import 'material-design-lite/material.js';
+import 'material-design-lite/dist/material.orange-blue.min.css';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Polyfill(s) for dialogs
+require('script-loader!dialog-polyfill/dialog-polyfill');
+import 'dialog-polyfill/dialog-polyfill.css';
diff --git a/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js b/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js
deleted file mode 100644
index a106cb4527..0000000000
--- a/ng2-components/ng2-alfresco-webscript/demo/systemjs.config.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * System configuration for Angular 2 samples
- * Adjust as necessary for your application needs.
- */
-(function (global) {
-    System.config({
-        paths: {
-            // paths serve as alias
-            'npm:': 'node_modules/'
-        },
-        // map tells the System loader where to look for things
-        map: {
-            // our app is within the app folder
-            app: 'src',
-            // angular bundles
-            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
-            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
-            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
-            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
-            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
-            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
-            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
-            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
-            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
-            '@angular/animations/browser':'npm:@angular/animations/bundles/animations-browser.umd.js',
-            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'ng2-translate': 'npm:ng2-translate',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core',
-            'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable',
-            'ng2-alfresco-webscript': 'npm:ng2-alfresco-webscript',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist'
-        },
-        // packages tells the System loader how to load when no filename and/or no extension
-        packages: {
-            app: {
-                main: './main.js',
-                defaultExtension: 'js'
-            },
-            rxjs: {
-                defaultExtension: 'js'
-            },
-            'ng2-translate': { defaultExtension: 'js' },
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-core': {main: './bundles/ng2-alfresco-core.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': {main: './bundles/ng2-alfresco-datatable.js', defaultExtension: 'js'},
-            'ng2-alfresco-webscript': {main: './bundles/ng2-alfresco-webscript.js', defaultExtension: 'js'}
-        }
-    });
-})(this);
diff --git a/ng2-components/ng2-alfresco-webscript/demo/tsconfig.json b/ng2-components/ng2-alfresco-webscript/demo/tsconfig.json
index 524fcfda8e..9dd374392e 100644
--- a/ng2-components/ng2-alfresco-webscript/demo/tsconfig.json
+++ b/ng2-components/ng2-alfresco-webscript/demo/tsconfig.json
@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "target": "es5",
         "module": "commonjs",
         "moduleResolution": "node",
@@ -16,6 +17,7 @@
         "noFallthroughCasesInSwitch": true,
         "removeComments": true,
         "declaration": true,
+        "outDir": "./dist",
         "lib": [
             "es2015",
             "dom"
@@ -23,7 +25,9 @@
         "suppressImplicitAnyIndexErrors": true
     },
     "exclude": [
-        "node_modules"
+        "demo",
+        "node_modules",
+        "dist"
     ],
     "angularCompilerOptions": {
         "strictMetadataEmit": false,
diff --git a/ng2-components/ng2-alfresco-webscript/demo/tslint.json b/ng2-components/ng2-alfresco-webscript/demo/tslint.json
index 36e753c92c..f5ca6283b5 100644
--- a/ng2-components/ng2-alfresco-webscript/demo/tslint.json
+++ b/ng2-components/ng2-alfresco-webscript/demo/tslint.json
@@ -1,124 +1,118 @@
 {
-  "rules": {
-    "align": [
-      true,
-      "parameters",
-      "arguments",
-      "statements"
-    ],
-    "ban": false,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space",
-      "check-lowercase"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-name": false,
-    "jsdoc-format": true,
-    "label-position": true,
-    "label-undefined": true,
-    "max-line-length": [
-      true,
-      180
-    ],
-    "member-ordering": [
-      true,
-      "public-before-private",
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-any": false,
-    "no-arg": true,
-    "no-bitwise": false,
-    "no-conditional-assignment": true,
-    "no-consecutive-blank-lines": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-constructor-vars": false,
-    "no-debugger": true,
-    "no-duplicate-key": true,
-    "no-duplicate-variable": true,
-    "no-empty": false,
-    "no-eval": true,
-    "no-inferrable-types": false,
-    "no-internal-module": true,
-    "no-require-imports": false,
-    "no-shadowed-variable": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unreachable": true,
-    "no-unused-expression": true,
-    "no-unused-variable": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "no-var-requires": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "quotemark": [
-      true,
-      "single",
-      "avoid-escape"
-    ],
-    "radix": true,
-    "semicolon": true,
-    "switch-default": true,
-    "trailing-comma": [
-      true,
-      {
-        "multiline": "never",
-        "singleline": "never"
-      }
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef": false,
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "use-strict": false,
-    "variable-name": [
-      true,
-      "check-format",
-      "allow-leading-underscore",
-      "ban-keywords"
-    ],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-operator",
-      "check-separator",
-      "check-type",
-      "check-module",
-      "check-decl"
-    ]
-  }
+    "rules": {
+        "align": [
+            true,
+            "parameters",
+            "statements"
+        ],
+        "ban": false,
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "curly": true,
+        "eofline": true,
+        "forin": true,
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "interface-name": false,
+        "jsdoc-format": true,
+        "label-position": true,
+        "max-line-length": [
+            true,
+            180
+        ],
+        "member-ordering": [
+            true,
+            "static-before-instance",
+            "variables-before-functions"
+        ],
+        "no-any": false,
+        "no-arg": true,
+        "no-bitwise": false,
+        "no-conditional-assignment": true,
+        "no-consecutive-blank-lines": true,
+        "no-console": [
+            true,
+            "debug",
+            "info",
+            "time",
+            "timeEnd",
+            "trace"
+        ],
+        "no-construct": true,
+        "no-constructor-vars": false,
+        "no-debugger": true,
+        "no-duplicate-variable": true,
+        "no-empty": false,
+        "no-eval": true,
+        "no-inferrable-types": false,
+        "no-internal-module": true,
+        "no-require-imports": false,
+        "no-shadowed-variable": true,
+        "no-switch-case-fall-through": true,
+        "no-trailing-whitespace": true,
+        "no-unused-expression": true,
+        "no-unused-variable": true,
+        "no-use-before-declare": true,
+        "no-var-keyword": true,
+        "no-var-requires": false,
+        "object-literal-sort-keys": false,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-catch",
+            "check-else",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "single",
+            "avoid-escape"
+        ],
+        "radix": true,
+        "semicolon": true,
+        "switch-default": true,
+        "trailing-comma": [
+            true,
+            {
+                "multiline": "never",
+                "singleline": "never"
+            }
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef": false,
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "use-strict": false,
+        "variable-name": [
+            true,
+            "check-format",
+            "allow-leading-underscore",
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-operator",
+            "check-separator",
+            "check-type",
+            "check-module",
+            "check-decl"
+        ]
+    }
 }
diff --git a/ng2-components/ng2-alfresco-webscript/demo/webpack.config.js b/ng2-components/ng2-alfresco-webscript/demo/webpack.config.js
new file mode 100644
index 0000000000..26df33c5f6
--- /dev/null
+++ b/ng2-components/ng2-alfresco-webscript/demo/webpack.config.js
@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');
diff --git a/scripts/npm-build-all-demo.sh b/scripts/npm-build-all-demo.sh
index 9a8f9e73df..f65f92bc52 100755
--- a/scripts/npm-build-all-demo.sh
+++ b/scripts/npm-build-all-demo.sh
@@ -57,27 +57,6 @@ done
 
 cd "$DIR/../ng2-components/"
 
-if $EXEC_INSTALL == true; then
-    echo "====== Regenerate global ng2-components package.json ====="
-    npm install package-json-merge
-    npm run pkg-build
-    echo "====== Install ng2-components dependencies ====="
-    npm install
-
-    if $EXEC_GIT_NPM_INSTALL_JSAPI == true; then
-      echo "====== Use the alfresco JS-API  '$GIT_ISH'====="
-      npm install $GIT_ISH
-      cd "$DIR/../ng2-components/node_modules/alfresco-js-api"
-      npm install
-      cd "$DIR/../ng2-components/"
-    fi
-fi
-
-if $EXEC_BUILD == true; then
-    echo "====== Build ng2-components ====="
-    npm run build || exit 1
-fi
-
 for PACKAGE in ${projects[@]}
 do
   DESTDIR="$DIR/../ng2-components/$PACKAGE/demo"
@@ -89,8 +68,7 @@ do
       npm install
   fi
   cd $DESTDIR
+  npm run buil:dev
 
-  npm link
-  npm run travis
 done