feat(dependencies): update angular to 2.4.3. DLL Integration

config/helpers.js

@@ -1,6 +1,3 @@
-/**
- * @author: @AngularClass
- */
 var path = require('path');
 
 const EVENT = process.env.npm_lifecycle_event || '';

config/webpack.common.js

@@ -90,17 +90,6 @@ module.exports = function (options) {
     module: {
 
       rules: [
-        {
-          test: /\.ts$/,
-          loader: 'string-replace-loader',
-          query: {
-            search: /(System|SystemJS)(.*[\n\r]\s*\.|\.)import\((.+)\)/g,
-            replace: '$1.import($3).then(mod => (mod.__esModule && mod.default) ? mod.default : mod)'
-          },
-          include: [helpers.root('src')],
-          enforce: 'pre'
-        },
-
         /*
          * Typescript loader support for .ts and Angular 2 async routes via .async.ts
          * Replace templateUrl and stylesUrl with require()
@@ -114,7 +103,14 @@ module.exports = function (options) {
             '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
             'awesome-typescript-loader?{configFileName: "tsconfig.webpack.json"}',
             'angular2-template-loader',
-            'angular-router-loader?loader=system&genDir=compiled/src/app&aot=' + AOT
+            {
+              loader: 'ng-router-loader',
+              options: {
+                loader: 'async-system',
+                genDir: 'compiled',
+                aot: AOT
+              }
+            }
           ],
           exclude: [/\.(spec|e2e)\.ts$/]
         },
@@ -130,13 +126,12 @@ module.exports = function (options) {
         },
 
         /*
-         * to string and css loader support for *.css files
+         * to string and css loader support for *.css files (from Angular components)
          * Returns file content as string
          *
          */
         {
           test: /\.css$/,
-          // loaders: ['to-string-loader', 'css-loader']
           use: ['raw-loader']
         },
 
@@ -188,10 +183,6 @@ module.exports = function (options) {
       ]
     },
 
-    resolveLoader: {
-      moduleExtensions: ['-loader']
-    },
-
     /*
      * Add additional plugins to the compiler.
      *
@@ -227,9 +218,9 @@ module.exports = function (options) {
       }),
       // This enables tree shaking of the vendor modules
       new CommonsChunkPlugin({
-          name: 'vendor',
-          chunks: ['main'],
-          minChunks: module => /node_modules\//.test(module.resource)
+        name: 'vendor',
+        chunks: ['main'],
+        minChunks: module => /node_modules\//.test(module.resource)
       }),
       // Specify the correct order the scripts will be injected in
       new CommonsChunkPlugin({
@@ -259,9 +250,9 @@ module.exports = function (options) {
        * See: https://www.npmjs.com/package/copy-webpack-plugin
        */
       new CopyWebpackPlugin([
-        { from: 'src/assets', to: 'assets' },
-        { from: 'node_modules/ckeditor', to: 'ckeditor' },
-        { from: 'src/meta'}
+        {from: 'src/assets', to: 'assets'},
+        {from: 'node_modules/ckeditor', to: 'ckeditor'},
+        {from: 'src/meta'}
       ]),
 
       /*
@@ -365,11 +356,11 @@ module.exports = function (options) {
         helpers.root('node_modules/@angular/core/src/facade/math.js')
       ),
 
-        new ngcWebpack.NgcWebpackPlugin({
-          disabled: !AOT,
-          tsConfig: helpers.root('tsconfig.webpack.json'),
-          resourceOverride: helpers.root('config/resource-override.js')
-        })
+      new ngcWebpack.NgcWebpackPlugin({
+        disabled: !AOT,
+        tsConfig: helpers.root('tsconfig.webpack.json'),
+        resourceOverride: helpers.root('config/resource-override.js')
+      })
     ],
 
     /*

config/webpack.dev.js

@@ -1,11 +1,13 @@
 const helpers = require('./helpers');
 const path = require('path');
 const webpackMerge = require('webpack-merge'); // used to merge webpack configs
+const webpackMergeDll = webpackMerge.strategy({plugins: 'replace'});
 const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev
 
 /**
  * Webpack Plugins
  */
+const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
 const DefinePlugin = require('webpack/lib/DefinePlugin');
 const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
 const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
@@ -24,6 +26,8 @@ const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
   HMR: HMR
 });
 
+const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;
+
 /**
  * Webpack configuration
  *
@@ -103,6 +107,52 @@ module.exports = function (options) {
         }
       }),
 
+      new DllBundlesPlugin({
+        bundles: {
+          polyfills: [
+            'core-js',
+            {
+              name: 'zone.js',
+              path: 'zone.js/dist/zone.js'
+            },
+            {
+              name: 'zone.js',
+              path: 'zone.js/dist/long-stack-trace-zone.js'
+            },
+            'ts-helpers',
+          ],
+          vendor: [
+            '@angular/platform-browser',
+            '@angular/platform-browser-dynamic',
+            '@angular/core',
+            '@angular/common',
+            '@angular/forms',
+            '@angular/http',
+            '@angular/router',
+            '@angularclass/hmr',
+            'rxjs',
+          ]
+        },
+        dllDir: helpers.root('dll'),
+        webpackConfig: webpackMergeDll(commonConfig({env: ENV}), {
+          devtool: 'cheap-module-source-map',
+          plugins: []
+        })
+      }),
+
+      /**
+       * Plugin: AddAssetHtmlPlugin
+       * Description: Adds the given JS or CSS file to the files
+       * Webpack knows about, and put it into the list of assets
+       * html-webpack-plugin injects into the generated html.
+       *
+       * See: https://github.com/SimenB/add-asset-html-webpack-plugin
+       */
+      new AddAssetHtmlPlugin([
+        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('polyfills')}`) },
+        { filepath: helpers.root(`dll/${DllBundlesPlugin.resolveFile('vendor')}`) }
+      ]),
+
       /**
        * Plugin: NamedModulesPlugin (experimental)
        * Description: Uses file names as module name.