feat(@angular/cli): make the common chunk optional

- Add a "--no-common-chunk" build option for disabling the common async chunk.
- The existing behavior is maintained by default.

closes #7021

Author: kevinbuhmann

docs/documentation/build.md

@@ -293,6 +293,16 @@ Note: service worker support is experimental and subject to change.
   </p>
 </details>
 
+<details>
+  <summary>common-chunk</summary>
+  <p>
+    <code>--common-chunk</code> (aliases: <code>-cc</code>) <em>default value: true</em>
+  </p>
+  <p>
+    Use a separate bundle containing code used across multiple bundles.
+  </p>
+</details>
+
 <details>
   <summary>verbose</summary>
   <p>

docs/documentation/eject.md

@@ -182,6 +182,16 @@ ng eject
   </p>
 </details>
 
+<details>
+  <summary>common-chunk</summary>
+  <p>
+    <code>--common-chunk</code> (aliases: <code>-cc</code>) <em>default value: true</em>
+  </p>
+  <p>
+    Use a separate bundle containing code used across multiple bundles.
+  </p>
+</details>
+
 <details>
   <summary>verbose</summary>
   <p>

docs/documentation/serve.md

@@ -258,6 +258,16 @@ All the build Options are available in serve, below are the additional options.
   </p>
 </details>
 
+<details>
+  <summary>common-chunk</summary>
+  <p>
+    <code>--common-chunk</code> (aliases: <code>-cc</code>) <em>default value: true</em>
+  </p>
+  <p>
+    Use a separate bundle containing code used across multiple bundles.
+  </p>
+</details>
+
 <details>
   <summary>verbose</summary>
   <p>

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', 'commonChunk'
 ]);
 
 // defaults for BuildOptions
@@ -52,6 +52,14 @@ export const baseBuildCommandOptions: any = [
     aliases: ['vc'],
     description: 'Use a separate bundle containing only vendor libraries.'
   },
+  {
+    name: 'common-chunk',
+    type: Boolean,
+    default: buildConfigDefaults['common-chunk'] === undefined ?
+      true : buildConfigDefaults['common-chunk'],
+    aliases: ['cc'],
+    description: 'Use a separate bundle containing code used across multiple bundles.'
+  },
   {
     name: 'base-href',
     type: String,

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

@@ -481,6 +481,11 @@
               "description": "Show circular dependency warnings on builds.",
               "type": "boolean",
               "default": true
+            },
+            "commonChunk": {
+              "description": "Use a separate bundle containing code used across multiple bundles.",
+              "type": "boolean",
+              "default": true
             }
           }
         },

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

@@ -5,6 +5,7 @@ export interface BuildOptions {
   aot?: boolean;
   sourcemaps?: boolean;
   vendorChunk?: boolean;
+  commonChunk?: boolean;
   baseHref?: string;
   deployUrl?: string;
   verbose?: boolean;

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

@@ -51,6 +51,15 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
     }));
   }
 
+  if (buildOptions.commonChunk) {
+    extraPlugins.push(new webpack.optimize.CommonsChunkPlugin({
+      name: 'main',
+      async: 'common',
+      children: true,
+      minChunks: 2
+    }));
+  }
+
   return {
     plugins: [
       new HtmlWebpackPlugin({
@@ -68,12 +77,6 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
       new BaseHrefWebpackPlugin({
         baseHref: buildOptions.baseHref
       }),
-      new webpack.optimize.CommonsChunkPlugin({
-        name: 'main',
-        async: 'common',
-        children: true,
-        minChunks: 2
-      }),
       new webpack.optimize.CommonsChunkPlugin({
         minChunks: Infinity,
         name: 'inline'

tests/e2e/tests/misc/common-async.ts

@@ -3,7 +3,8 @@ import {oneLine} from 'common-tags';
 
 import {ng, npm} from '../../utils/process';
 import {addImportToModule} from '../../utils/ast';
-import {appendToFile} from '../../utils/fs';
+import {appendToFile, expectFileToExist} from '../../utils/fs';
+import {expectToFail} from '../../utils/utils';
 
 
 export default function() {
@@ -42,13 +43,24 @@ export default function() {
       console.log(moment);
     `))
     .then(() => ng('build'))
+    .then(() => expectFileToExist('dist/common.chunk.js'))
     .then(() => readdirSync('dist').length)
     .then(currentNumberOfDistFiles => {
       if (oldNumberOfFiles >= currentNumberOfDistFiles) {
-        throw new Error('A bundle for the common async module was not created.');
+        throw new Error(oneLine`The build contains the wrong number of files.
+          The test for 'dist/common.chunk.js' to exist should have failed.`);
       }
       oldNumberOfFiles = currentNumberOfDistFiles;
     })
+    .then(() => ng('build', '--no-common-chunk'))
+    .then(() => expectToFail(() => expectFileToExist('dist/common.chunk.js')))
+    .then(() => readdirSync('dist').length)
+    .then(currentNumberOfDistFiles => {
+      if (oldNumberOfFiles <= currentNumberOfDistFiles) {
+        throw new Error(oneLine`The build contains the wrong number of files.
+          The test for 'dist/common.chunk.js' not to exist should have failed.`);
+      }
+    })
     // Check for AoT and lazy routes.
     .then(() => ng('build', '--aot'))
     .then(() => readdirSync('dist').length)