feat(@angular/cli): name lazy chunks

packages/@angular/cli/models/webpack-configs/common.ts

@@ -1,6 +1,7 @@
 import * as webpack from 'webpack';
 import * as path from 'path';
 import { GlobCopyWebpackPlugin } from '../../plugins/glob-copy-webpack-plugin';
+import { NamedLazyChunksWebpackPlugin } from '../../plugins/named-lazy-chunks-webpack-plugin';
 import { extraEntryParser, getOutputHashFormat } from './utils';
 import { WebpackConfigOptions } from '../webpack-config';
 
@@ -109,7 +110,8 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
       ].concat(extraRules)
     },
     plugins: [
-      new webpack.NoEmitOnErrorsPlugin()
+      new webpack.NoEmitOnErrorsPlugin(),
+      new NamedLazyChunksWebpackPlugin(),
     ].concat(extraPlugins),
     node: {
       fs: 'empty',

packages/@angular/cli/models/webpack-configs/production.ts

@@ -97,7 +97,7 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
       new webpack.EnvironmentPlugin({
         'NODE_ENV': 'production'
       }),
-      new (<any>webpack).HashedModuleIdsPlugin(),
+      new webpack.HashedModuleIdsPlugin(),
       new webpack.optimize.UglifyJsPlugin(<any>{
         mangle: { screw_ie8: true },
         compress: { screw_ie8: true, warnings: buildOptions.verbose },

packages/@angular/cli/plugins/named-lazy-chunks-webpack-plugin.ts

@@ -0,0 +1,41 @@
+import * as webpack from 'webpack';
+
+
+// This just extends webpack.NamedChunksPlugin to prevent name collisions.
+export class NamedLazyChunksWebpackPlugin extends webpack.NamedChunksPlugin {
+  constructor() {
+    // Append a dot and number if the name already exists.
+    const nameMap = new Map<string, boolean>();
+    function getUniqueName(baseName: string) {
+      let name = baseName;
+      let num = 0;
+      while (nameMap.has(name)) {
+        name = `${baseName}.${num++}`;
+      }
+      nameMap.set(name, true);
+      return name;
+    }
+
+    const nameResolver = (chunk: any) => {
+      // Entry chunks have a name already, use it.
+      if (chunk.name) {
+        return chunk.name;
+      }
+
+      // Try to figure out if it's a lazy loaded route.
+      if (chunk.blocks
+        && chunk.blocks.length > 0
+        && chunk.blocks[0].dependencies
+        && chunk.blocks[0].dependencies.length > 0
+        && chunk.blocks[0].dependencies[0].lazyRouteChunkName
+      ) {
+        // lazyRouteChunkName was added by @ngtools/webpack.
+        return getUniqueName(chunk.blocks[0].dependencies[0].lazyRouteChunkName);
+      }
+
+      return null;
+    };
+
+    super(nameResolver);
+  }
+}

packages/@angular/cli/plugins/webpack.js

@@ -6,5 +6,7 @@ module.exports = {
   GlobCopyWebpackPlugin: require('../plugins/glob-copy-webpack-plugin').GlobCopyWebpackPlugin,
   SuppressExtractedTextChunksWebpackPlugin:
     require('../plugins/suppress-entry-chunks-webpack-plugin')
-      .SuppressExtractedTextChunksWebpackPlugin
+      .SuppressExtractedTextChunksWebpackPlugin,
+  NamedLazyChunksWebpackPlugin:
+    require('../plugins/named-lazy-chunks-webpack-plugin').NamedLazyChunksWebpackPlugin
 };

packages/@angular/cli/tasks/eject.ts

@@ -175,6 +175,7 @@ class JsonWebpackSerializer {
           this._addImport('webpack.optimize', 'UglifyJsPlugin');
           break;
         case angularCliPlugins.BaseHrefWebpackPlugin:
+        case angularCliPlugins.NamedLazyChunksWebpackPlugin:
         case angularCliPlugins.SuppressExtractedTextChunksWebpackPlugin:
           this._addImport('@angular/cli/plugins/webpack', plugin.constructor.name);
           break;

packages/@angular/cli/webpack-custom-typings.d.ts

@@ -0,0 +1,10 @@
+import * as webpack from 'webpack';
+
+declare module 'webpack' {
+  export class NamedChunksPlugin {
+    constructor(nameResolver: (chunk: any) => string | null);
+  }
+  export class HashedModuleIdsPlugin {
+    constructor();
+  }
+}

packages/@ngtools/webpack/src/plugin.ts

@@ -310,7 +310,11 @@ export class AotPlugin implements Tapable {
               .map((key) => {
                 const value = this._lazyRoutes[key];
                 if (value !== null) {
-                  return new ContextElementDependency(value, key);
+                  const dep = new ContextElementDependency(value, key);
+                  // lazyRouteChunkName is used by webpack.NamedChunksPlugin to give the
+                  // lazy loaded chunk a name.
+                  dep.lazyRouteChunkName = path.basename(key, '.ts');
+                  return dep;
                 } else {
                   return null;
                 }

tests/e2e/tests/misc/lazy-module.ts

@@ -12,17 +12,27 @@ export default function() {
     .then(() => ng('build'))
     .then(() => oldNumberOfFiles = readdirSync('dist').length)
     .then(() => ng('generate', 'module', 'lazy', '--routing'))
+    .then(() => ng('generate', 'module', 'too/lazy', '--routing'))
     .then(() => addImportToModule('src/app/app.module.ts', oneLine`
       RouterModule.forRoot([{ path: "lazy", loadChildren: "app/lazy/lazy.module#LazyModule" }]),
-      RouterModule.forRoot([{ path: "lazy1", loadChildren: "./lazy/lazy.module#LazyModule" }])
+      RouterModule.forRoot([{ path: "lazy1", loadChildren: "./lazy/lazy.module#LazyModule" }]),
+      RouterModule.forRoot([{ path: "lazy2", loadChildren: "./too/lazy/lazy.module#LazyModule" }])
       `, '@angular/router'))
     .then(() => ng('build'))
-    .then(() => readdirSync('dist').length)
-    .then(currentNumberOfDistFiles => {
+    .then(() => readdirSync('dist'))
+    .then((distFiles) => {
+      const currentNumberOfDistFiles = distFiles.length;
       if (oldNumberOfFiles >= currentNumberOfDistFiles) {
         throw new Error('A bundle for the lazy module was not created.');
       }
       oldNumberOfFiles = currentNumberOfDistFiles;
+
+      if (!distFiles.includes('lazy.module.chunk.js')){
+        throw new Error('The bundle for the lazy module did not have a name.');
+      }
+      if (!distFiles.includes('lazy.module.0.chunk.js')){
+        throw new Error('The bundle for the lazy module did not use a unique name.');
+      }
     })
     // verify System.import still works
     .then(() => writeFile('src/app/lazy-file.ts', ''))

yarn.lock

@@ -4355,16 +4355,16 @@ right-align@^0.1.1:
   dependencies:
     align-text "^0.1.1"
 
-rimraf@2, rimraf@^2.2.8, rimraf@^2.5.1, rimraf@^2.6.1:
+rimraf@2, rimraf@^2.2.8, rimraf@~2.2.6:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
+
+rimraf@^2.5.1, rimraf@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
   dependencies:
     glob "^7.0.5"
 
-rimraf@~2.2.6:
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
-
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"