fix(@ngtools/webpack): emit lazy routes errors on rebuilds (#12418)

* fix(@ngtools/webpack): emit lazy routes errors on rebuilds

At the moment lazy route errors are only emitted in the initial builds because in following builds we are only processed lazy routes that are declared in the changed files.

At the moment, we cannot cache the previously resolved routes as there is no way to track in which file the lazy route was declared so that we can bust the lazy route if it was removed.

Closes #12236

* test: add test for compilation errors in watch mode

Closes #12311

Author: alan-agius4

packages/angular_devkit/build_angular/test/browser/lazy-module_spec_large.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { DefaultTimeout, runTargetSpec } from '@angular-devkit/architect/testing';
+import { DefaultTimeout, TestLogger, runTargetSpec } from '@angular-devkit/architect/testing';
 import { join, normalize } from '@angular-devkit/core';
-import { tap } from 'rxjs/operators';
+import { take, tap } from 'rxjs/operators';
 import { BrowserBuilderSchema } from '../../src';
 import { browserTargetSpec, host } from '../utils';
 
@@ -70,6 +70,7 @@ export const lazyModuleImport: { [path: string]: string } = {
   `,
 };
 
+// tslint:disable-next-line:no-big-function
 describe('Browser Builder lazy modules', () => {
 
   const outputPath = normalize('dist');
@@ -89,6 +90,50 @@ describe('Browser Builder lazy modules', () => {
     ).toPromise().then(done, done.fail);
   });
 
+  it('should show error when lazy route is invalid on watch mode AOT', (done) => {
+    host.writeMultipleFiles(lazyModuleFiles);
+    host.writeMultipleFiles(lazyModuleImport);
+    host.replaceInFile(
+      'src/app/app.module.ts',
+      'lazy.module#LazyModule',
+      'invalid.module#LazyModule',
+    );
+
+    const logger = new TestLogger('rebuild-lazy-errors');
+    const overrides = { watch: true, aot: true };
+    runTargetSpec(host, browserTargetSpec, overrides, DefaultTimeout, logger).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(false)),
+      tap(() => {
+        expect(logger.includes('Could not resolve module')).toBe(true);
+        logger.clear();
+        host.appendToFile('src/main.ts', ' ');
+      }),
+      take(2),
+    ).toPromise().then(done, done.fail);
+  });
+
+  it('should show error when lazy route is invalid on watch mode JIT', (done) => {
+    host.writeMultipleFiles(lazyModuleFiles);
+    host.writeMultipleFiles(lazyModuleImport);
+    host.replaceInFile(
+      'src/app/app.module.ts',
+      'lazy.module#LazyModule',
+      'invalid.module#LazyModule',
+    );
+
+    const logger = new TestLogger('rebuild-lazy-errors');
+    const overrides = { watch: true, aot: false };
+    runTargetSpec(host, browserTargetSpec, overrides, DefaultTimeout, logger).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(false)),
+      tap(() => {
+        expect(logger.includes('Could not resolve module')).toBe(true);
+        logger.clear();
+        host.appendToFile('src/main.ts', ' ');
+      }),
+      take(2),
+    ).toPromise().then(done, done.fail);
+  });
+
   it('supports lazy bundle for lazy routes with AOT', (done) => {
     host.writeMultipleFiles(lazyModuleFiles);
     host.writeMultipleFiles(lazyModuleImport);

packages/angular_devkit/build_angular/test/browser/rebuild_spec_large.ts

@@ -198,6 +198,33 @@ describe('Browser Builder rebuilds', () => {
     ).toPromise().then(done, done.fail);
   });
 
+  it('rebuilds shows error', (done) => {
+    host.replaceInFile('./src/app/app.component.ts', 'AppComponent', 'AppComponentZ');
+
+    const overrides = { watch: true, aot: false };
+    let buildCount = 1;
+    const logger = new TestLogger('rebuild-errors');
+
+    runTargetSpec(host, browserTargetSpec, overrides, DefaultTimeout * 3, logger).pipe(
+      tap((buildEvent) => {
+        switch (buildCount) {
+          case 1:
+            expect(buildEvent.success).toBe(false);
+            expect(logger.includes('AppComponent cannot be used as an entry component')).toBe(true);
+            logger.clear();
+
+            host.replaceInFile('./src/app/app.component.ts', 'AppComponentZ', 'AppComponent');
+            break;
+
+          default:
+            expect(buildEvent.success).toBe(true);
+            break;
+        }
+        buildCount ++;
+      }),
+      take(2),
+    ).toPromise().then(done, done.fail);
+  });
 
   it('rebuilds after errors in AOT', (done) => {
     // Save the original contents of `./src/app/app.component.ts`.

packages/ngtools/webpack/src/angular_compiler_plugin.ts

@@ -40,10 +40,10 @@ import { time, timeEnd } from './benchmark';
 import { WebpackCompilerHost, workaroundResolve } from './compiler_host';
 import { resolveEntryModuleFromMain } from './entry_resolver';
 import { gatherDiagnostics, hasErrors } from './gather_diagnostics';
-import { LazyRouteMap, findLazyRoutes } from './lazy_routes';
 import { TypeScriptPathsPlugin } from './paths-plugin';
 import { WebpackResourceLoader } from './resource_loader';
 import {
+  LazyRouteMap,
   exportLazyModuleMap,
   exportNgFactory,
   findResources,
@@ -418,22 +418,6 @@ export class AngularCompilerPlugin {
     }
   }
 
-  private _findLazyRoutesInAst(changedFilePaths: string[]): LazyRouteMap {
-    time('AngularCompilerPlugin._findLazyRoutesInAst');
-    const result: LazyRouteMap = Object.create(null);
-    for (const filePath of changedFilePaths) {
-      const fileLazyRoutes = findLazyRoutes(filePath, this._compilerHost, undefined,
-        this._compilerOptions);
-      for (const routeKey of Object.keys(fileLazyRoutes)) {
-        const route = fileLazyRoutes[routeKey];
-        result[routeKey] = route;
-      }
-    }
-    timeEnd('AngularCompilerPlugin._findLazyRoutesInAst');
-
-    return result;
-  }
-
   private _listLazyRoutesFromProgram(): LazyRouteMap {
     let lazyRoutes: LazyRoute[];
     if (this._JitMode) {
@@ -876,17 +860,12 @@ export class AngularCompilerPlugin {
     // We need to run the `listLazyRoutes` the first time because it also navigates libraries
     // and other things that we might miss using the (faster) findLazyRoutesInAst.
     // Lazy routes modules will be read with compilerHost and added to the changed files.
-    if (this._firstRun || !this._JitMode) {
-      this._processLazyRoutes(this._listLazyRoutesFromProgram());
-    } else {
-      const changedTsFiles = this._getChangedTsFiles();
-      if (changedTsFiles.length > 0) {
-        this._processLazyRoutes(this._findLazyRoutesInAst(changedTsFiles));
-      }
-    }
-    if (this._options.additionalLazyModules) {
-      this._processLazyRoutes(this._options.additionalLazyModules);
-    }
+    const lazyRouteMap: LazyRouteMap = {
+      ... (this._entryModule || !this._JitMode ? this._listLazyRoutesFromProgram() : {}),
+      ...this._options.additionalLazyModules,
+    };
+
+    this._processLazyRoutes(lazyRouteMap);
 
     // Emit and report errors.
 

packages/ngtools/webpack/src/lazy_routes.ts

@@ -7,11 +7,14 @@
  */
 import * as path from 'path';
 import * as ts from 'typescript';
-import { LazyRouteMap } from '../lazy_routes';
 import { getFirstNode, getLastNode } from './ast_helpers';
 import { AddNodeOperation, StandardTransform, TransformOperation } from './interfaces';
 import { makeTransform } from './make_transform';
 
+export interface LazyRouteMap {
+  [path: string]: string;
+}
+
 export function exportLazyModuleMap(
   shouldTransform: (fileName: string) => boolean,
   lazyRoutesCb: () => LazyRouteMap,