fix(@ngtools/webpack): invalidate all the files changed (angular#4542)

Webpack only passes the first file that was changed. If there are multiple,
we need to validate all of them. For that we result to listening to Watchpack
directly.

Author: hansl

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

@@ -237,12 +237,14 @@ export class AotPlugin implements Tapable {
   apply(compiler: any) {
     this._compiler = compiler;
 
-    compiler.plugin('invalid', (fileName: string) => {
+    compiler.plugin('invalid', () => {
       // Turn this off as soon as a file becomes invalid and we're about to start a rebuild.
       this._firstRun = false;
       this._diagnoseFiles = {};
 
-      this._compilerHost.invalidate(fileName);
+      compiler.watchFileSystem.watcher.once('aggregated', (changes: string[]) => {
+        changes.forEach((fileName: string) => this._compilerHost.invalidate(fileName));
+      });
     });
 
     // Add lazy modules to the context module for @angular/core/src/linker

tests/e2e/tests/build/rebuild.ts

@@ -5,8 +5,9 @@ import {
   silentExecAndWaitForOutputToMatch,
   ng,
 } from '../../utils/process';
-import {writeFile} from '../../utils/fs';
+import {writeFile, writeMultipleFiles, appendToFile, expectFileToMatch} from '../../utils/fs';
 import {wait} from '../../utils/utils';
+import {request} from '../../utils/http';
 
 
 export default function() {
@@ -69,6 +70,33 @@ export default function() {
         throw new Error('Expected webpack to create a new chunk, but did not.');
       }
     })
+    .then(() => wait(1000))
+    // Change multiple files and check that all of them are invalidated and recompiled.
+    .then(() => writeMultipleFiles({
+      'src/app/app.module.ts': `
+        console.log('$$_E2E_GOLDEN_VALUE_1');
+        export let X = '$$_E2E_GOLDEN_VALUE_2';
+      `,
+      'src/main.ts': `
+        import * as m from './app/app.module';
+        console.log(m.X);
+        console.log('$$_E2E_GOLDEN_VALUE_3');
+      `
+    }))
+    .then(() => waitForAnyProcessOutputToMatch(
+      /webpack: bundle is now VALID|webpack: Compiled successfully./, 10000))
+    .then(() => request('http://localhost:4200/main.bundle.js'))
+    .then((body) => {
+      if (!body.match(/\$\$_E2E_GOLDEN_VALUE_1/)) {
+        throw new Error('Expected golden value 1.');
+      }
+      if (!body.match(/\$\$_E2E_GOLDEN_VALUE_2/)) {
+        throw new Error('Expected golden value 2.');
+      }
+      if (!body.match(/\$\$_E2E_GOLDEN_VALUE_3/)) {
+        throw new Error('Expected golden value 3.');
+      }
+    })
     .then(() => killAllProcesses(), (err: any) => {
       killAllProcesses();
       throw err;

tests/e2e/utils/fs.ts

@@ -82,11 +82,8 @@ export function copyFile(from: string, to: string) {
 }
 
 
-export function writeMultipleFiles(fs: any) {
-  return Object.keys(fs)
-    .reduce((previous, curr) => {
-      return previous.then(() => writeFile(curr, fs[curr]));
-    }, Promise.resolve());
+export function writeMultipleFiles(fs: { [path: string]: string }) {
+  return Promise.all(Object.keys(fs).map(fileName => writeFile(fileName, fs[fileName])));
 }