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

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, ts.ScriptTarget.Latest);
+ 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();
+ }
+}