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',
+    templateUrl: './app.component.html',
-    styleUrls: ['app/app.component.css']
+    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="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></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>
 
@@ -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",
+    "clean": "npm install rimraf && rimraf dist node_modules typings dist",
-    "build": "npm run tslint && npm run tsc && npm run licensecheck",
+    "start": "webpack-dev-server --inline --progress --port 3000",
-    "start": "npm run build && npm run serve",
+    "test": "karma start",
-    "start:dev": "npm run build && concurrently \"npm run tsc:w\" \"npm run serve:dev\" ",
+    "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"
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
   ]
 }

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}"
-    ]
-}

ng2-components/ng2-activiti-analytics/package.json

@@ -68,7 +68,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "1.3.1",

ng2-components/ng2-activiti-analytics/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es7", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-activiti-diagrams/package.json

@@ -59,7 +59,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "1.3.1",

ng2-components/ng2-activiti-diagrams/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/boolean/boolean.editor.ts

@@ -15,9 +15,8 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
-import { CellEditorComponent } from './../cell.editor';
+import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widget.model';
-import { DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widget.model';
 
 @Component({
     moduleId: module.id,
@@ -25,7 +24,16 @@ import { DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widge
     templateUrl: './boolean.editor.html',
     styleUrls: ['./boolean.editor.css']
 })
-export class BooleanEditorComponent extends CellEditorComponent {
+export class BooleanEditorComponent {
+
+    @Input()
+    table: DynamicTableModel;
+
+    @Input()
+    row: DynamicTableRow;
+
+    @Input()
+    column: DynamicTableColumn;
 
     onValueChanged(row: DynamicTableRow, column: DynamicTableColumn, event: any) {
         let value: boolean = (<HTMLInputElement>event.target).checked;

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/cell.editor.spec.ts

@@ -1,42 +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.
- */
-
-import { CellEditorComponent } from './cell.editor';
-
-describe('CellEditorComponent', () => {
-
-    class CustomEditor extends CellEditorComponent {
-        onError(error: any) {
-            this.handleError(error);
-        }
-    }
-
-    let component: CustomEditor;
-
-    beforeEach(() => {
-        component = new CustomEditor();
-    });
-
-    it('should handle error', () => {
-        const error = 'error';
-        spyOn(console, 'error').and.stub();
-
-        component.onError(error);
-        expect(console.error).toHaveBeenCalledWith(error);
-    });
-
-});

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/cell.editor.ts

@@ -1,36 +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.
- */
-
-import { Input } from '@angular/core';
-import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../dynamic-table.widget.model';
-
-export abstract class CellEditorComponent {
-
-    @Input()
-    table: DynamicTableModel;
-
-    @Input()
-    row: DynamicTableRow;
-
-    @Input()
-    column: DynamicTableColumn;
-
-    handleError(error: any) {
-        console.error(error);
-    }
-
-}

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/date/date.editor.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, Input, OnInit, ElementRef } from '@angular/core';
-import { CellEditorComponent } from './../cell.editor';
+import { DynamicTableModel, DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widget.model';
 
 @Component({
     moduleId: module.id,
@@ -24,7 +24,7 @@ import { CellEditorComponent } from './../cell.editor';
     templateUrl: './date.editor.html',
     styleUrls: ['./date.editor.css']
 })
-export class DateEditorComponent extends CellEditorComponent implements OnInit {
+export class DateEditorComponent implements OnInit {
 
     DATE_FORMAT: string = 'DD-MM-YYYY';
 
@@ -32,9 +32,16 @@ export class DateEditorComponent extends CellEditorComponent implements OnInit {
     settings: any;
     value: any;
 
-    constructor(private elementRef: ElementRef) {
+    @Input()
-        super();
+    table: DynamicTableModel;
-    }
+
+    @Input()
+    row: DynamicTableRow;
+
+    @Input()
+    column: DynamicTableColumn;
+
+    constructor(private elementRef: ElementRef) {}
 
     ngOnInit() {
         this.settings = {

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/dropdown/dropdown.editor.ts

@@ -15,9 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-import { CellEditorComponent } from './../cell.editor';
+import { DynamicTableModel, DynamicTableRow, DynamicTableColumn, DynamicTableColumnOption } from './../../dynamic-table.widget.model';
-import { DynamicTableRow, DynamicTableColumn, DynamicTableColumnOption } from './../../dynamic-table.widget.model';
 import { FormService } from './../../../../../services/form.service';
 
 @Component({
@@ -26,14 +25,21 @@ import { FormService } from './../../../../../services/form.service';
     templateUrl: './dropdown.editor.html',
     styleUrls: ['./dropdown.editor.css']
 })
-export class DropdownEditorComponent extends CellEditorComponent implements OnInit {
+export class DropdownEditorComponent implements OnInit {
 
     value: any = null;
     options: DynamicTableColumnOption[] = [];
 
-    constructor(private formService: FormService) {
+    @Input()
-        super();
+    table: DynamicTableModel;
-    }
+
+    @Input()
+    row: DynamicTableRow;
+
+    @Input()
+    column: DynamicTableColumn;
+
+    constructor(private formService: FormService) {}
 
     ngOnInit() {
         let field = this.table.field;
@@ -90,4 +96,8 @@ export class DropdownEditorComponent extends CellEditorComponent implements OnIn
         value = column.options.find(opt => opt.name === value);
         row.value[column.id] = value;
     }
+
+    handleError(error: any) {
+        console.error(error);
+    }
 }

ng2-components/ng2-activiti-form/src/components/widgets/dynamic-table/editors/text/text.editor.ts

@@ -15,9 +15,8 @@
  * limitations under the License.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
-import { CellEditorComponent } from './../cell.editor';
+import { DynamicTableRow, DynamicTableColumn, DynamicTableModel } from './../../dynamic-table.widget.model';
-import { DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widget.model';
 
 @Component({
     moduleId: module.id,
@@ -25,7 +24,16 @@ import { DynamicTableRow, DynamicTableColumn } from './../../dynamic-table.widge
     templateUrl: './text.editor.html',
     styleUrls: ['./text.editor.css']
 })
-export class TextEditorComponent extends CellEditorComponent implements OnInit {
+export class TextEditorComponent implements OnInit {
+
+    @Input()
+    table: DynamicTableModel;
+
+    @Input()
+    row: DynamicTableRow;
+
+    @Input()
+    column: DynamicTableColumn;
 
     displayName: string;
 

ng2-components/ng2-activiti-processlist/src/components/activiti-processlist.component.ts

@@ -24,8 +24,8 @@ import { ProcessInstance } from '../models/process-instance.model';
 import { ActivitiProcessService } from '../services/activiti-process.service';
 
 @Component({
-    moduleId: module.id,
     selector: 'activiti-process-instance-list',
+    moduleId: module.id,
     styleUrls: [ './activiti-processlist.component.css' ],
     templateUrl: './activiti-processlist.component.html'
 })

ng2-components/ng2-activiti-tasklist/package.json

@@ -73,7 +73,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "1.3.1",

ng2-components/ng2-activiti-tasklist/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-alfresco-core/package.json

@@ -79,7 +79,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "cpx": "1.3.1",
     "jasmine-ajax": "3.2.0",

ng2-components/ng2-alfresco-core/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-alfresco-datatable/package.json

@@ -64,7 +64,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "1.3.1",

ng2-components/ng2-alfresco-datatable/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-alfresco-documentlist/package.json

@@ -73,7 +73,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "1.3.1",

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -19,7 +19,7 @@
                     <div class="document-list__this-space-is-empty">This folder is empty</div>
                     <div class="document-list__drag-drop">Drag and Drop</div>
                     <div class="document-list__any-files-here-to-add">any files here to add</div>
-                    <img [src]="baseComponentPath + '/img/empty_doc_lib.svg'" class="document-list__empty_doc_lib">
+                    <img src="./../img/empty_doc_lib.svg" class="document-list__empty_doc_lib">
                 </div>
             </template>
         </no-content-template>

ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts

@@ -40,6 +40,8 @@ import {
     ImageResolver
 } from './../data/share-datatable-adapter';
 
+declare var module: any;
+
 @Component({
     moduleId: module.id,
     selector: 'alfresco-document-list',
@@ -54,8 +56,6 @@ export class DocumentList implements OnInit, AfterContentInit {
 
     DEFAULT_ROOT_FOLDER: string = '/';
 
-    baseComponentPath = module.id.replace('/components/document-list.js', '');
-
     @Input()
     set rootPath(value: string) {
         this.data.rootPath = value || this.data.DEFAULT_ROOT_PATH;
@@ -69,7 +69,7 @@ export class DocumentList implements OnInit, AfterContentInit {
     }
 
     @Input()
-    fallbackThubnail: string = this.baseComponentPath + '/img/ft_ic_miscellaneous.svg';
+    fallbackThubnail: string = null;
 
     @Input()
     navigate: boolean = true;
@@ -159,11 +159,34 @@ export class DocumentList implements OnInit, AfterContentInit {
         private ngZone: NgZone,
         private translate: AlfrescoTranslationService) {
 
-        this.data = new ShareDataTableAdapter(this.documentListService, this.baseComponentPath, []);
+        let rootPath = './..';
+        try {
+            if (module && module.id) {
+                rootPath = module.id.replace('/components/document-list.js', '');
+            }
+        } catch (e) {}
+
+        this.data = new ShareDataTableAdapter(this.documentListService, rootPath, []);
 
         if (translate) {
             translate.addTranslationFolder('ng2-alfresco-documentlist', 'node_modules/ng2-alfresco-documentlist/dist/src');
         }
+
+        this.fallbackThubnail = this.resolveIconPath('ft_ic_miscellaneous.svg');
+    }
+
+    resolveIconPath(icon: string): string {
+        try {
+            // webpack
+            return require(`./../img/${icon}`);
+        } catch (e) {
+            // system.js
+            if (module && module.id) {
+                let baseComponentPath = module.id.replace('/components/document-list.js', '');
+                return `${baseComponentPath}/img/${icon}`;
+            }
+        }
+        return null;
     }
 
     getContextActions(node: MinimalNodeEntity) {

ng2-components/ng2-alfresco-documentlist/src/data/share-datatable-adapter.ts

@@ -154,7 +154,7 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
                 let node = (<ShareDataRow> row).node;
 
                 if (node.entry.isFolder) {
-                    return `${this.basePath}/img/ft_ic_folder.svg`;
+                    return this.getImagePath('ft_ic_folder.svg');
                 }
 
                 if (node.entry.isFile) {
@@ -171,13 +171,13 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
                         if (mimeType) {
                             let icon = this.documentListService.getMimeTypeIcon(mimeType);
                             if (icon) {
-                                return `${this.basePath}/img/${icon}`;
+                                return this.getImagePath(icon);
                             }
                         }
                     }
                 }
 
-                return `${this.basePath}/img/ft_ic_miscellaneous.svg`;
+                return this.getImagePath('ft_ic_miscellaneous.svg');
             }
 
         }
@@ -312,6 +312,19 @@ export class ShareDataTableAdapter implements DataTableAdapter, PaginationProvid
         this.rows = rows;
     }
 
+    getImagePath(id: string): any {
+        try {
+            // webpack
+            return require(`./../img/${id}`);
+        } catch (e) {
+            // system.js
+            if (module && module.id) {
+                return `${this.basePath}/img/${id}`;
+            }
+        }
+        return null;
+    }
+
     private resetPagination() {
         this._count = 0;
         this._hasMoreItems = false;

ng2-components/ng2-alfresco-documentlist/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-alfresco-documentlist/tslint.json

@@ -53,7 +53,7 @@
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,

ng2-components/ng2-alfresco-login/package.json

@@ -76,7 +76,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "1.3.1",

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css

@@ -53,7 +53,7 @@
     margin-top: 5px;
 }
 
-:host .alfresco-logo > img {
+:host .alfresco-logo img {
     max-height: 43px;
 }
 
@@ -195,3 +195,8 @@
 .alfresco-login__password .icon-inline {
     left: 90%;
 }
+
+.alfresco-login__container {
+    background-size: cover;
+    background-position: center;
+}

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html

@@ -1,9 +1,10 @@
-<div class="content-grid mdl-grid content-layout login-content"
+<div class="content-grid mdl-grid content-layout login-content alfresco-login__container"
-    [style.background-image]="'url(' + (backgroundImageUrl || baseComponentPath + '/../assets/images/background.svg') + ')'">
+    style="background-image: url(${require(`./background.svg`)})">
     <div class="login-card-wide mdl-card mdl-shadow--4dp">
         <form [formGroup]="form" (submit)="onSubmit(form.value, $event)">
             <div class="mdl-card__title alfresco-logo">
-                <img class="center" [src]="logoImageUrl || baseComponentPath + '/../assets/images/alfresco-logo.svg'" alt="{{'LOGIN.LOGO' | translate }}">
+                <img *ngIf="logoImageUrl" class="center" [src]="logoImageUrl" alt="{{'LOGIN.LOGO' | translate }}">
+                <img *ngIf="!logoImageUrl" class="center" src="./../assets/images/alfresco-logo.svg" alt="{{'LOGIN.LOGO' | translate }}">
             </div>
             <div class="mdl-card__supporting-text">
                 <div>

ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts

@@ -34,16 +34,11 @@ declare let componentHandler: any;
 })
 export class AlfrescoLoginComponent implements OnInit {
 
-    baseComponentPath = module.id.replace('/alfresco-login.component.js', '');
-
     isPasswordShow: boolean = false;
 
     @Input()
     logoImageUrl: string;
 
-    @Input()
-    backgroundImageUrl: string;
-
     @Input()
     providers: string;
 

ng2-components/ng2-alfresco-login/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-alfresco-search/package.json

@@ -72,7 +72,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "1.3.1",

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.spec.ts

@@ -130,17 +130,18 @@ describe('AlfrescoSearchAutocompleteComponent', () => {
             spyOn(searchService, 'getQueryNodesPromise')
                 .and.returnValue(Promise.resolve(result));
 
-            component.baseComponentPath = 'http://localhost';
-
             let thumbnailService = fixture.debugElement.injector.get(AlfrescoThumbnailService);
             spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue('fake-type-icon.svg');
             spyOn(thumbnailService, 'getMimeTypeKey').and.returnValue('FAKE_TYPE');
 
+            let path = 'http://localhost/fake-type-icon.svg';
+            spyOn(component, 'resolveIconPath').and.returnValue(path);
+
             component.resultsLoad.subscribe(() => {
                 fixture.detectChanges();
                 let imgEl = <any> element.querySelector('#result_row_0 img');
                 expect(imgEl).not.toBeNull();
-                expect(imgEl.src).toBe('http://localhost/img/fake-type-icon.svg');
+                expect(imgEl.src).toBe(path);
                 expect(imgEl.alt).toBe('SEARCH.ICONS.FAKE_TYPE');
                 done();
             });

ng2-components/ng2-alfresco-search/src/components/alfresco-search-autocomplete.component.ts

@@ -28,8 +28,6 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 })
 export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
 
-    baseComponentPath = module.id.replace('/components/alfresco-search-autocomplete.component.js', '');
-
     @Input()
     searchTerm: string = '';
 
@@ -126,10 +124,25 @@ export class AlfrescoSearchAutocompleteComponent implements OnInit, OnChanges {
     getMimeTypeIcon(node: any): string {
         if (node.entry.content && node.entry.content.mimeType) {
             let icon = this.alfrescoThumbnailService.getMimeTypeIcon(node.entry.content.mimeType);
-            return `${this.baseComponentPath}/img/${icon}`;
+            return this.resolveIconPath(icon);
         }
     }
 
+    resolveIconPath(icon: string): string {
+        let result = null;
+        try {
+            // webpack
+            result = require(`./../img/${icon}`);
+        } catch (e) {
+            // system.js
+            if (module && module.id) {
+                let baseComponentPath = module.id.replace('/components/alfresco-search-autocomplete.component.js', '');
+                result = `${baseComponentPath}/img/${icon}`;
+            }
+        }
+        return result;
+    }
+
     /**
      * Gets thumbnail message key for the given document node, which can be used to look up alt text
      * @param node Node to get URL for.

ng2-components/ng2-alfresco-search/src/components/alfresco-search.component.ts

@@ -29,8 +29,6 @@ import { AlfrescoTranslationService } from 'ng2-alfresco-core';
 })
 export class AlfrescoSearchComponent implements OnChanges, OnInit {
 
-    baseComponentPath = module.id.replace('/components/alfresco-search.component.js', '');
-
     @Input()
     searchTerm: string = '';
 
@@ -93,10 +91,25 @@ export class AlfrescoSearchComponent implements OnChanges, OnInit {
     getMimeTypeIcon(node: any): string {
         if (node.entry.content && node.entry.content.mimeType) {
             let icon = this._alfrescoThumbnailService.getMimeTypeIcon(node.entry.content.mimeType);
-            return `${this.baseComponentPath}/img/${icon}`;
+            return this.resolveIconPath(icon);
         }
     }
 
+    private resolveIconPath(icon: string): string {
+        let result = null;
+        try {
+            // webpack
+            result = require(`./../img/${icon}`);
+        } catch (e) {
+            // system.js
+            if (module && module.id) {
+                let baseComponentPath = module.id.replace('/components/alfresco-search.component.js', '');
+                result = `${baseComponentPath}/img/${icon}`;
+            }
+        }
+        return result;
+    }
+
     /**
      * Gets thumbnail message key for the given document node, which can be used to look up alt text
      * @param node Node to get URL for.

ng2-components/ng2-alfresco-search/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-alfresco-search/tslint.json

@@ -53,7 +53,7 @@
     "no-eval": true,
     "no-inferrable-types": false,
     "no-internal-module": true,
-    "no-require-imports": true,
+    "no-require-imports": false,
     "no-shadowed-variable": true,
     "no-switch-case-fall-through": true,
     "no-trailing-whitespace": true,

ng2-components/ng2-alfresco-tag/package.json

@@ -51,7 +51,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "^1.3.1",

ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.css

@@ -3,17 +3,17 @@
 }
 
 .tag-element {
-    padding: 0px 0px 0px 9px!important;
+    padding: 0px 0px 0px 9px !important;
 }
 
 .tag-input {
     float: left;
-    margin-left: 11px!important;
+    margin-left: 11px !important;
 }
 
 .tag-label {
-    left: 10px;!important;
+    left: 10px !important;
-    top: 12px;!important;
+    top: 12px !important;
 }
 
 .tag-container-input{

ng2-components/ng2-alfresco-tag/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-alfresco-upload/package.json

@@ -73,7 +73,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "1.3.1",

ng2-components/ng2-alfresco-upload/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-alfresco-userinfo/package.json

@@ -51,7 +51,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "^1.3.1",

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.css

@@ -80,7 +80,3 @@ img.profile-picture {
     margin-left: 0px;
     margin-right: 8px;
 }
-
-.menu-container__items{
-
-}

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.html

@@ -1,11 +1,8 @@
 <div id="userinfo_container" *ngIf="isLoggedIn()">
     <div *ngIf="ecmUser || bpmUser">
         <div class="button-profile" id="user-profile" data-automation-id="user-profile">
-            <img id="logged-user-img"
+            <img *ngIf="getUserAvatar()" [src]="getUserAvatar()" (error)="bpmUserImage = null; ecmUserImage = null;" id="logged-user-img" class="profile-image" alt="user-info-profile-button">
-                [src]="getUserAvatar()"
+            <img *ngIf="!getUserAvatar()" src="./anonymous.gif" id="logged-user-img" class="profile-image" alt="user-info-profile-button">
-                alt="user-info-profile-button"
-                (error)="onImageLoadingError($event)"
-                class="profile-image"/>
         </div>
         <div mdl id="user-profile-lists" class="user-profile-list-mdl mdl-menu mdl-js-menu mdl-js-ripple-effect"
             [class.mdl-menu--bottom-left]="menuOpenType === 'left'? true : false"
@@ -19,27 +16,22 @@
                 <div class="mdl-tabs__panel" [class.is-active]="ecmUser?true:false" id="ecm-panel">
                     <div class="detail-user-profile-list-mdl mdl-list" *ngIf="ecmUser">
                         <div class="demo-card-wide mdl-card">
-                            <div class="card-title__option mdl-card__title"
+                            <div class="card-title__option mdl-card__title user-info__ecm-background" id="ecm-background-image"
-                                id="ecm-background-image"
+                                style="background-image: url(${require(`./ecm-background.png`)})">
-                                [style.background-image]="'url(' + ( ecmBackgroundImage || baseComponentPath + '/../img/orangeBanner.png')+')'">
+                                <img *ngIf="ecmUserImage" [src]="ecmUserImage" (error)="ecmUserImage = null" class="profile-picture" id="ecm-user-detail-image" alt="ecm-profile-image">
-                                <img class="profile-picture"
+                                <img *ngIf="!ecmUserImage" src="./anonymous.gif" class="profile-picture" id="ecm-user-detail-image" alt="ecm-profile-image">
-                                    id="ecm-user-detail-image"
-                                    alt="ecm-profile-image"
-                                    (error)="onImageLoadingError($event)"
-                                    [src]="getEcmUserAvatar()"/>
                                 <h2 class="mdl-card__title-text" id="ecm-username">{{getUserNameHeaderFor('ECM')}}</h2>
                             </div>
                             <div class="mdl-card__supporting-text">
                                 <li class="mdl-list__item mdl-list__item--two-line">
                                     <span class="mdl-list__item-primary-content">
-                                    <span id="ecm-full-name" class="truncate-long-names">
+                                        <span id="ecm-full-name" class="truncate-long-names">
-                                        {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
+                                            {{ formatValue(ecmUser.firstName) }} {{ formatValue(ecmUser.lastName) }}
-                                    </span>
+                                        </span>
-                                    <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
+                                        <span id="ecm-email" class="mdl-list__item-sub-title">{{ecmUser.email}}</span>
                                     </span>
                                     <span id="ecm-job-title" class="mdl-list__item-secondary-content custom-role-style">
-                                        <span
+                                        <span class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
-                                            class="role-label-user">{{ 'USER_PROFILE.LABELS.ECM.JOB_TITLE' | translate }}</span>
                                         {{ecmUser.jobTitle?ecmUser.jobTitle:'N/A'}}
                                     </span>
                                 </li>
@@ -50,28 +42,24 @@
                 <div class="mdl-tabs__panel" [class.is-active]="bpmUser && !ecmUser?true:false" id="bpm-panel">
                     <div class="detail-user-profile-list-mdl mdl-list" *ngIf="bpmUser">
                         <div class="demo-card-wide mdl-card">
-                            <div class="card-title__option mdl-card__title"
+                            <div class="card-title__option mdl-card__title user-info__bpm-background" id="bpm-background-image"
-                                id="bpm-background-image"
+                                style="background-image: url(${require(`./bpm-background.png`)})">
-                                [style.background-image]="'url(' + (bpmBackgroundImage || baseComponentPath + '/../img/blueBanner.png')+')'">
+                                <img *ngIf="bpmUserImage" [src]="bpmUserImage" class="profile-picture" (error)="bpmUserImage = null" id="bpm-user-detail-image" alt="bpm-profile-image">
-                                <img class="profile-picture"
+                                <img *ngIf="!bpmUserImage" src="./anonymous.gif" class="profile-picture" id="bpm-user-detail-image" alt="bpm-profile-image">
-                                    id="bpm-user-detail-image"
-                                    alt="bpm-profile-image"
-                                    (error)="onImageLoadingError($event)"
-                                    [src]="getBpmUserAvatar()"/>
                                 <h2 class="mdl-card__title-text" id="bpm-username">{{getUserNameHeaderFor('BPM')}}</h2>
                             </div>
                             <div class="mdl-card__supporting-text">
                                 <li class="mdl-list__item mdl-list__item--two-line">
-                            <span class="mdl-list__item-primary-content">
+                                    <span class="mdl-list__item-primary-content">
-                            <span id="bpm-full-name" class="truncate-long-names">
+                                        <span id="bpm-full-name" class="truncate-long-names">
-                                {{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
+                                            {{ formatValue(bpmUser.firstName) }} {{ formatValue(bpmUser.lastName) }}
-                            </span>
+                                        </span>
-                            <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
+                                        <span id="bpm-email" class="mdl-list__item-sub-title">{{bpmUser.email}}</span>
-                            </span>
+                                    </span>
                                     <span id="bpm-tenant" class="mdl-list__item-secondary-content custom-role-style">
-                                <span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
+                                        <span class="role-label-user">{{ 'USER_PROFILE.LABELS.BPM.TENANT' | translate }}</span>
-                                {{bpmUser.tenantName}}
+                                        {{bpmUser.tenantName}}
-                            </span>
+                                    </span>
                                 </li>
                             </div>
                         </div>

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.spec.ts

@@ -125,6 +125,7 @@ describe('User info component', () => {
         expect(res).toEqual('fake-value');
     });
 
+    /*
     it('should return the anonymous avatar when users do not have images', () => {
         let event = <any> {
             target: {
@@ -134,6 +135,7 @@ describe('User info component', () => {
         userInfoComp.onImageLoadingError(event);
         expect(event.target.src).toContain('src/img/anonymous.gif');
     });
+    */
 
     describe('when user is logged on ecm', () => {
 
@@ -204,7 +206,7 @@ describe('User info component', () => {
         describe('and has no image', () => {
 
             beforeEach(async(() => {
-                userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+                // userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
                 spyOn(stubContent, 'getContentUrl').and.returnValue('wrongImage.gif');
                 fixture.detectChanges();
                 jasmine.Ajax.requests.mostRecent().respondWith({
@@ -250,7 +252,7 @@ describe('User info component', () => {
         });
 
         beforeEach(async(() => {
-            userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+            // userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
             fixture.detectChanges();
             jasmine.Ajax.requests.mostRecent().respondWith({
                 status: 200,
@@ -329,7 +331,7 @@ describe('User info component', () => {
             spyOn(stubAuthService, 'isBpmLoggedIn').and.returnValue(true);
             spyOn(stubAuthService, 'isLoggedIn').and.returnValue(true);
             spyOn(stubContent, 'getContentUrl').and.returnValue('src/assets/ecmImg.gif');
-            userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
+            // userInfoComp.anonymousImageUrl = userInfoComp.anonymousImageUrl.replace('/base/dist', '');
             jasmine.Ajax.install();
             fakeBpmUser.firstName = 'fake-bpm-first-name';
             fakeBpmUser.lastName = 'fake-bpm-last-name';

ng2-components/ng2-alfresco-userinfo/src/components/user-info.component.ts

@@ -25,36 +25,21 @@ import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-a
 declare let componentHandler: any;
 
 @Component({
-    selector: 'ng2-alfresco-userinfo',
     moduleId: module.id,
+    selector: 'ng2-alfresco-userinfo',
     styleUrls: ['./user-info.component.css'],
     templateUrl: './user-info.component.html'
 })
 export class UserInfoComponent implements OnInit {
 
-    @Input()
-    ecmBackgroundImage: string;
-
-    @Input()
-    bpmBackgroundImage: string;
-
     @Input()
     menuOpenType: string = 'right';
 
-    @Input()
-    fallBackThumbnailImage: string;
-
-    private baseComponentPath = module.id.replace('components/user-info.component.js', '');
-
     ecmUser: EcmUserModel;
-
     bpmUser: BpmUserModel;
 
-    anonymousImageUrl: string = this.baseComponentPath + 'img/anonymous.gif';
+    bpmUserImage: string;
-
+    ecmUserImage: string;
-    bpmUserImage: any;
-
-    ecmUserImage: any;
 
     constructor(private ecmUserService: EcmUserService,
                 private bpmUserService: BpmUserService,
@@ -87,7 +72,7 @@ export class UserInfoComponent implements OnInit {
             this.ecmUserService.getCurrentUserInfo()
                 .subscribe((res) => {
                         this.ecmUser = <EcmUserModel> res;
-                        this.getEcmAvatar();
+                        this.ecmUserImage = this.ecmUserService.getUserProfileImage(this.ecmUser.avatarId);
                     }
                 );
         }
@@ -103,13 +88,6 @@ export class UserInfoComponent implements OnInit {
         }
     }
 
-    onImageLoadingError(event) {
-        if (event) {
-            let element = <any> event.target;
-            element.src = this.fallBackThumbnailImage || this.anonymousImageUrl;
-        }
-    }
-
     stopClosing(event) {
         event.stopPropagation();
     }
@@ -126,22 +104,10 @@ export class UserInfoComponent implements OnInit {
         }
     }
 
-    private getEcmAvatar() {
-        this.ecmUserImage = this.ecmUserService.getUserProfileImage(this.ecmUser.avatarId);
-    }
-
     getUserAvatar() {
         return this.ecmUserImage || this.bpmUserImage;
     }
 
-    getBpmUserAvatar() {
-        return this.bpmUserImage;
-    }
-
-    getEcmUserAvatar() {
-        return this.ecmUserImage;
-    }
-
     formatValue(value: string) {
         return value === 'null' ? null : value;
     }

ng2-components/ng2-alfresco-userinfo/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-alfresco-viewer/package.json

@@ -67,7 +67,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "1.3.1",

ng2-components/ng2-alfresco-viewer/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",

ng2-components/ng2-alfresco-webscript/package.json

@@ -52,7 +52,6 @@
   },
   "devDependencies": {
     "@types/node": "^6.0.42",
-    "@types/core-js": "^0.9.32",
     "@types/jasmine": "^2.2.33",
     "concurrently": "^2.2.0",
     "cpx": "^1.3.1",

ng2-components/ng2-alfresco-webscript/tsconfig.json

@@ -16,7 +16,8 @@
         "noImplicitUseStrict": false,
         "noFallthroughCasesInSwitch": true,
         "outDir": "dist",
-        "types": ["core-js", "jasmine", "node"]
+        "lib": ["es2015", "dom"],
+        "types": ["jasmine", "node"]
     },
     "exclude": [
         "demo",