Merge pull request #1210 from Alfresco/dev-denys-webpack

Webpack integration

demo-shell-ng2/app/app.component.ts

@@ -29,8 +29,8 @@ declare var document: any;
 
 @Component({
     selector: 'alfresco-app',
-    templateUrl: 'app/app.component.html',
-    styleUrls: ['app/app.component.css']
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent {
     searchTerm: string = '';

demo-shell-ng2/app/app.declarations.d.ts

@@ -1,19 +0,0 @@
-/*!
- * @license
- * Copyright 2016 Alfresco Software, Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-declare var module: any;
-declare let __moduleName: string;

demo-shell-ng2/app/components/about/about.component.ts

@@ -19,10 +19,7 @@ import { Component, OnInit } from '@angular/core';
 import { Http } from '@angular/http';
 import { ObjectDataTableAdapter } from 'ng2-alfresco-datatable';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
     selector: 'about-page',
     templateUrl: './about.component.html'
 })

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

@@ -40,13 +40,11 @@ import {
 import { FormRenderingService } from 'ng2-activiti-form';
 import { /*CustomEditorComponent*/ CustomStencil01 } from './custom-editor/custom-editor.component';
 
-declare let __moduleName: string;
 declare var componentHandler;
 
 const currentProcessIdNew = '__NEW__';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'activiti-demo',
     templateUrl: './activiti-demo.component.html',
     styleUrls: ['./activiti-demo.component.css']

demo-shell-ng2/app/components/activiti/form-node-viewer.component.ts

@@ -19,11 +19,9 @@ import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 
-declare let __moduleName: string;
 declare var componentHandler;
 
 @Component({
-    moduleId: __moduleName,
     selector: 'form-node-viewer',
     templateUrl: './form-node-viewer.component.html',
     styleUrls: ['./form-node-viewer.component.css']

demo-shell-ng2/app/components/activiti/form-viewer.component.ts

@@ -19,11 +19,9 @@ import { Component, OnInit, OnDestroy, AfterViewChecked } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Subscription } from 'rxjs/Rx';
 
-declare let __moduleName: string;
 declare var componentHandler;
 
 @Component({
-    moduleId: __moduleName,
     selector: 'form-viewer',
     templateUrl: './form-viewer.component.html',
     styleUrls: ['./form-viewer.component.css']

demo-shell-ng2/app/components/datatable/datatable-demo.component.ts

@@ -23,10 +23,7 @@ import {
     ObjectDataColumn
 } from 'ng2-alfresco-datatable';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
     selector: 'datatable-demo',
     templateUrl: './datatable-demo.component.html'
 })

demo-shell-ng2/app/components/files/files.component.ts

@@ -27,10 +27,7 @@ import {
 } from 'ng2-alfresco-documentlist';
 import { FormService } from 'ng2-activiti-form';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
     selector: 'files-component',
     templateUrl: './files.component.html',
     styleUrls: ['./files.component.css']

demo-shell-ng2/app/components/home/home.component.ts

@@ -18,7 +18,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-    moduleId: __moduleName,
     selector: 'home-view',
     templateUrl: './home.component.html'
 })

demo-shell-ng2/app/components/login/login-demo.component.ts

@@ -20,10 +20,7 @@ import { Router } from '@angular/router';
 import { Validators } from '@angular/forms';
 import { StorageService } from 'ng2-alfresco-core';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
     selector: 'login-demo',
     templateUrl: './login-demo.component.html',
     styleUrls: ['./login-demo.component.css']

demo-shell-ng2/app/components/search/search-bar.component.ts

@@ -19,10 +19,7 @@ import { Component, EventEmitter, Output } from '@angular/core';
 import { Router } from '@angular/router';
 import { AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
     selector: 'search-bar',
     templateUrl: './search-bar.component.html'
 })

demo-shell-ng2/app/components/search/search.component.ts

@@ -17,10 +17,7 @@
 
 import { Component } from '@angular/core';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
     selector: 'search-component',
     templateUrl: './search.component.html',
     styles: [`

demo-shell-ng2/app/components/setting/setting.component.ts

@@ -18,10 +18,7 @@
 import { Component } from '@angular/core';
 import { AlfrescoSettingsService, StorageService } from 'ng2-alfresco-core';
 
-declare let __moduleName: string;
-
 @Component({
-    moduleId: __moduleName,
     selector: 'alfresco-setting-demo',
     templateUrl: './setting.component.html',
     styleUrls: ['./setting.component.css']

demo-shell-ng2/app/main.ts

@@ -16,9 +16,12 @@
  */
 
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-// import { enableProdMode } from '@angular/core';
+import { enableProdMode } from '@angular/core';
 import { AppModule } from './app.module';
 
-// enableProdMode();
+if (process.env.ENV === 'production') {
+  enableProdMode();
+}
+
 const platform = platformBrowserDynamic();
 platform.bootstrapModule(AppModule);

demo-shell-ng2/app/polyfills.ts

@@ -0,0 +1,14 @@
+import 'core-js/es6';
+import 'core-js/es7/reflect';
+require('zone.js/dist/zone');
+
+if (process.env.ENV === 'production') {
+  // Production
+
+} else {
+  // Development
+
+  Error['stackTraceLimit'] = Infinity;
+
+  require('zone.js/dist/long-stack-trace-zone');
+}

demo-shell-ng2/app/vendor.ts

@@ -0,0 +1,16 @@
+// 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';
+
+// Other vendors for example jQuery, Lodash or Bootstrap
+// You can import js, ts, css, sass, ...
+
+import 'ng2-activiti-form/stencils/runtime.ng1';
+import 'ng2-activiti-form/stencils/runtime.adf';

demo-shell-ng2/config/helpers.js

@@ -0,0 +1,7 @@
+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;

demo-shell-ng2/config/karma-test-shim.js

@@ -0,0 +1,21 @@
+Error.stackTraceLimit = Infinity;
+
+require('core-js/es6');
+require('core-js/es7/reflect');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+
+var appContext = require.context('../src', true, /\.spec\.ts/);
+
+appContext.keys().forEach(appContext);
+
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

demo-shell-ng2/config/karma.conf.js

@@ -0,0 +1,37 @@
+var webpackConfig = require('./webpack.test');
+
+module.exports = function (config) {
+  var _config = {
+    basePath: '',
+
+    frameworks: ['jasmine'],
+
+    files: [
+      { pattern: './config/karma-test-shim.js', watched: false }
+    ],
+
+    preprocessors: {
+      './config/karma-test-shim.js': ['webpack', 'sourcemap']
+    },
+
+    webpack: webpackConfig,
+
+    webpackMiddleware: {
+      stats: 'errors-only'
+    },
+
+    webpackServer: {
+      noInfo: true
+    },
+
+    reporters: ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: false,
+    browsers: ['PhantomJS'],
+    singleRun: true
+  };
+
+  config.set(_config);
+};

demo-shell-ng2/config/loaders/system.js

@@ -0,0 +1,22 @@
+const moduleIdRegex = /moduleId: module.id,/g;
+const moduleNameRegex = /moduleId: __moduleName,/g;
+
+module.exports = function(source) {
+    this.cacheable();
+
+    let result = source;
+
+    if (moduleIdRegex.test(source)) {
+        result = source.replace(moduleIdRegex, (match) => {
+            return `// ${match}`;
+        });
+    }
+
+    if (moduleNameRegex.test(source)) {
+        result = source.replace(moduleNameRegex, (match) => {
+            return `// ${match}`;
+        });
+    }
+
+    return result;
+}

demo-shell-ng2/config/webpack.common.js

@@ -0,0 +1,122 @@
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var helpers = require('./helpers');
+var path = require('path');
+var fs = require('fs');
+
+var alfrescoLibs = [
+    helpers.root('node_modules', 'alfresco-js-api'),
+    helpers.root('node_modules', 'ng2-activiti-analytics'),
+    helpers.root('node_modules', 'ng2-activiti-diagrams'),
+    helpers.root('node_modules', 'ng2-activiti-form'),
+    helpers.root('node_modules', 'ng2-activiti-processlist'),
+    helpers.root('node_modules', 'ng2-activiti-tasklist'),
+    helpers.root('node_modules', 'ng2-alfresco-core'),
+    helpers.root('node_modules', 'ng2-alfresco-datatable'),
+    helpers.root('node_modules', 'ng2-alfresco-documentlist'),
+    helpers.root('node_modules', 'ng2-alfresco-login'),
+    helpers.root('node_modules', 'ng2-alfresco-search'),
+    helpers.root('node_modules', 'ng2-alfresco-tag'),
+    helpers.root('node_modules', 'ng2-alfresco-upload'),
+    helpers.root('node_modules', 'ng2-alfresco-userinfo'),
+    helpers.root('node_modules', 'ng2-alfresco-viewer'),
+    helpers.root('node_modules', 'ng2-alfresco-webscript')
+].map((entry) => fs.realpathSync(entry));
+
+// console.dir(alfrescoLibs);
+
+const rootPath = helpers.root('node_modules');
+
+module.exports = {
+  entry: {
+    'polyfills': './app/polyfills.ts',
+    'vendor': './app/vendor.ts',
+    'app': './app/main.ts'
+  },
+
+  resolve: {
+    extensions: ['', '.ts', '.js'],
+    modules: [
+      helpers.root('app'),
+      helpers.root('node_modules')
+    ],
+    alias: {
+        'alfresco-js-api': helpers.root('node_modules', 'alfresco-js-api', 'dist', 'alfresco-js-api.js')
+    },
+    root: rootPath,
+    fallback: rootPath
+  },
+
+  resolveLoader: {
+      alias: {
+          'systemjs-loader': helpers.root('config', 'loaders', 'system.js')
+      },
+      fallback: rootPath
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.ts$/,
+        loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        include: [
+          ...alfrescoLibs
+        ],
+        loaders: ['angular2-template-loader', 'source-map-loader', 'systemjs-loader']
+      },
+      {
+        test: /\.html$/,
+        exclude: alfrescoLibs,
+        loader: 'html'
+      },
+      {
+        test: /\.html$/,
+        include: alfrescoLibs,
+        loader: 'html',
+        query: {
+            interpolate: true
+        }
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+        loader: 'file?name=assets/[name].[hash].[ext]'
+      },
+      {
+        test: /\.css$/,
+        exclude: [
+          helpers.root('app'),
+          ...alfrescoLibs
+        ],
+        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
+      },
+      {
+        test: /\.css$/,
+        include: [
+          helpers.root('app'),
+          ...alfrescoLibs
+        ],
+        loader: 'raw'
+      }
+    ]
+  },
+
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin({
+      name: ['app', 'vendor', 'polyfills']
+    }),
+
+    new HtmlWebpackPlugin({
+      template: 'index.html'
+    })
+  ],
+
+  node: {
+      fs: 'empty',
+      module: false
+  }
+};

demo-shell-ng2/config/webpack.dev.js

@@ -0,0 +1,24 @@
+var webpackMerge = require('webpack-merge');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var commonConfig = require('./webpack.common.js');
+var helpers = require('./helpers');
+
+module.exports = webpackMerge(commonConfig, {
+  devtool: 'cheap-module-eval-source-map',
+
+  output: {
+    path: helpers.root('dist'),
+    publicPath: 'http://localhost:3000/',
+    filename: '[name].js',
+    chunkFilename: '[id].chunk.js'
+  },
+
+  plugins: [
+    new ExtractTextPlugin('[name].css')
+  ],
+
+  devServer: {
+    historyApiFallback: true,
+    stats: 'minimal'
+  }
+});

demo-shell-ng2/config/webpack.prod.js

@@ -0,0 +1,38 @@
+var webpack = require('webpack');
+var webpackMerge = require('webpack-merge');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var commonConfig = require('./webpack.common.js');
+var helpers = require('./helpers');
+
+const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
+
+module.exports = webpackMerge(commonConfig, {
+  devtool: 'source-map',
+
+  output: {
+    path: helpers.root('dist'),
+    publicPath: '/',
+    filename: '[name].[hash].js',
+    chunkFilename: '[id].[hash].chunk.js'
+  },
+
+  htmlLoader: {
+    minimize: false // workaround for ng2
+  },
+
+  plugins: [
+    new webpack.NoErrorsPlugin(),
+    new webpack.optimize.DedupePlugin(),
+    new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+      mangle: {
+        keep_fnames: true
+      }
+    }),
+    new ExtractTextPlugin('[name].[hash].css'),
+    new webpack.DefinePlugin({
+      'process.env': {
+        'ENV': JSON.stringify(ENV)
+      }
+    })
+  ]
+});

demo-shell-ng2/config/webpack.test.js

@@ -0,0 +1,37 @@
+var helpers = require('./helpers');
+
+module.exports = {
+  devtool: 'inline-source-map',
+
+  resolve: {
+    extensions: ['', '.ts', '.js']
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.ts$/,
+        loaders: ['awesome-typescript-loader', 'angular2-template-loader']
+      },
+      {
+        test: /\.html$/,
+        loader: 'html'
+
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+        loader: 'null'
+      },
+      {
+        test: /\.css$/,
+        exclude: helpers.root('src', 'app'),
+        loader: 'null'
+      },
+      {
+        test: /\.css$/,
+        include: helpers.root('src', 'app'),
+        loader: 'raw'
+      }
+    ]
+  }
+}

demo-shell-ng2/index.html

@@ -21,11 +21,9 @@
 
     <!-- 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>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></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>
 
@@ -33,10 +31,6 @@
     <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
     <link href="node_modules/dialog-polyfill/dialog-polyfill.css" rel="stylesheet" type="text/css" />
 
-    <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="node_modules/moment/min/moment.min.js"></script>
     <script src="/app/js/Polyline.js"></script>
     <script src="node_modules/pdfjs-dist/web/compatibility.js"></script>
@@ -48,15 +42,6 @@
     <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>
 
-    <!-- Stencils integration -->
-    <script src="node_modules/ng2-activiti-form/stencils/runtime.ng1.js"></script>
-    <script src="node_modules/ng2-activiti-form/stencils/runtime.adf.js"></script>
-
-    <!-- 2. Configure SystemJS -->
-    <script src="systemjs.config.js"></script>
-    <script>
-        System.import('app').catch(function(err){ console.error(err); });
-    </script>
     <style>
         .main_header_adf .mdl-layout__drawer-button {
             right: 0 !important;

demo-shell-ng2/karma.conf.js

@@ -0,0 +1 @@
+module.exports = require('./config/karma.conf.js');

demo-shell-ng2/package.json

@@ -4,15 +4,11 @@
   "version": "0.5.0",
   "author": "Alfresco Software, Ltd.",
   "scripts": {
-    "clean": "npm install rimraf && rimraf dist node_modules typings",
-    "build": "npm run tslint && npm run tsc && npm run licensecheck",
-    "start": "npm run build && npm run serve",
-    "start:dev": "npm run build && concurrently \"npm run tsc:w\" \"npm run serve:dev\" ",
+    "clean": "npm install rimraf && rimraf dist node_modules typings dist",
+    "start": "webpack-dev-server --inline --progress --port 3000",
+    "test": "karma start",
+    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail",
     "aws": "node app.js",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
-    "serve": "wsrv -O http://localhost:3000 -s -p 3000 -a 0.0.0.0 -x ./server/versions.js",
-    "serve:dev": "wsrv -O http://localhost:3000 -s -l -p 3000 -a 0.0.0.0 -x ./server/versions.js",
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json 'app/{,**/}**.ts'",
     "licensecheck": "license-check"
   },
@@ -73,7 +69,6 @@
     "ng2-translate": "2.5.0",
     "pdfjs-dist": "1.5.404",
     "flag-icon-css": "2.3.0",
-    "intl": "1.2.4",
     "moment": "2.15.1",
     "chart.js": "^2.1.4",
     "ng2-charts": "1.1.0",
@@ -98,16 +93,35 @@
     "element.scrollintoviewifneeded-polyfill": "^1.0.1"
   },
   "devDependencies": {
-    "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
-    "@types/jasmine": "^2.2.33",
-    "concurrently": "^2.2.0",
-    "rimraf": "2.5.2",
     "license-check": "1.1.5",
     "mime": "^1.3.4",
     "tslint": "3.15.1",
-    "typescript": "^2.0.3",
-    "wsrv": "^0.1.5"
+
+    "@types/jasmine": "^2.5.35",
+    "@types/node": "^6.0.45",
+    "angular2-template-loader": "^0.6.0",
+    "awesome-typescript-loader": "^2.2.4",
+    "css-loader": "^0.23.1",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.8.5",
+    "html-loader": "^0.4.3",
+    "html-webpack-plugin": "^2.15.0",
+    "jasmine-core": "^2.4.1",
+    "karma": "^1.2.0",
+    "karma-jasmine": "^1.0.2",
+    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.8.0",
+    "null-loader": "^0.1.1",
+    "phantomjs-prebuilt": "^2.1.7",
+    "raw-loader": "^0.5.1",
+    "rimraf": "^2.5.2",
+    "style-loader": "^0.13.1",
+    "typescript": "2.0.3",
+    "webpack": "^1.13.0",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-merge": "^0.14.0",
+    "source-map-loader": "^0.1.5"
   },
   "license-check-config": {
     "src": [

demo-shell-ng2/systemjs.config.js

@@ -1,76 +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: 'app',
-            // 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',
-            // other libraries
-            'rxjs': 'npm:rxjs',
-            'moment': 'npm:moment/min/moment.min.js',
-            'ng2-charts' : 'npm:ng2-charts',
-            'ng2-translate': 'npm:ng2-translate',
-            'ng2-alfresco-core': 'npm:ng2-alfresco-core/dist',
-            'ng2-alfresco-datatable': 'npm:ng2-alfresco-datatable/dist',
-            'ng2-alfresco-documentlist': 'npm:ng2-alfresco-documentlist/dist',
-            'ng2-alfresco-login': 'npm:ng2-alfresco-login/dist',
-            'ng2-alfresco-search': 'npm:ng2-alfresco-search/dist',
-            'ng2-alfresco-upload': 'npm:ng2-alfresco-upload/dist',
-            'ng2-activiti-form': 'npm:ng2-activiti-form/dist',
-            'ng2-alfresco-viewer': 'npm:ng2-alfresco-viewer/dist',
-            'ng2-alfresco-webscript': 'npm:ng2-alfresco-webscript/dist',
-            'ng2-alfresco-tag': 'npm:ng2-alfresco-tag/dist',
-            'ng2-activiti-tasklist': 'npm:ng2-activiti-tasklist/dist',
-            'alfresco-js-api': 'npm:alfresco-js-api/dist',
-            'ng2-activiti-processlist': 'npm:ng2-activiti-processlist/dist',
-            'ng2-alfresco-userinfo': 'npm:ng2-alfresco-userinfo/dist',
-            'ng2-activiti-analytics': 'npm:ng2-activiti-analytics/dist',
-            'ng2-activiti-diagrams': 'npm:ng2-activiti-diagrams/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' },
-            'ng2-charts': { defaultExtension: 'js' },
-
-            'ng2-alfresco-core': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-datatable': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-documentlist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-login': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-search': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-upload': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-viewer': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-form': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-processlist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-tasklist': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-webscript': { main: './index.js', defaultExtension: 'js'},
-            'ng2-alfresco-tag': { main: './index.js', defaultExtension: 'js'},
-            'alfresco-js-api': { main: './alfresco-js-api.js', defaultExtension: 'js'},
-            'ng2-alfresco-userinfo': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-analytics': { main: './index.js', defaultExtension: 'js'},
-            'ng2-activiti-diagrams': { main: './index.js', defaultExtension: 'js'}
-        }
-    });
-})(this);

demo-shell-ng2/tsconfig.json

@@ -1,19 +1,16 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "system",
+    "module": "commonjs",
     "moduleResolution": "node",
     "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "removeComments": false,
+    "lib": ["es2015", "dom"],
     "noImplicitAny": false,
-    "types": ["core-js", "jasmine"]
+    "suppressImplicitAnyIndexErrors": true
   },
   "exclude": [
-    "dist",
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
+    "node_modules"
   ]
 }

demo-shell-ng2/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('./config/webpack.dev.js');

demo-shell-ng2/wsrv-config.json

@@ -1,15 +0,0 @@
-{
-    "watch": [
-        "node_modules/ng2-alfresco-core/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-datatable/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-documentlist/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-login/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-search/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-upload/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-userinfo/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-viewer/dist/**/*.{html,css,js}",
-        "node_modules/ng2-alfresco-webscript/dist/**/*.{html,css,js}",
-        "node_modules/ng2-activiti-form/dist/**/*.{html,css,js}",
-        "node_modules/ng2-activiti-tasklist/dist/**/*.{html,css,js}"
-    ]
-}