Webpack ngc aot

Author: alexzuza

ngc-webpack/config/constants.js

@@ -1,13 +1,12 @@
 const { root } = require('./helpers.js');
+const EVENT = process.env.npm_lifecycle_event || '';
+const PROD = EVENT.includes('prod');
 
 const BASE_OUTPUT_DIR = './dist';
 
 module.exports = {
   SRC_DIR: 'src',
-  DLL_OUTPUT_DIR: BASE_OUTPUT_DIR + '/dll',
-  EXCLUDE_SOURCE_MAPS:  [
-    // these packages have problems with their sourcemaps
-    root('node_modules/@angular'),
-    root('node_modules/rxjs')
-  ]
+  OUTPUT_DIR: BASE_OUTPUT_DIR + '/' + (PROD ? 'prod' : 'dev'),
+  AOT_OUTPUT_DIR: BASE_OUTPUT_DIR + '/aot',
+  DLL_OUTPUT_DIR: BASE_OUTPUT_DIR + '/dll'
 };

ngc-webpack/config/helpers.js

@@ -8,5 +8,13 @@ function root(args) {
   return path.join.apply(path, [_root].concat(args));
 }
 
+const highPriorityChunks = ['polyfills', 'common'];// later, higher
+function sortChunks (prev, next) {
+    const prevName = prev.names[0];
+    const nextName = next.names[0];
+
+    return highPriorityChunks.indexOf(prevName) < highPriorityChunks.indexOf(nextName);
+}
 
 exports.root = root;
+exports.sortChunks = sortChunks;

ngc-webpack/config/webpack.common.js

@@ -1,18 +1,17 @@
 const { EXCLUDE_SOURCE_MAPS, SRC_DIR} = require('./constants');
 const webpack = require('webpack');
 const { root, sortChunks } = require('./helpers.js');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+
 const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const EVENT = process.env.npm_lifecycle_event || '';
-const AOT = EVENT.includes('aot');
+const AOT = EVENT.includes('prod');
 
 
 module.exports = {
     entry: {
-        app: root(SRC_DIR + '/main.browser' + (AOT ? '.aot' : '')),
-        polyfills: root(SRC_DIR + '/polyfills.browser' + (AOT ? '.aot' : '')),
-        vendors: root(SRC_DIR + '/vendors')
+        app: root(SRC_DIR + '/main' + (AOT ? '.aot' : '')),
+        polyfills: root(SRC_DIR + '/polyfills' + (AOT ? '.aot' : ''))
     },
 
     resolve: {
@@ -23,16 +22,13 @@ module.exports = {
 
     module: {
         rules: [
-            {
-                test: /\.ts$/,
-                loader: 'tslint-loader',
-                enforce: 'pre',
-                exclude: /(node_modules|output)/
-            },
             {
                 test: /\.js$/,
                 loader: 'source-map-loader',
-                exclude: [EXCLUDE_SOURCE_MAPS]
+                exclude: [
+                    root('node_modules/@angular'),
+                    root('node_modules/rxjs')
+                ]
             },
             {test: /\.json$/, loader: 'json-loader'},
             {test: /\.html/, loader: 'raw-loader'},
@@ -56,7 +52,7 @@ module.exports = {
             title: 'index',
             filename: 'index.html',
             template: root(SRC_DIR + '/index.html'),
-            chunks: ['app', 'polyfills', 'vendors'],
+            chunks: ['app', 'polyfills'],
             chunksSortMode: sortChunks
         })
     ],

ngc-webpack/config/webpack.dev.js

@@ -1,42 +1,20 @@
-import {
-    DEV_PORT, HOST, USE_DEV_SERVER_PROXY, DEV_SERVER_PROXY_CONFIG, DEV_SERVER_WATCH_OPTIONS,
-    DEV_SOURCE_MAPS, OUTPUT_DIR, DLL_OUTPUT_DIR, AOT_OUTPUT_DIR, SRC_DIR
-} from './constants';
-const {DefinePlugin, DllReferencePlugin, SourceMapDevToolPlugin} = require('webpack');
-const {CheckerPlugin} = require('awesome-typescript-loader');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const { OUTPUT_DIR, DLL_OUTPUT_DIR } = require('./constants');
+const { DefinePlugin, DllReferencePlugin, SourceMapDevToolPlugin } = require('webpack');
+const { CheckerPlugin } = require('awesome-typescript-loader');
 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
 const BellOnBundlerErrorPlugin = require('bell-on-bundler-error-plugin');
-const {hasProcessFlag, root, testDll} = require('./helpers.js');
+const { root } = require('./helpers.js');
 const webpackMerge = require('webpack-merge');
 const commonConfig = require('./webpack.common');
 
-const EVENT = process.env.npm_lifecycle_event || '';
-const CONSTANTS = {
-    AOT: EVENT.includes('aot'),
-    ENV: JSON.stringify('development'),
-    HMR: hasProcessFlag('hot'),
-    HOST: HOST,
-    PORT: DEV_PORT,
-    REST_ENDPOINT_BASE: '\'' + process.env['npm_config_rest_endpoint'] + '\'',
-    IFRAME_BASE: '\'' + process.env['npm_config_iframe_base'] + '\'',
-};
-
-testDll();
-console.log(`Starting dev server on: http://${HOST}:${CONSTANTS.PORT}`);
 
 module.exports = webpackMerge(commonConfig, {
 
-    // See https://github.com/webpack/webpack/issues/2145
-    // Using SourceMapDevToolPlugin instead of devtool.
-    // devtool: DEV_SOURCE_MAPS,
-
     output: {
         filename: '[name].js',
         sourceMapFilename: '[name].map',
         path: root(OUTPUT_DIR),
-        publicPath: 'http://' + CONSTANTS.HOST + ':' + CONSTANTS.PORT + '/',
     },
 
     performance: {
@@ -51,9 +29,8 @@ module.exports = webpackMerge(commonConfig, {
                     '@angularclass/hmr-loader?pretty=true&prod=false',
                     'awesome-typescript-loader',
                     'angular2-template-loader',
-                    'angular2-router-loader?loader=system&genDir=' + AOT_OUTPUT_DIR + '/src/app&aot=' + CONSTANTS.AOT
-                ],
-                exclude: [/\.(spec|e2e|d)\.ts$/]
+                    'angular2-router-loader'
+                ]
             }
         ]
     },
@@ -63,7 +40,6 @@ module.exports = webpackMerge(commonConfig, {
         // We need this plugin to detect a `--watch` mode. It may be removed later
         // after https://github.com/webpack/webpack/issues/3460 will be resolved.
         new CheckerPlugin(),
-        new DefinePlugin(CONSTANTS),
         new DllReferencePlugin({
             context: '.',
             manifest: require(root(DLL_OUTPUT_DIR + `/polyfill-manifest.json`))
@@ -72,7 +48,9 @@ module.exports = webpackMerge(commonConfig, {
             context: '.',
             manifest: require(root(DLL_OUTPUT_DIR + `/vendor-manifest.json`))
         }),
-        new CopyWebpackPlugin([{from: root(DLL_OUTPUT_DIR)}]),
+        new DefinePlugin({
+            ENV: JSON.stringify('development')
+        }),
         new BellOnBundlerErrorPlugin(),
         new AddAssetHtmlPlugin({
             includeSourcemap: false,
@@ -86,8 +64,8 @@ module.exports = webpackMerge(commonConfig, {
         }),
         new SourceMapDevToolPlugin({
             filename: '[file].map',
-            include: ['app'],
-            exclude: ['vendor', 'polyfills'],
+            include: ['src'],
+            exclude: ['polyfills'],
             columns: false
         }),
         new LoaderOptionsPlugin({
@@ -97,13 +75,16 @@ module.exports = webpackMerge(commonConfig, {
     ],
 
     devServer: {
-        contentBase: CONSTANTS.AOT ? root(AOT_OUTPUT_DIR) : root(OUTPUT_DIR),
-        port: CONSTANTS.PORT,
+        contentBase: root(OUTPUT_DIR),
+        port: 8000,
         historyApiFallback: {
             disableDotRule: true,
         },
-        host: CONSTANTS.HOST,
-        watchOptions: DEV_SERVER_WATCH_OPTIONS,
-        proxy: USE_DEV_SERVER_PROXY ? DEV_SERVER_PROXY_CONFIG : {}
+
+        watchOptions: {
+            poll: undefined,
+            aggregateTimeout: 300,
+            ignored: /node_modules/
+        }
     }
 });

ngc-webpack/config/webpack.prod.js

@@ -0,0 +1,48 @@
+const { OUTPUT_DIR, AOT_OUTPUT_DIR, SRC_DIR } = require('./constants');
+const { DefinePlugin, NoEmitOnErrorsPlugin } = require('webpack');
+const webpack = require('webpack');
+
+const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
+const { root } = require('./helpers.js');
+const webpackMerge = require('webpack-merge');
+const commonConfig = require('./webpack.common');
+
+
+module.exports = webpackMerge(commonConfig, {
+
+    devtool: 'source-map',
+
+    output: {
+        filename: '[name].[hash].js',
+        chunkFilename: '[id].[hash].chunk.js',
+        path: root(OUTPUT_DIR)
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                loaders: [
+                    'awesome-typescript-loader?configFileName=' + root('tsconfig.aot.json'),
+                    'angular2-template-loader',
+                    'angular2-router-loader?loader=system&genDir=' + AOT_OUTPUT_DIR + '/app&aot=true'
+                ],
+                exclude: [/\.(spec|e2e|d)\.ts$/]
+            }
+        ]
+    },
+
+    plugins: [
+        new webpack.optimize.CommonsChunkPlugin({
+            name: ['app', 'vendors', 'polyfills']
+        }),
+        new DefinePlugin({
+            ENV: JSON.stringify('production')
+        }),
+        new NoEmitOnErrorsPlugin(),
+        new UglifyJsPlugin({
+            beautify: false,
+            comments: false
+        })
+    ]
+});

ngc-webpack/package.json

@@ -4,23 +4,17 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "build:dll": "npm run clean:awcache && npm run clean:dll && webpack",
+    "serve:dev": "webpack-dev-server --open --inline --hot",
+    "start": "npm run serve:dev",
 
-    "build:dll": "webpack",
-
-    "dev:hmr": "webpack-dev-server --open --inline --hot",
-
-    "build:watch": "npm run clean:aot && tsc -p tsconfig.json -w",
-    "serve": "lite-server -c bs-config.dev.json",
-    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
-    "clean:jit": "rimraf build-jit",
-    "copy:jit": "copyfiles -f \"src/**/*.html\" build-jit",
-    "build:jit": "npm run clean:jit && npm run copy:jit && tsc -p tsconfig.jit.json && rollup -c rollup-config.jit.js",
-    "serve:jit": "lite-server -c bs-config.jit.json",
-    "check:jit": "source-map-explorer build-jit/build.js",
-    "clean:aot": "rimraf \"src/**/*.{ngfactory.ts,js,js.map,metadata.json,ngsummary.json}\" aot build-aot",
-    "build:aot": "npm run clean:aot && ngc -p tsconfig.aot.json && rollup -c rollup-config.aot.js",
-    "serve:aot": "lite-server -c bs-config.aot.json",
-    "check:aot": "source-map-explorer build-aot/build.js"
+    "build:ngc": "npm run clean:ngc && ngc -p tsconfig.aot.json",
+    "build:prod": "npm run build:ngc && npm run clean:prod && webpack",
+    
+    "clean:dll": "rimraf dist/dll",
+    "clean:awcache": "rimraf dist/awcache",
+    "clean:ngc": "rimraf dist/aot",
+    "clean:prod": "npm run clean:awcache && rimraf dist/prod"
   },
   "author": "",
   "license": "ISC",
@@ -30,22 +24,28 @@
     "@angular/core": "^4.0.2",
     "@angular/platform-browser": "^4.0.2",
     "@angular/platform-browser-dynamic": "^4.0.2",
-  
     "core-js": "^2.4.1",
     "rxjs": "^5.3.0",
     "zone.js": "^0.8.5"
   },
   "devDependencies": {
     "@angular/compiler-cli": "^4.0.2",
-
-    "awesome-typescript-loader": "3.1.2",
-    "bell-on-bundler-error-plugin": "1.0.8",
     "@angularclass/hmr": "1.2.2",
     "@angularclass/hmr-loader": "3.0.2",
-    
+    "@types/node": "^7.0.13",
+    "add-asset-html-webpack-plugin": "^1.0.2",
+    "angular2-router-loader": "^0.3.5",
+    "angular2-template-loader": "^0.6.2",
+    "awesome-typescript-loader": "3.1.2",
+    "bell-on-bundler-error-plugin": "1.0.8",
+    "html-webpack-plugin": "^2.28.0",
+    "raw-loader": "^0.5.1",
     "source-map-explorer": "^1.3.3",
+    "source-map-loader": "^0.2.1",
+    "ts-helpers": "^1.1.2",
     "typescript": "^2.2.2",
     "webpack": "^2.4.1",
-    "webpack-dev-server": "^2.4.2"
+    "webpack-dev-server": "^2.4.2",
+    "webpack-merge": "^4.1.0"
   }
 }

ngc-webpack/src/app/app.module.ts

@@ -1,5 +1,6 @@
-import { NgModule } from '@angular/core';
+import { NgModule, ApplicationRef } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
 
 import { AppComponent } from './app.component';
 import { ChildComponent } from './child/child.component';
@@ -11,4 +12,25 @@ import { ChildComponent } from './child/child.component';
     providers: [],
     bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+    constructor(public appRef: ApplicationRef) { }
+
+    hmrOnInit(store) {
+        if (!store || !store.rootState) return;
+        if ('restoreInputValues' in store) { store.restoreInputValues(); }
+        this.appRef.tick();
+        Object.keys(store).forEach(prop => delete store[prop]);
+    }
+
+    hmrOnDestroy(store) {
+        const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement);
+        store.disposeOldHosts = createNewHosts(cmpLocation);
+        store.restoreInputValues = createInputTransfer();
+        removeNgStyles();
+    }
+
+    hmrAfterDestroy(store) {
+        store.disposeOldHosts();
+        delete store.disposeOldHosts;
+    }
+}

ngc-webpack/src/app/main.ts

@@ -0,0 +1,26 @@
+declare var ENV: string;
+import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
+import { enableProdMode, ApplicationRef } from '@angular/core';
+
+// Angular debug tools in the dev console
+// https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md
+let _decorateModuleRef = function identity<T>(value: T): T { return value; };
+
+if ('production' === ENV) {
+  // Production
+  disableDebugTools();
+  enableProdMode();
+} else {
+  _decorateModuleRef = (modRef: any) => {
+    const appRef = modRef.injector.get(ApplicationRef);
+    const cmpRef = appRef.components[0];
+
+    let _ng = (<any>window).ng;
+    enableDebugTools(cmpRef);
+    (<any>window).ng.probe = _ng.probe;
+    (<any>window).ng.coreTokens = _ng.coreTokens;
+    return modRef;
+  };
+}
+
+export const decorateModuleRef = _decorateModuleRef;