diff --git a/README.md b/README.md
index de44b83..2fee868 100644
--- a/README.md
+++ b/README.md
@@ -102,6 +102,7 @@ RESOURCES
* [Angular Update Guide](https://angular-update-guide.firebaseapp.com/)
* [Intrinsic first flexbox grid](https://github.com/argyleink/ragrid)
* [Fast JiT compiler for Angular testing](https://github.com/Quramy/ngx-zombie-compiler)
+* [A loading spinner for Angular 4](https://github.com/Zak-C/ngx-loading)
KNOWN ISSUES
---
@@ -111,6 +112,11 @@ KNOWN ISSUES
TODO
---
+* progressive transpiling
+ - use angular es6 version
+ - compile rxjs into es6
+ - use es6 version
+ -
* try https://prepack.io/
* https://github.com/unlight/angular-webpack-seed/issues
* ngrx redux example
@@ -121,6 +127,6 @@ DEBUG
---
```
inspect node_modules/webpack-dev-server/bin/webpack-dev-server
-inspect --debug-exception node_modules/webpack/bin/webpack.js --env.prod --display-modules
+inspect --debug-exception node_modules/webpack/bin/webpack.js --env.prod --env.es2015 --display-modules
inspect --debug-exception node_modules/webpack/bin/webpack.js
```
diff --git a/package.json b/package.json
index 7764c1f..6df554b 100644
--- a/package.json
+++ b/package.json
@@ -20,9 +20,11 @@
"tests": "npm run t",
"tests:w": "npm run karma",
"server": "webpack-dev-server --hot --progress --colors",
+ "server:prod": "npm run server -- --env.prod",
"server:dashboard": "npm run server -- --env.dashboard",
"build": "webpack --progress --colors",
"build:prod": "npm run build -- --env.prod",
+ "build:prods": "npm run build -- --env.prod --env.es2015",
"dashboard": "webpack-dashboard -- npm run server:dashboard",
"up": "node node_modules/updtr/bin/updtr --test-stdout --save-exact -R simple --test \"npm run test\"",
"build:vendor-libs": "npm run build -- --env.vendorLibs",
@@ -64,7 +66,9 @@
"@angular/router": "4.1.1",
"@ngx-config/core": "0.2.0-rc.5",
"core-js": "2.4.1",
+ "promise-polyfill": "6.0.2",
"rxjs": "5.3.1",
+ "sixflix": "1.0.3",
"tslib": "1.7.0",
"zone.js": "0.8.10"
},
@@ -80,13 +84,14 @@
"@types/node": "7.0.18",
"@types/webpack": "2.2.15",
"@types/webpack-env": "1.13.0",
- "@ultimate/aot-loader": "0.1.15",
+ "@ultimate/aot-loader": "0.1.16",
"angular-router-loader": "0.6.0",
"angular2-template-loader": "0.6.2",
"asset-inject-html-webpack-plugin": "0.6.1",
"autoprefixer": "7.0.1",
"awesome-typescript-loader": "3.1.3",
"babel-eslint": "7.2.3",
+ "babili-webpack-plugin": "0.0.11",
"concurrently": "3.4.0",
"cross-spawn": "5.1.0",
"css-entry-webpack-plugin": "1.0.0-beta.4",
diff --git a/poc.results.txt b/poc.results.txt
new file mode 100644
index 0000000..2cd5941
--- /dev/null
+++ b/poc.results.txt
@@ -0,0 +1,23 @@
+1) target ES5, allpolyfills, uglify 2, aot
+ Asset Size Chunks Chunk Names
+app.js 522 kB 1 [emitted] [big] app
+
+2) target ES5, lazy es6 polyfills, uglify 2, aot
+ Asset Size Chunks Chunk Names
+- es6.js 51.3 kB 0 [emitted] es6
+app.js 477 kB 2 [emitted] [big] app
+
+3) babili, target ES6, aot
+resolve.mainFields = ['es2015', 'browser', 'module', 'main']
+es2015: ~/@angular/core ~/@angular/router ~/@angular/common ~/@angular/platform ~/@angular/core ~/@angular/forms
+ Asset Size Chunks Chunk Names
+- es6.js 52.8 kB 0 [emitted] es6
+app.js 431 kB 2 [emitted] [big] app
+
+3a) babili, target ES6, aot
+resolve.mainFields = ['es2015', 'browser', 'module', 'main']
+es2015: ~/@angular/core ~/@angular/router ~/@angular/common ~/@angular/platform ~/@angular/core ~/@angular/forms
+rxjs -> rxjs/src by NormalReplacement plugin
+ Asset Size Chunks Chunk Names
+- es6.js 52.8 kB 0 [emitted] es6
+app.js 425 kB 2 [emitted] [big] app
diff --git a/src/index.ejs b/src/index.ejs
index ac864d0..832c25d 100644
--- a/src/index.ejs
+++ b/src/index.ejs
@@ -7,6 +7,7 @@
Angular App
+
Loading...
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..f9405b9
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,14 @@
+const sixflix = require('sixflix');
+
+if (!global.Promise) {
+ global.Promise = require('promise-polyfill');
+}
+
+if (!sixflix() || !Object.assign) {
+ require.ensure([], () => {
+ require('core-js/es6');
+ require('./main');
+ }, 'es6');
+} else {
+ require('./main');
+}
diff --git a/src/main.ts b/src/main.ts
index 229c79a..53295f1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,3 @@
-require('core-js/es6');
require('core-js/es7/reflect');
require('core-js/es7/array');
require('zone.js/dist/zone');
diff --git a/tsconfig.json b/tsconfig.json
index 4c6f506..b73ce52 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
{
"compilerOptions": {
- "target": "es5",
+ "target": "es6",
"module": "commonjs",
"importHelpers": true,
"moduleResolution": "node",
diff --git a/webpack.config.ts b/webpack.config.ts
index 75ce52d..79397bc 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -28,6 +28,7 @@ interface Options {
hmr?: boolean;
aot?: boolean;
vendorStyle?: boolean;
+ es2015?: boolean;
}
const defaultOptions = {
@@ -66,7 +67,7 @@ export = (options: Options = {}) => {
const config: any = {
context: context,
entry: {
- app: './main.ts',
+ app: './index.ts',
libs: (() => {
let dependencies = Object.keys(readPkgUp.sync().pkg.dependencies);
_.pull(dependencies, 'core-js', 'zone.js'); // We do not need all from there
@@ -94,9 +95,13 @@ export = (options: Options = {}) => {
output: {
path: buildPath,
publicPath: '',
- filename: (() => {
+ chunkFilename: (() => {
if (options.prod) return '[name]-[chunkhash:6].js';
return '[name].js';
+ })(),
+ filename: (() => {
+ if (options.prod) return '[name]-[hash:6].js';
+ return '[name].js';
})()
},
devtool: (() => {
@@ -137,7 +142,9 @@ export = (options: Options = {}) => {
test: /\.ts$/,
use: (() => {
if (options.aot) {
- return [{ loader: '@ultimate/aot-loader' }];
+ return [
+ { loader: '@ultimate/aot-loader' },
+ ];
}
return [
...(options.hmr ? [{ loader: '@angularclass/hmr-loader' }] : []),
@@ -251,7 +258,7 @@ export = (options: Options = {}) => {
}
if (options.prod) {
result.push(
- new webpack.optimize.UglifyJsPlugin({ sourceMap: true, comments: false }),
+ // new webpack.optimize.UglifyJsPlugin({ sourceMap: true, comments: false }),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
@@ -342,20 +349,46 @@ export = (options: Options = {}) => {
})
);
}
- const AssetInjectHtmlWebpackPlugin = require('asset-inject-html-webpack-plugin');
- const glob = require('glob');
- let [style] = glob.sync(`${buildPath}/style*.css`);
- if (!style) {
- throw new Error('Style not found, make sure that you build it.');
- }
+ // const AssetInjectHtmlWebpackPlugin = require('asset-inject-html-webpack-plugin');
+ // const glob = require('glob');
+ // let [style] = glob.sync(`${buildPath}/style*.css`);
+ // if (!style) {
+ // throw new Error('Style not found, make sure that you build it.');
+ // }
+ // config.plugins.push(
+ // new AssetInjectHtmlWebpackPlugin({
+ // assets: {
+ // style: Path.basename(style),
+ // libs: 'libs.js',
+ // },
+ // args: options,
+ // })
+ // );
+ }
+
+ if (options.es2015) {
+ config.resolve.mainFields = ['es2015', 'browser', 'module', 'main'];
+ config.output.chunkFilename = '[name].2015.js';
+ config.output.filename = '[name].2015.js';
+ const BabiliPlugin = require('babili-webpack-plugin');
+ // const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+ // config.plugins.push(new UglifyJSPlugin({
+ // sourceMap: true,
+ // comments: false,
+ // }));
+ config.plugins.push(new BabiliPlugin({
+ comments: false,
+ }, {
+ comments: false,
+ }));
+ config.devtool = false;
config.plugins.push(
- new AssetInjectHtmlWebpackPlugin({
- assets: {
- style: Path.basename(style),
- libs: 'libs.js',
- },
- args: options,
- })
+ new webpack.NormalModuleReplacementPlugin(
+ /rxjs/,
+ (result) => {
+ result.request = result.request.replace(/rxjs\//, 'rxjs/src/');
+ }
+ )
);
}