feat(@angular/cli): add flag to control chunk naming

Followup to angular#6881

Allow controlling chunk naming via the `--named-chunks` flag, which can be set on `.angular-cli.json` as well.

Defaults to true in development, false in production.

Author: filipesilva

docs/documentation/angular-cli.md

@@ -77,6 +77,15 @@
   - *service*: Options for generating a service.
     - *flat* (`boolean`): Flag to indicate if a dir is created. Default is `true`.
     - *spec* (`boolean`): Specifies if a spec file is generated. Default is `true`.
+  - *build*: Properties to be passed to the build command.
+    - *sourcemaps* (`boolean`): Output sourcemaps.
+    - *baseHref* (`string`): Base url for the application being built.
+    - *progress* (`boolean`): Log progress to the console while building. Default is `true`.
+    - *poll* (`number`): Enable and define the file watching poll time period (milliseconds).
+    - *deleteOutputPath* (`boolean`): Delete output path before build. Default is `true`.
+    - *preserveSymlinks* (`boolean`): Do not use the real path when resolving modules. Default is `false`.
+    - *showCircularDependencies* (`boolean`): Show circular dependency warnings on builds. Default is `true`.
+    - *namedChunks* (`boolean`): Use file name for lazy loaded chunks.
   - *serve*: Properties to be passed to the serve command
     - *port* (`number`): The port the application will be served on. Default is `4200`.
     - *host* (`string`): The host the application will be served on. Default is `localhost`.

docs/documentation/build.md

@@ -322,3 +322,13 @@ Note: service worker support is experimental and subject to change.
     Show circular dependency warnings on builds.
   </p>
 </details>
+
+<details>
+  <summary>named-chunks</summary>
+  <p>
+    <code>--named-chunks</code> (aliases: <code>-scd</code>)
+  </p>
+  <p>
+    Use file name for lazy loaded chunks.
+  </p>
+</details>

packages/@angular/cli/commands/build.ts

@@ -9,7 +9,7 @@ const Command = require('../ember-cli/lib/models/command');
 const config = CliConfig.fromProject() || CliConfig.fromGlobal();
 const buildConfigDefaults = config.getPaths('defaults.build', [
   'sourcemaps', 'baseHref', 'progress', 'poll', 'deleteOutputPath', 'preserveSymlinks',
-  'showCircularDependencies'
+  'showCircularDependencies', 'namedChunks'
 ]);
 
 // defaults for BuildOptions
@@ -151,6 +151,13 @@ export const baseBuildCommandOptions: any = [
     aliases: ['scd'],
     description: 'Show circular dependency warnings on builds.',
     default: buildConfigDefaults['showCircularDependencies']
+  },
+  {
+    name: 'named-chunks',
+    type: Boolean,
+    aliases: ['nc'],
+    description: 'Use file name for lazy loaded chunks.',
+    default: buildConfigDefaults['namedChunks']
   }
 ];
 

packages/@angular/cli/lib/config/schema.json

@@ -481,6 +481,10 @@
               "description": "Show circular dependency warnings on builds.",
               "type": "boolean",
               "default": true
+            },
+            "namedChunks": {
+              "description": "Use file name for lazy loaded chunks.",
+              "type": "boolean"
             }
           }
         },

packages/@angular/cli/models/build-options.ts

@@ -21,4 +21,5 @@ export interface BuildOptions {
   preserveSymlinks?: boolean;
   extractLicenses?: boolean;
   showCircularDependencies?: boolean;
+  namedChunks?: boolean;
 }

packages/@angular/cli/models/webpack-config.ts

@@ -79,13 +79,16 @@ export class NgCliWebpackConfig {
         environment: 'dev',
         outputHashing: 'media',
         sourcemaps: true,
-        extractCss: false
+        extractCss: false,
+        namedChunks: true,
+        aot: false
       },
       production: {
         environment: 'prod',
         outputHashing: 'all',
         sourcemaps: false,
         extractCss: true,
+        namedChunks: false,
         aot: true
       }
     };

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

@@ -71,6 +71,10 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     }));
   }
 
+  if (buildOptions.namedChunks) {
+    extraPlugins.push(new NamedLazyChunksWebpackPlugin());
+  }
+
   return {
     resolve: {
       extensions: ['.ts', '.js'],
@@ -101,8 +105,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
       ].concat(extraRules)
     },
     plugins: [
-      new webpack.NoEmitOnErrorsPlugin(),
-      new NamedLazyChunksWebpackPlugin(),
+      new webpack.NoEmitOnErrorsPlugin()
     ].concat(extraPlugins),
     node: {
       fs: 'empty',

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

@@ -18,7 +18,7 @@ export default function() {
       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(() => ng('build', '--named-chunks'))
     .then(() => readdirSync('dist'))
     .then((distFiles) => {
       const currentNumberOfDistFiles = distFiles.length;
@@ -28,10 +28,10 @@ export default function() {
       oldNumberOfFiles = currentNumberOfDistFiles;
 
       if (!distFiles.includes('lazy.module.chunk.js')){
-        throw new Error('The chunk for the lazy module did not have a name.');
+        throw new Error('The lazy module chunk did not have a name.');
       }
       if (!distFiles.includes('lazy.module.0.chunk.js')){
-        throw new Error('The chunk for the lazy module did not use a unique name.');
+        throw new Error('The lazy module chunk did not use a unique name.');
       }
     })
     // verify System.import still works
@@ -42,15 +42,15 @@ export default function() {
       const lazyFile = 'file';
       System.import('./lazy-' + lazyFile);
     `))
-    .then(() => ng('build'))
+    .then(() => ng('build', '--named-chunks'))
     .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.');
+        throw new Error('The lazy file chunk did not have a name.');
       }
       oldNumberOfFiles = currentNumberOfDistFiles;
     })
@@ -67,6 +67,16 @@ export default function() {
         throw new Error('Bundles were not created after adding \'import *\'.');
       }
     })
+    .then(() => ng('build', '--no-named-chunks'))
+    .then(() => readdirSync('dist'))
+    .then((distFiles) => {
+      if (distFiles.includes('lazy.module.chunk.js')
+        || distFiles.includes('lazy.module.0.chunk.js')
+        || distFiles.includes('lazy-file.chunk.js')
+      ) {
+        throw new Error('Lazy chunks shouldn\'t have a name but did.');
+      }
+    })
     // Check for AoT and lazy routes.
     .then(() => ng('build', '--aot'))
     .then(() => readdirSync('dist').length)