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

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])));
 }