fix(@angular/cli): show only changed chunks on build

For projects with a lot of lazy modules the rebuild messages can easily fill the whole console window.

This PR shows only chunks that changed instead of showing all chunks.

Before:
```
$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-14T14:56:13.707Z
Hash: 7490b2942c48ffcf0f0f
Time: 7317ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 725 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered]

webpack: Compiled successfully.
webpack: Compiling...
Date: 2017-12-14T14:56:17.054Z
Hash: dbb03cc0994e8bf69e76
Time: 310ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry]
chunk {main} main.bundle.js (main) 725 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial]
chunk {styles} styles.bundle.js (styles) 35 kB [initial]
chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial]

webpack: Compiled successfully.
webpack: Compiling...
Date: 2017-12-14T14:56:20.290Z
Hash: fe53cbcd529dd2508cfc
Time: 267ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry]
chunk {main} main.bundle.js (main) 725 kB [initial]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 35 kB [initial]
chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial]

webpack: Compiled successfully.
```

After:
```
$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2017-12-14T14:53:40.216Z
Hash: 44065f5ec5c4c8cf884a
Time: 7312ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 724 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 576 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 35 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 6.45 MB [initial] [rendered]

webpack: Compiled successfully.
webpack: Compiling...
Date: 2017-12-14T14:53:42.089Z
Hash: 492a7350b12ec1557b61
Time: 241ms
chunk {main} main.bundle.js (main) 725 kB [initial] [rendered]
4 unchanged chunks

webpack: Compiled successfully.
webpack: Compiling...
Date: 2017-12-14T14:53:49.762Z
Hash: 7490b2942c48ffcf0f0f
Time: 296ms
chunk {polyfills} polyfills.bundle.js (polyfills) 577 kB [initial] [rendered]
4 unchanged chunks

webpack: Compiled successfully.
```

Fix #8621

packages/@angular/cli/utilities/stats.ts

@@ -26,11 +26,9 @@ export function statsToString(json: any, statsConfig: any) {
   const g = (x: string) => colors ? bold(green(x)) : x;
   const y = (x: string) => colors ? bold(yellow(x)) : x;
 
-  return rs(stripIndents`
-    Date: ${w(new Date().toISOString())}
-    Hash: ${w(json.hash)}
-    Time: ${w('' + json.time)}ms
-    ${json.chunks.map((chunk: any) => {
+  const changedChunksStats = json.chunks
+    .filter((chunk: any) => chunk.rendered)
+    .map((chunk: any) => {
       const asset = json.assets.filter((x: any) => x.name == chunk.files[0])[0];
       const size = asset ? ` ${_formatSize(asset.size)}` : '';
       const files = chunk.files.join(', ');
@@ -41,8 +39,24 @@ export function statsToString(json: any, statsConfig: any) {
         .join('');
 
       return `chunk {${y(chunk.id)}} ${g(files)}${names}${size} ${initial}${flags}`;
-    }).join('\n')}
-    `);
+    });
+
+  const unchangedChunkNumber = json.chunks.length - changedChunksStats.length;
+
+  if (unchangedChunkNumber > 0) {
+    return rs(stripIndents`
+      Date: ${w(new Date().toISOString())} • Hash: ${w(json.hash)} • Time: ${w('' + json.time)}ms
+      ${unchangedChunkNumber} unchanged chunks
+      ${changedChunksStats.join('\n')}
+      `);
+  } else {
+    return rs(stripIndents`
+      Date: ${w(new Date().toISOString())}
+      Hash: ${w(json.hash)}
+      Time: ${w('' + json.time)}ms
+      ${changedChunksStats.join('\n')}
+      `);
+  }
 }
 
 export function statsWarningsToString(json: any, statsConfig: any) {

tests/e2e/tests/basic/rebuild.ts

@@ -20,14 +20,9 @@ export default function() {
     return Promise.resolve();
   }
 
-  let oldNumberOfChunks = 0;
-  const chunkRegExp = /chunk\s+\{/g;
+  const lazyChunkRegExp = /lazy\.module\.chunk\.js/g;
 
   return execAndWaitForOutputToMatch('ng', ['serve'], validBundleRegEx)
-    // Count the bundles.
-    .then(({ stdout }) => {
-      oldNumberOfChunks = stdout.split(chunkRegExp).length;
-    })
     // Add a lazy module.
     .then(() => ng('generate', 'module', 'lazy', '--routing'))
     // Should trigger a rebuild with a new bundle.
@@ -65,8 +60,7 @@ export default function() {
     // Count the bundles.
     .then((results) => {
       const stdout = results[0].stdout;
-      let newNumberOfChunks = stdout.split(chunkRegExp).length;
-      if (oldNumberOfChunks >= newNumberOfChunks) {
+      if (!lazyChunkRegExp.test(stdout)) {
         throw new Error('Expected webpack to create a new chunk, but did not.');
       }
     })