fix(@ngtools/webpack): analyze the typescript file for additional dependencies

By default, Webpack only add dependencies it can see. Types or imports that are not
kept in transpilations are removed, and webpack dont see them. By reading the AST
directly we manually add the dependencies to webpack.

Fixes #7995.

Author: hansl

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

@@ -431,6 +431,28 @@ function _getResourcesUrls(refactor: TypeScriptFileRefactor): string[] {
 }
 
 
+function _getImports(refactor: TypeScriptFileRefactor,
+                     compilerOptions: ts.CompilerOptions,
+                     host: ts.ModuleResolutionHost,
+                     cache: ts.ModuleResolutionCache): string[] {
+  const containingFile = refactor.fileName;
+
+  return refactor.findAstNodes(null, ts.SyntaxKind.ImportDeclaration, false)
+    .map((clause: ts.ImportDeclaration) => {
+      const moduleName = (clause.moduleSpecifier as ts.StringLiteral).text;
+      const resolved = ts.resolveModuleName(
+        moduleName, containingFile, compilerOptions, host, cache);
+
+      if (resolved.resolvedModule) {
+        return resolved.resolvedModule.resolvedFileName;
+      } else {
+        return null;
+      }
+    })
+    .filter(x => x);
+}
+
+
 /**
  * Recursively calls diagnose on the plugins for all the reverse dependencies.
  * @private
@@ -577,6 +599,12 @@ export function ngcLoader(this: LoaderContext & { _compilation: any }, source: s
       const refactor = new TypeScriptFileRefactor(
         sourceFileName, plugin.compilerHost, plugin.program, source);
 
+      // Force a few compiler options to make sure we get the result we want.
+      const compilerOptions: ts.CompilerOptions = Object.assign({}, plugin.compilerOptions, {
+        inlineSources: true,
+        inlineSourceMap: false,
+        sourceRoot: plugin.basePath
+      });
 
       Promise.resolve()
         .then(() => {
@@ -615,6 +643,8 @@ export function ngcLoader(this: LoaderContext & { _compilation: any }, source: s
           _getResourcesUrls(refactor).forEach((url: string) => {
             this.addDependency(path.resolve(path.dirname(sourceFileName), url));
           });
+          _getImports(refactor, compilerOptions, plugin.compilerHost, plugin.moduleResolutionCache)
+            .forEach((importString: string) => this.addDependency(importString));
           timeEnd(timeLabel + '.ngcLoader.AotPlugin.addDependency');
         })
         .then(() => {
@@ -642,13 +672,6 @@ export function ngcLoader(this: LoaderContext & { _compilation: any }, source: s
             timeEnd(timeLabel + '.ngcLoader.AotPlugin.getDiagnostics');
           }
 
-          // Force a few compiler options to make sure we get the result we want.
-          const compilerOptions: ts.CompilerOptions = Object.assign({}, plugin.compilerOptions, {
-            inlineSources: true,
-            inlineSourceMap: false,
-            sourceRoot: plugin.basePath
-          });
-
           time(timeLabel + '.ngcLoader.AotPlugin.transpile');
           const result = refactor.transpile(compilerOptions);
           timeEnd(timeLabel + '.ngcLoader.AotPlugin.transpile');

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

@@ -51,6 +51,7 @@ export class AotPlugin implements Tapable {
   private _compilerOptions: ts.CompilerOptions;
   private _angularCompilerOptions: any;
   private _program: ts.Program;
+  private _moduleResolutionCache: ts.ModuleResolutionCache;
   private _rootFilePath: string[];
   private _compilerHost: WebpackCompilerHost;
   private _resourceLoader: WebpackResourceLoader;
@@ -97,6 +98,7 @@ export class AotPlugin implements Tapable {
   }
   get genDir() { return this._genDir; }
   get program() { return this._program; }
+  get moduleResolutionCache() { return this._moduleResolutionCache; }
   get skipCodeGeneration() { return this._skipCodeGeneration; }
   get replaceExport() { return this._replaceExport; }
   get typeCheck() { return this._typeCheck; }
@@ -250,6 +252,12 @@ export class AotPlugin implements Tapable {
     this._program = ts.createProgram(
       this._rootFilePath, this._compilerOptions, this._compilerHost);
 
+    // We use absolute paths everywhere.
+    this._moduleResolutionCache = ts.createModuleResolutionCache(
+      this._basePath,
+      (fileName: string) => this._compilerHost.resolve(fileName),
+    );
+
     // We enable caching of the filesystem in compilerHost _after_ the program has been created,
     // because we don't want SourceFile instances to be cached past this point.
     this._compilerHost.enableCaching();

tests/e2e/tests/build/rebuild-types.ts

@@ -0,0 +1,34 @@
+import {
+  killAllProcesses,
+  waitForAnyProcessOutputToMatch,
+  execAndWaitForOutputToMatch,
+} from '../../utils/process';
+import { writeFile, prependToFile } from '../../utils/fs';
+import {getGlobalVariable} from '../../utils/env';
+
+
+const successRe = /webpack: Compiled successfully/;
+
+export default async function() {
+  if (process.platform.startsWith('win')) {
+    return;
+  }
+  // Skip this in ejected tests.
+  if (getGlobalVariable('argv').eject) {
+    return;
+  }
+
+  await writeFile('src/app/type.ts', `export type MyType = number;`);
+  await prependToFile('src/app/app.component.ts', 'import { MyType } from "./type";\n');
+
+  try {
+    await execAndWaitForOutputToMatch('ng', ['serve'], successRe);
+
+    await Promise.all([
+      waitForAnyProcessOutputToMatch(successRe, 20000),
+      writeFile('src/app/type.ts', `export type MyType = string;`),
+    ]);
+  } finally {
+    killAllProcesses();
+  }
+}