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/angular_compiler_plugin.ts

@@ -43,6 +43,7 @@ import {
   formatDiagnostics,
   EmitFlags,
 } from './ngtools_api';
+import { findAstNodes } from './transformers/ast_helpers';
 
 
 /**
@@ -85,6 +86,7 @@ export class AngularCompilerPlugin implements Tapable {
   private _tsFilenames: string[];
   private _program: ts.Program | Program;
   private _compilerHost: WebpackCompilerHost;
+  private _moduleResolutionCache: ts.ModuleResolutionCache;
   private _angularCompilerHost: WebpackCompilerHost & CompilerHost;
   private _resourceLoader: WebpackResourceLoader;
   // Contains `moduleImportPath#exportName` => `fullModulePath`.
@@ -296,6 +298,9 @@ export class AngularCompilerPlugin implements Tapable {
       }
     }
 
+    // Use an identity function as all our paths are absolute already.
+    this._moduleResolutionCache = ts.createModuleResolutionCache(this._basePath, x => x);
+
     // Set platform.
     this._platform = options.platform || PLATFORM.Browser;
     timeEnd('AngularCompilerPlugin._setupOptions');
@@ -775,6 +780,26 @@ export class AngularCompilerPlugin implements Tapable {
     };
   }
 
+  getDependencies(fileName: string): string[] {
+    const sourceFile = this._compilerHost.getSourceFile(fileName);
+    const options = this._compilerOptions;
+    const host = this._compilerHost;
+    const cache = this._moduleResolutionCache;
+
+    return findAstNodes<ts.ImportDeclaration>(null, sourceFile, ts.SyntaxKind.ImportDeclaration)
+      .map(decl => {
+        const moduleName = (decl.moduleSpecifier as ts.StringLiteral).text;
+        const resolved = ts.resolveModuleName(moduleName, fileName, options, host, cache);
+
+        if (resolved.resolvedModule) {
+          return resolved.resolvedModule.resolvedFileName;
+        } else {
+          return null;
+        }
+      })
+      .filter(x => x);
+  }
+
   // This code mostly comes from `performCompilation` in `@angular/compiler-cli`.
   // It skips the program creation because we need to use `loadNgStructureAsync()`,
   // and uses CustomTransformers.

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
@@ -546,6 +568,7 @@ export function ngcLoader(this: LoaderContext & { _compilation: any }, source: s
         .then(() => {
           timeEnd(timeLabel + '.ngcLoader.AngularCompilerPlugin');
           const result = plugin.getFile(sourceFileName);
+          const dependencies = plugin.getDependencies(sourceFileName);
 
           if (result.sourceMap) {
             // Process sourcemaps for Webpack.
@@ -561,6 +584,8 @@ export function ngcLoader(this: LoaderContext & { _compilation: any }, source: s
           if (result.outputText === undefined) {
             throw new Error('TypeScript compilation failed.');
           }
+
+          dependencies.forEach(dep => this.addDependency(dep));
           cb(null, result.outputText, result.sourceMap);
         })
         .catch(err => {
@@ -577,6 +602,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 +646,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 +675,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();
+  }
+}