basic webpack setup

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

@@ -32,13 +32,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,13 @@
+// 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, ...

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/webpack.common.js

@@ -0,0 +1,83 @@
+var webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var helpers = require('./helpers');
+
+module.exports = {
+  entry: {
+    // 'polyfills': './src/polyfills.ts',
+    'polyfills': './app/polyfills.ts',
+    // 'vendor': './src/vendor.ts',
+    'vendor': './app/vendor.ts',
+    // 'app': './src/main.ts'
+    'app': './app/main.ts'
+  },
+
+  resolve: {
+    extensions: ['', '.ts', '.js'],
+    modules: [
+      // helpers.root('src'),
+      helpers.root('app'),
+      helpers.root('node_modules')
+    ]
+  },
+
+  module: {
+    loaders: [
+      {
+        test: /\.ts$/,
+        loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        include: [
+          helpers.root('node_modules', 'angular2-webpack-lib')
+        ],
+        loader: 'angular2-template-loader',
+      },
+      {
+        test: /\.html$/,
+        loader: 'html'
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
+        loader: 'file?name=assets/[name].[hash].[ext]'
+      },
+      {
+        test: /\.css$/,
+        exclude: [
+          // helpers.root('src', 'app'),
+          helpers.root('app'),
+          helpers.root('node_modules', 'angular2-webpack-lib')
+        ],
+        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
+      },
+      {
+        test: /\.css$/,
+        include: [
+          // helpers.root('src', 'app'),
+          helpers.root('app'),
+          helpers.root('node_modules', 'angular2-webpack-lib')
+        ],
+        loader: 'raw'
+      }
+    ]
+  },
+
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin({
+      name: ['app', 'vendor', 'polyfills']
+    }),
+
+    new HtmlWebpackPlugin({
+      // template: 'src/index.html'
+      template: 'index.html'
+    })
+  ],
+
+  node: {
+      fs: 'empty',
+      module: false
+  }
+};

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

@@ -0,0 +1,25 @@
+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:8080/',
+    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,21 +21,21 @@
 
     <!-- 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="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>
+    <!--<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 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/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>
@@ -53,10 +53,12 @@
     <script src="node_modules/ng2-activiti-form/stencils/runtime.adf.js"></script>
 
     <!-- 2. Configure SystemJS -->
-    <script src="systemjs.config.js"></script>
+    <!--<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/link.sh

@@ -0,0 +1,63 @@
+echo "alfresco-js-api"
+rm -rf node_modules/alfresco-js-api
+cp -r ../../alfresco-js-api/dist node_modules/alfresco-js-api
+
+echo "ng2-activiti-analytics"
+rm -rf node_modules/ng2-activiti-analytics
+cp -r ../ng2-components/ng2-activiti-analytics/dist node_modules/ng2-activiti-analytics
+
+echo "ng2-activiti-diagrams"
+rm -rf node_modules/ng2-activiti-diagrams
+cp -r ../ng2-components/ng2-activiti-diagrams/dist node_modules/ng2-activiti-diagrams
+
+echo "ng2-activiti-form"
+rm -rf node_modules/ng2-activiti-form
+cp -r ../ng2-components/ng2-activiti-form/dist node_modules/ng2-activiti-form
+
+echo "ng2-activiti-processlist"
+rm -rf node_modules/ng2-activiti-processlist
+cp -r ../ng2-components/ng2-activiti-processlist/dist node_modules/ng2-activiti-processlist
+
+echo "ng2-activiti-tasklist"
+rm -rf node_modules/ng2-activiti-tasklist
+cp -r ../ng2-components/ng2-activiti-tasklist/dist node_modules/ng2-activiti-tasklist
+
+echo "ng2-alfresco-core"
+rm -rf node_modules/ng2-alfresco-core
+cp -r ../ng2-components/ng2-alfresco-core/dist node_modules/ng2-alfresco-core
+
+echo "ng2-alfresco-datatable"
+rm -rf node_modules/ng2-alfresco-datatable
+cp -r ../ng2-components/ng2-alfresco-datatable/dist node_modules/ng2-alfresco-datatable
+
+echo "ng2-alfresco-documentlist"
+rm -rf node_modules/ng2-alfresco-documentlist
+cp -r ../ng2-components/ng2-alfresco-documentlist/dist node_modules/ng2-alfresco-documentlist
+
+echo "ng2-alfresco-login"
+rm -rf node_modules/ng2-alfresco-login
+cp -r ../ng2-components/ng2-alfresco-login/dist node_modules/ng2-alfresco-login
+
+echo "ng2-alfresco-search"
+rm -rf node_modules/ng2-alfresco-search
+cp -r ../ng2-components/ng2-alfresco-search/dist node_modules/ng2-alfresco-search
+
+echo "ng2-alfresco-tag"
+rm -rf node_modules/ng2-alfresco-tag
+cp -r ../ng2-components/ng2-alfresco-tag/dist node_modules/ng2-alfresco-tag
+
+echo "ng2-alfresco-upload"
+rm -rf node_modules/ng2-alfresco-upload
+cp -r ../ng2-components/ng2-alfresco-upload/dist node_modules/ng2-alfresco-upload
+
+echo "ng2-alfresco-userinfo"
+rm -rf node_modules/ng2-alfresco-userinfo
+cp -r ../ng2-components/ng2-alfresco-userinfo/dist node_modules/ng2-alfresco-userinfo
+
+echo "ng2-alfresco-viewer"
+rm -rf node_modules/ng2-alfresco-viewer
+cp -r ../ng2-components/ng2-alfresco-viewer/dist node_modules/ng2-alfresco-viewer
+
+echo "ng2-alfresco-webscript"
+rm -rf node_modules/ng2-alfresco-webscript
+cp -r ../ng2-components/ng2-alfresco-webscript/dist node_modules/ng2-alfresco-webscript

demo-shell-ng2/package.json

@@ -3,7 +3,7 @@
   "description": "Demo shell for Alfresco Angular2 components",
   "version": "0.5.0",
   "author": "Alfresco Software, Ltd.",
-  "scripts": {
+  "_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",
@@ -16,6 +16,11 @@
     "tslint": "tslint -c tslint.json *.ts && tslint -c tslint.json 'app/{,**/}**.ts'",
     "licensecheck": "license-check"
   },
+  "scripts": {
+    "start": "webpack-dev-server --inline --progress --port 3000",
+    "test": "karma start",
+    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/Alfresco/alfresco-ng2-components.git"
@@ -98,16 +103,36 @@
     "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",
+    "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",
-    "wsrv": "^0.1.5"
+    "webpack": "^1.13.0",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-merge": "^0.14.0"
   },
   "license-check-config": {
     "src": [

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');