-### Node
-To correctly use this demo check that on your machine is running Node version 5.0.0 or higher.
+## Installing
-#### Local build
-
-1 Install dependencies
+To correctly use this demo check that on your machine is running Node version 6.9.2 LTS or higher.
```sh
npm install
```
-2 Fast build and watch for dev purposes
+## Development build
```sh
npm start
```
->`start` script also includes live reload and watchers for all the `.ts` files.
-TypeScript watchers are also configured for `node_modules` folder within demo shell
-and provide live reload for all the component libraries as well.
+This command compiles and starts the project in watch mode.
+Browser will automatically reload upon changes.
+Upon start you can navigate to `http://localhost:3000` with your preferred browser.
-#### Development branch build
+## Production build
+
+```sh
+npm run build
+```
+
+This command builds broject in `production` mode.
+All output is placed to `dist` folder and can be served your preferred web server.
+You should need no additional files outside the `dist` folder.
+
+In order to quickly test the output you can use the [wsrv](https://www.npmjs.com/package/wsrv) tool (lightweight web server):
+
+```sh
+npm install -g wsrv
+wsrv -s -o dist/
+```
+
+## Development branch build
If you want to run the demo shell with the latest change from the development branch, use the following command from the /script folder:
@@ -40,7 +54,7 @@ If you want to run the demo shell with the latest change from the development br
./start-linked.sh -install
```
-###Multi-language
+## Multi-language
To support a new language you need to create your language file (.json) and add it to `i18n/` folder.
```json
diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts
index 325593eb17..d382b24916 100644
--- a/demo-shell-ng2/app/app.component.ts
+++ b/demo-shell-ng2/app/app.component.ts
@@ -48,8 +48,13 @@ export class AppComponent {
this.setProvider();
if (translate) {
- translate.addTranslationFolder('custom', 'custom-translation/');
- translate.addTranslationFolder('ng2-alfresco-login', 'custom-translation/alfresco-login');
+ if (process.env.ENV === 'production') {
+ translate.addTranslationFolder('custom', 'i18n/custom-translation');
+ translate.addTranslationFolder('ng2-alfresco-login', 'i18n/custom-translation/alfresco-login');
+ } else {
+ translate.addTranslationFolder('custom', 'custom-translation/');
+ translate.addTranslationFolder('ng2-alfresco-login', 'custom-translation/alfresco-login');
+ }
}
}
diff --git a/demo-shell-ng2/app/polyfills.ts b/demo-shell-ng2/app/polyfills.ts
index 222ff23446..c279c6f18f 100644
--- a/demo-shell-ng2/app/polyfills.ts
+++ b/demo-shell-ng2/app/polyfills.ts
@@ -1,5 +1,9 @@
import 'core-js/es6';
import 'core-js/es7/reflect';
+
+// IE 8-11
+require('script!element.scrollintoviewifneeded-polyfill/index.js');
+
require('zone.js/dist/zone');
if (process.env.ENV === 'production') {
diff --git a/demo-shell-ng2/app/vendor.ts b/demo-shell-ng2/app/vendor.ts
index e7a4cbf671..8e907a1064 100644
--- a/demo-shell-ng2/app/vendor.ts
+++ b/demo-shell-ng2/app/vendor.ts
@@ -12,5 +12,42 @@ import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
+// Google Material Design Lite
+import '../public/css/material.orange-blue.min.css';
+import 'material-design-lite/material.min';
+import 'material-design-icons/iconfont/material-icons.css';
+
+// Flags
+import 'flag-icon-css/css/flag-icon.min.css';
+
+// Polyfill(s) for dialogs
+import 'dialog-polyfill/dialog-polyfill';
+import 'dialog-polyfill/dialog-polyfill.css';
+
+// app content
+import '../public/css/app.css';
+import '../public/css/muli-font.css';
+
import 'ng2-activiti-form/stencils/runtime.ng1';
import 'ng2-activiti-form/stencils/runtime.adf';
+
+require('script!../public/js/Polyline.js');
+import 'chart.js';
+
+require('script!moment/min/moment.min.js');
+
+import 'md-date-time-picker/dist/css/mdDateTimePicker.css';
+require('script!md-date-time-picker/dist/js/mdDateTimePicker.min.js');
+require('script!md-date-time-picker/dist/js/draggabilly.pkgd.min.js');
+
+require('pdfjs-dist/web/compatibility.js');
+
+// Setting worker path to worker bundle.
+let pdfjsLib = require('pdfjs-dist');
+if (process.env.ENV === 'production') {
+ pdfjsLib.PDFJS.workerSrc = './pdf.worker.js';
+} else {
+ pdfjsLib.PDFJS.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.js';
+}
+
+require('pdfjs-dist/web/pdf_viewer.js');
diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js
index fd4f384f09..148f0c9aef 100644
--- a/demo-shell-ng2/config/webpack.common.js
+++ b/demo-shell-ng2/config/webpack.common.js
@@ -106,6 +106,11 @@ module.exports = {
},
plugins: [
+
+ new webpack.ProvidePlugin({
+ 'dialogPolyfill': 'dialog-polyfill/dialog-polyfill'
+ }),
+
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
diff --git a/demo-shell-ng2/config/webpack.prod.js b/demo-shell-ng2/config/webpack.prod.js
index ee9cce2943..74758e8f65 100644
--- a/demo-shell-ng2/config/webpack.prod.js
+++ b/demo-shell-ng2/config/webpack.prod.js
@@ -1,6 +1,7 @@
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var CopyWebpackPlugin = require('copy-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
@@ -21,18 +22,66 @@ module.exports = webpackMerge(commonConfig, {
},
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'),
+ // Define env variables to help with builds
+ // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
- })
+ }),
+
+ // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
+ // Only emit files when there are no errors
+ new webpack.NoErrorsPlugin(),
+
+ // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
+ // Dedupe modules in the output
+ new webpack.optimize.DedupePlugin(),
+
+ // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
+ // Minify all javascript, switch loaders to minimizing mode
+ new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
+ mangle: {
+ keep_fnames: true
+ },
+ compressor: {
+ screw_ie8: true,
+ warnings: false
+ }
+ }),
+
+ // Extract css files
+ // Reference: https://github.com/webpack/extract-text-webpack-plugin
+ // Disabled when in test mode or not in build mode
+ new ExtractTextPlugin('[name].[hash].css'),
+
+ // Copy assets from the public folder
+ // Reference: https://github.com/kevlened/copy-webpack-plugin
+ new CopyWebpackPlugin([
+ {
+ from: 'favicon-96x96.png'
+ },
+ {
+ from: 'node_modules/pdfjs-dist/build/pdf.worker.js',
+ to: 'pdf.worker.js'
+ },
+ {
+ context: 'custom-translation',
+ from: '**/*.json',
+ to: 'i18n/custom-translation'
+ },
+ // Copy i18n folders for all modules with ng2-alfresco- prefix
+ {
+ context: 'node_modules',
+ from: 'ng2-alfresco-*/dist/src/i18n/*.json',
+ to: 'node_modules'
+ },
+ // Copy i18n folders for all modules with ng2-activiti- prefix
+ {
+ context: 'node_modules',
+ from: 'ng2-activiti-*/dist/src/i18n/*.json',
+ to: 'node_modules'
+ }
+ ])
]
});
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 8f0c22b8c5..984baef300 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -5,19 +5,8 @@
Demo Application - Angular 2
-
-
-
-
-
-
-
-
-
-
-
@@ -25,22 +14,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-