From c7167bb81204aec281e6c6b92093322c778f351c Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 6 Dec 2016 15:39:22 +0000 Subject: [PATCH 01/28] basic webpack setup --- demo-shell-ng2/app/app.component.ts | 4 +- demo-shell-ng2/app/app.declarations.d.ts | 19 ----- .../app/components/about/about.component.ts | 3 - .../activiti/activiti-demo.component.ts | 2 - .../activiti/form-node-viewer.component.ts | 2 - .../activiti/form-viewer.component.ts | 2 - .../datatable/datatable-demo.component.ts | 3 - .../app/components/files/files.component.ts | 3 - .../app/components/home/home.component.ts | 1 - .../components/login/login-demo.component.ts | 3 - .../components/search/search-bar.component.ts | 3 - .../app/components/search/search.component.ts | 3 - .../components/setting/setting.component.ts | 3 - demo-shell-ng2/app/main.ts | 7 +- demo-shell-ng2/app/polyfills.ts | 14 ++++ demo-shell-ng2/app/vendor.ts | 13 +++ demo-shell-ng2/config/helpers.js | 7 ++ demo-shell-ng2/config/karma-test-shim.js | 21 +++++ demo-shell-ng2/config/karma.conf.js | 37 +++++++++ demo-shell-ng2/config/webpack.common.js | 83 +++++++++++++++++++ demo-shell-ng2/config/webpack.dev.js | 25 ++++++ demo-shell-ng2/config/webpack.prod.js | 38 +++++++++ demo-shell-ng2/config/webpack.test.js | 37 +++++++++ demo-shell-ng2/index.html | 20 +++-- demo-shell-ng2/karma.conf.js | 1 + demo-shell-ng2/link.sh | 63 ++++++++++++++ demo-shell-ng2/package.json | 37 +++++++-- demo-shell-ng2/tsconfig.json | 11 +-- demo-shell-ng2/webpack.config.js | 1 + 29 files changed, 393 insertions(+), 73 deletions(-) delete mode 100644 demo-shell-ng2/app/app.declarations.d.ts create mode 100644 demo-shell-ng2/app/polyfills.ts create mode 100644 demo-shell-ng2/app/vendor.ts create mode 100644 demo-shell-ng2/config/helpers.js create mode 100644 demo-shell-ng2/config/karma-test-shim.js create mode 100644 demo-shell-ng2/config/karma.conf.js create mode 100644 demo-shell-ng2/config/webpack.common.js create mode 100644 demo-shell-ng2/config/webpack.dev.js create mode 100644 demo-shell-ng2/config/webpack.prod.js create mode 100644 demo-shell-ng2/config/webpack.test.js create mode 100644 demo-shell-ng2/karma.conf.js create mode 100755 demo-shell-ng2/link.sh create mode 100644 demo-shell-ng2/webpack.config.js diff --git a/demo-shell-ng2/app/app.component.ts b/demo-shell-ng2/app/app.component.ts index df4b2f6a0b..325593eb17 100644 --- a/demo-shell-ng2/app/app.component.ts +++ b/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 = ''; diff --git a/demo-shell-ng2/app/app.declarations.d.ts b/demo-shell-ng2/app/app.declarations.d.ts deleted file mode 100644 index e394281fc8..0000000000 --- a/demo-shell-ng2/app/app.declarations.d.ts +++ /dev/null @@ -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; diff --git a/demo-shell-ng2/app/components/about/about.component.ts b/demo-shell-ng2/app/components/about/about.component.ts index 93320f2746..70e9c7a248 100644 --- a/demo-shell-ng2/app/components/about/about.component.ts +++ b/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' }) diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts b/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts index 0bfe181719..b9314385fa 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.ts +++ b/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'] diff --git a/demo-shell-ng2/app/components/activiti/form-node-viewer.component.ts b/demo-shell-ng2/app/components/activiti/form-node-viewer.component.ts index a73a709543..cde623c06e 100644 --- a/demo-shell-ng2/app/components/activiti/form-node-viewer.component.ts +++ b/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'] diff --git a/demo-shell-ng2/app/components/activiti/form-viewer.component.ts b/demo-shell-ng2/app/components/activiti/form-viewer.component.ts index 6998e1fcb5..080229194c 100644 --- a/demo-shell-ng2/app/components/activiti/form-viewer.component.ts +++ b/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'] diff --git a/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts b/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts index ae615fe7e6..ae5854cabd 100644 --- a/demo-shell-ng2/app/components/datatable/datatable-demo.component.ts +++ b/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' }) diff --git a/demo-shell-ng2/app/components/files/files.component.ts b/demo-shell-ng2/app/components/files/files.component.ts index d8ccb74114..ff0ee74732 100644 --- a/demo-shell-ng2/app/components/files/files.component.ts +++ b/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'] diff --git a/demo-shell-ng2/app/components/home/home.component.ts b/demo-shell-ng2/app/components/home/home.component.ts index e4f6cab466..979c4d3a5a 100644 --- a/demo-shell-ng2/app/components/home/home.component.ts +++ b/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' }) diff --git a/demo-shell-ng2/app/components/login/login-demo.component.ts b/demo-shell-ng2/app/components/login/login-demo.component.ts index 7620487835..cfe5c552e4 100644 --- a/demo-shell-ng2/app/components/login/login-demo.component.ts +++ b/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'] diff --git a/demo-shell-ng2/app/components/search/search-bar.component.ts b/demo-shell-ng2/app/components/search/search-bar.component.ts index 689cf21f5e..ed6b2b651f 100644 --- a/demo-shell-ng2/app/components/search/search-bar.component.ts +++ b/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' }) diff --git a/demo-shell-ng2/app/components/search/search.component.ts b/demo-shell-ng2/app/components/search/search.component.ts index a7306c954f..ae8f64d019 100644 --- a/demo-shell-ng2/app/components/search/search.component.ts +++ b/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: [` diff --git a/demo-shell-ng2/app/components/setting/setting.component.ts b/demo-shell-ng2/app/components/setting/setting.component.ts index 227bf4f17b..3fd9278643 100644 --- a/demo-shell-ng2/app/components/setting/setting.component.ts +++ b/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'] diff --git a/demo-shell-ng2/app/main.ts b/demo-shell-ng2/app/main.ts index 00d224eb7d..a60d89409f 100644 --- a/demo-shell-ng2/app/main.ts +++ b/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); diff --git a/demo-shell-ng2/app/polyfills.ts b/demo-shell-ng2/app/polyfills.ts new file mode 100644 index 0000000000..222ff23446 --- /dev/null +++ b/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'); +} diff --git a/demo-shell-ng2/app/vendor.ts b/demo-shell-ng2/app/vendor.ts new file mode 100644 index 0000000000..caef0d0a69 --- /dev/null +++ b/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, ... diff --git a/demo-shell-ng2/config/helpers.js b/demo-shell-ng2/config/helpers.js new file mode 100644 index 0000000000..15dc4a5a46 --- /dev/null +++ b/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; diff --git a/demo-shell-ng2/config/karma-test-shim.js b/demo-shell-ng2/config/karma-test-shim.js new file mode 100644 index 0000000000..4b98239a95 --- /dev/null +++ b/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()); diff --git a/demo-shell-ng2/config/karma.conf.js b/demo-shell-ng2/config/karma.conf.js new file mode 100644 index 0000000000..96ce1d914d --- /dev/null +++ b/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); +}; diff --git a/demo-shell-ng2/config/webpack.common.js b/demo-shell-ng2/config/webpack.common.js new file mode 100644 index 0000000000..dacde8f63e --- /dev/null +++ b/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 + } +}; diff --git a/demo-shell-ng2/config/webpack.dev.js b/demo-shell-ng2/config/webpack.dev.js new file mode 100644 index 0000000000..b6f981475d --- /dev/null +++ b/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' + } +}); diff --git a/demo-shell-ng2/config/webpack.prod.js b/demo-shell-ng2/config/webpack.prod.js new file mode 100644 index 0000000000..ee9cce2943 --- /dev/null +++ b/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) + } + }) + ] +}); diff --git a/demo-shell-ng2/config/webpack.test.js b/demo-shell-ng2/config/webpack.test.js new file mode 100644 index 0000000000..5ffdd6678f --- /dev/null +++ b/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' + } + ] + } +} diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html index 84b8234b90..0f9267d13f 100644 --- a/demo-shell-ng2/index.html +++ b/demo-shell-ng2/index.html @@ -21,21 +21,21 @@ - - + + - - - + + + - - - + + + @@ -53,10 +53,12 @@ - + +