feat(@angular/cli): allow chunk names for imports

Followup to angular#6881

Also name chunks created via `import()` or `System.import()`, and strip `.ngfactory` from the chunk name.

Author: filipesilva

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

@@ -1,5 +1,8 @@
 import * as webpack from 'webpack';
-
+import { basename } from 'path';
+const AsyncDependenciesBlock = require('webpack/lib/AsyncDependenciesBlock');
+const ContextElementDependency = require('webpack/lib/dependencies/ContextElementDependency');
+const ImportDependency = require('webpack/lib/dependencies/ImportDependency');
 
 // This just extends webpack.NamedChunksPlugin to prevent name collisions.
 export class NamedLazyChunksWebpackPlugin extends webpack.NamedChunksPlugin {
@@ -22,15 +25,22 @@ export class NamedLazyChunksWebpackPlugin extends webpack.NamedChunksPlugin {
         return chunk.name;
       }
 
-      // Try to figure out if it's a lazy loaded route.
+      // Try to figure out if it's a lazy loaded route or import().
       if (chunk.blocks
-        && chunk.blocks.length > 0
-        && chunk.blocks[0].dependencies
-        && chunk.blocks[0].dependencies.length > 0
-        && chunk.blocks[0].dependencies[0].lazyRouteChunkName
+        && chunk.blocks.length === 1
+        && chunk.blocks[0] instanceof AsyncDependenciesBlock
+        && chunk.blocks[0].dependencies.length === 1
+        && (chunk.blocks[0].dependencies[0] instanceof ContextElementDependency
+          || chunk.blocks[0].dependencies[0] instanceof ImportDependency)
       ) {
-        // lazyRouteChunkName was added by @ngtools/webpack.
-        return getUniqueName(chunk.blocks[0].dependencies[0].lazyRouteChunkName);
+        // Create chunkname from file request, stripping ngfactory and extension.
+        const req = chunk.blocks[0].dependencies[0].request;
+        const chunkName = basename(req).replace(/(\.ngfactory)?\.(js|ts)$/, '');
+        if (!chunkName || chunkName === '') {
+          // Bail out if something went wrong with the name.
+          return null;
+        }
+        return getUniqueName(chunkName);
       }
 
       return null;

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

@@ -310,11 +310,7 @@ export class AotPlugin implements Tapable {
               .map((key) => {
                 const value = this._lazyRoutes[key];
                 if (value !== null) {
-                  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;
+                  return new ContextElementDependency(value, key);
                 } else {
                   return null;
                 }

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

@@ -28,10 +28,10 @@ export default function() {
       oldNumberOfFiles = currentNumberOfDistFiles;
 
       if (!distFiles.includes('lazy.module.chunk.js')){
-        throw new Error('The bundle for the lazy module did not have a name.');
+        throw new Error('The chunk 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.');
+        throw new Error('The chunk for the lazy module did not use a unique name.');
       }
     })
     // verify System.import still works
@@ -43,11 +43,15 @@ export default function() {
       System.import('./lazy-' + lazyFile);
     `))
     .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 file was not created.');
       }
+      if (!distFiles.includes('lazy-file.chunk.js')) {
+        throw new Error('The chunk for the lazy file did not have a name.');
+      }
       oldNumberOfFiles = currentNumberOfDistFiles;
     })
     // verify 'import *' syntax doesn't break lazy modules