fix(@ngtools/webpack): correctly determine root files

Fix angular#8228

Author: filipesilva

packages/@angular/cli/models/webpack-configs/typescript.ts

@@ -92,9 +92,6 @@ function _createAotPlugin(wco: WebpackConfigOptions, options: any) {
       missingTranslation: buildOptions.missingTranslation,
       hostReplacementPaths,
       sourceMap: buildOptions.sourcemaps,
-      // If we don't explicitely list excludes, it will default to `['**/*.spec.ts']`.
-      exclude: [],
-      include: options.include,
     }, options);
     return new AngularCompilerPlugin(pluginOptions);
   } else {

packages/@ngtools/webpack/README.md

@@ -66,7 +66,7 @@ The loader works with webpack plugin to compile your TypeScript. It's important
 * `mainPath`. Optional if `entryModule` is specified. The `main.ts` file containing the bootstrap code. The plugin will use AST to determine the `entryModule`.
 * `skipCodeGeneration`. Optional, defaults to false. Disable code generation and do not refactor the code to bootstrap. This replaces `templateUrl: "string"` with `template: require("string")` (and similar for styles) to allow for webpack to properly link the resources. Only available in `AotPlugin`.
 * `typeChecking`. Optional, defaults to true. Enable type checking through your application. This will slow down compilation, but show syntactic and semantic errors in webpack. Only available in `AotPlugin`.
-* `exclude`. Optional. Extra files to exclude from TypeScript compilation.
+* `exclude`. Optional. Extra files to exclude from TypeScript compilation. Not supported with `AngularCompilerPlugin`.
 * `sourceMap`. Optional. Include sourcemaps.
 * `compilerOptions`. Optional. Override options in `tsconfig.json`.
 

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

@@ -47,6 +47,7 @@ import {
   createProgram,
   createCompilerHost,
   formatDiagnostics,
+  readConfiguration,
 } from './ngtools_api';
 import { findAstNodes } from './transformers/ast_helpers';
 
@@ -72,8 +73,6 @@ export interface AngularCompilerPluginOptions {
   platform?: PLATFORM;
 
   // Use tsconfig to include path globs.
-  exclude?: string | string[];
-  include?: string[];
   compilerOptions?: ts.CompilerOptions;
 }
 
@@ -86,13 +85,11 @@ export class AngularCompilerPlugin implements Tapable {
   private _options: AngularCompilerPluginOptions;
 
   // TS compilation.
-  private _compilerOptions: ts.CompilerOptions;
-  private _angularCompilerOptions: CompilerOptions;
-  private _tsFilenames: string[];
+  private _compilerOptions: CompilerOptions;
+  private _rootNames: string[];
   private _program: (ts.Program | Program);
-  private _compilerHost: WebpackCompilerHost;
+  private _compilerHost: WebpackCompilerHost & CompilerHost;
   private _moduleResolutionCache: ts.ModuleResolutionCache;
-  private _angularCompilerHost: WebpackCompilerHost & CompilerHost;
   private _resourceLoader: WebpackResourceLoader;
   // Contains `moduleImportPath#exportName` => `fullModulePath`.
   private _lazyRoutes: LazyRouteMap = Object.create(null);
@@ -186,39 +183,11 @@ export class AngularCompilerPlugin implements Tapable {
       );
     }
 
-    // Default exclude to **/*.spec.ts files.
-    if (!options.hasOwnProperty('exclude')) {
-      options['exclude'] = ['**/*.spec.ts'];
-    }
-
-    // Add custom excludes to default TypeScript excludes.
-    if (options.hasOwnProperty('exclude')) {
-      // If the tsconfig doesn't contain any excludes, we must add the default ones before adding
-      // any extra ones (otherwise we'd include all of these which can cause unexpected errors).
-      // This is the same logic as present in TypeScript.
-      if (!tsConfigJson.exclude) {
-        tsConfigJson['exclude'] = ['node_modules', 'bower_components', 'jspm_packages'];
-        if (tsConfigJson.compilerOptions && tsConfigJson.compilerOptions.outDir) {
-          tsConfigJson.exclude.push(tsConfigJson.compilerOptions.outDir);
-        }
-      }
-
-      // Join our custom excludes with the existing ones.
-      tsConfigJson.exclude = tsConfigJson.exclude.concat(options.exclude);
-    }
-
-    // Add extra includes.
-    if (options.hasOwnProperty('include') && Array.isArray(options.include)) {
-      tsConfigJson.include = tsConfigJson.include || [];
-      tsConfigJson.include.push(...options.include);
-    }
-
     // Parse the tsconfig contents.
-    const tsConfig = ts.parseJsonConfigFileContent(
-      tsConfigJson, ts.sys, basePath, undefined, this._tsConfigPath);
+    const config = readConfiguration(this._tsConfigPath, tsConfigJson.compilerOptions);
 
-    this._tsFilenames = tsConfig.fileNames;
-    this._compilerOptions = tsConfig.options;
+    this._rootNames = config.rootNames;
+    this._compilerOptions = config.options;
 
     // Overwrite outDir so we can find generated files next to their .ts origin in compilerHost.
     this._compilerOptions.outDir = '';
@@ -250,55 +219,54 @@ export class AngularCompilerPlugin implements Tapable {
     // to the webpack dependency tree and rebuilds triggered by file edits.
     this._compilerOptions.noEmitOnError = false;
 
-    // Compose Angular Compiler Options.
-    this._angularCompilerOptions = Object.assign(
-      this._compilerOptions,
-      tsConfig.raw['angularCompilerOptions'],
-      { basePath }
-    );
-
     // Set JIT (no code generation) or AOT mode.
     if (options.skipCodeGeneration !== undefined) {
       this._JitMode = options.skipCodeGeneration;
     }
 
     // Process i18n options.
     if (options.hasOwnProperty('i18nInFile')) {
-      this._angularCompilerOptions.i18nInFile = options.i18nInFile;
+      this._compilerOptions.i18nInFile = options.i18nInFile;
     }
     if (options.hasOwnProperty('i18nInFormat')) {
-      this._angularCompilerOptions.i18nInFormat = options.i18nInFormat;
+      this._compilerOptions.i18nInFormat = options.i18nInFormat;
     }
     if (options.hasOwnProperty('i18nOutFile')) {
-      this._angularCompilerOptions.i18nOutFile = options.i18nOutFile;
+      this._compilerOptions.i18nOutFile = options.i18nOutFile;
     }
     if (options.hasOwnProperty('i18nOutFormat')) {
-      this._angularCompilerOptions.i18nOutFormat = options.i18nOutFormat;
+      this._compilerOptions.i18nOutFormat = options.i18nOutFormat;
     }
     if (options.hasOwnProperty('locale') && options.locale) {
-      this._angularCompilerOptions.i18nInLocale = this._validateLocale(options.locale);
+      this._compilerOptions.i18nInLocale = this._validateLocale(options.locale);
     }
     if (options.hasOwnProperty('missingTranslation')) {
-      this._angularCompilerOptions.i18nInMissingTranslations =
+      this._compilerOptions.i18nInMissingTranslations =
         options.missingTranslation as 'error' | 'warning' | 'ignore';
     }
 
     // Use entryModule if available in options, otherwise resolve it from mainPath after program
     // creation.
     if (this._options.entryModule) {
       this._entryModule = this._options.entryModule;
-    } else if (this._angularCompilerOptions.entryModule) {
+    } else if (this._compilerOptions.entryModule) {
       this._entryModule = path.resolve(this._basePath,
-        this._angularCompilerOptions.entryModule);
+        this._compilerOptions.entryModule);
     }
 
     // Create the webpack compiler host.
-    this._compilerHost = new WebpackCompilerHost(this._compilerOptions, this._basePath);
-    this._compilerHost.enableCaching();
+    const webpackCompilerHost = new WebpackCompilerHost(this._compilerOptions, this._basePath);
+    webpackCompilerHost.enableCaching();
 
     // Create and set a new WebpackResourceLoader.
     this._resourceLoader = new WebpackResourceLoader();
-    this._compilerHost.setResourceLoader(this._resourceLoader);
+    webpackCompilerHost.setResourceLoader(this._resourceLoader);
+
+    // Use the WebpackCompilerHost with a resource loader to create an AngularCompilerHost.
+    this._compilerHost = createCompilerHost({
+      options: this._compilerOptions,
+      tsHost: webpackCompilerHost
+    }) as CompilerHost & WebpackCompilerHost;
 
     // Override some files in the FileSystem.
     if (this._options.hostOverrideFileSystem) {
@@ -342,28 +310,24 @@ export class AngularCompilerPlugin implements Tapable {
   private _createOrUpdateProgram() {
     return Promise.resolve()
       .then(() => {
-        const changedTsFiles = this._getChangedTsFiles();
+        // Get the root files from the ts config.
+        // When a new root name (like a lazy route) is added, it won't be available from
+        // following imports on the existing files, so we need to get the new list of root files.
+        this._rootNames = readConfiguration(this._tsConfigPath).rootNames;
 
-        changedTsFiles.forEach((file) => {
-          if (!this._tsFilenames.includes(file)) {
-            // TODO: figure out if action is needed for files that were removed from the
-            // compilation.
-            this._tsFilenames.push(file);
-          }
-        });
-
-        // Update the forked type checker.
+        // Update the forked type checker with all changed compilation files.
+        // This includes templates, that also need to be reloaded on the type checker.
         if (this._forkTypeChecker && !this._firstRun) {
-          this._updateForkedTypeChecker(changedTsFiles);
+          this._updateForkedTypeChecker(this._rootNames, this._getChangedCompilationFiles());
         }
 
         if (this._JitMode) {
           // Create the TypeScript program.
           time('AngularCompilerPlugin._createOrUpdateProgram.ts.createProgram');
           this._program = ts.createProgram(
-            this._tsFilenames,
-            this._angularCompilerOptions,
-            this._angularCompilerHost,
+            this._rootNames,
+            this._compilerOptions,
+            this._compilerHost,
             this._program as ts.Program
           );
           timeEnd('AngularCompilerPlugin._createOrUpdateProgram.ts.createProgram');
@@ -372,26 +336,19 @@ export class AngularCompilerPlugin implements Tapable {
         } else {
           time('AngularCompilerPlugin._createOrUpdateProgram.ng.createProgram');
           // Create the Angular program.
-          try {
-            this._program = createProgram({
-              rootNames: this._tsFilenames,
-              options: this._angularCompilerOptions,
-              host: this._angularCompilerHost,
-              oldProgram: this._program as Program
+          this._program = createProgram({
+            rootNames: this._rootNames,
+            options: this._compilerOptions,
+            host: this._compilerHost,
+            oldProgram: this._program as Program
+          });
+          timeEnd('AngularCompilerPlugin._createOrUpdateProgram.ng.createProgram');
+
+          time('AngularCompilerPlugin._createOrUpdateProgram.ng.loadNgStructureAsync');
+          return this._program.loadNgStructureAsync()
+            .then(() => {
+              timeEnd('AngularCompilerPlugin._createOrUpdateProgram.ng.loadNgStructureAsync');
             });
-            timeEnd('AngularCompilerPlugin._createOrUpdateProgram.ng.createProgram');
-
-            time('AngularCompilerPlugin._createOrUpdateProgram.ng.loadNgStructureAsync');
-            return this._program.loadNgStructureAsync()
-              .then(() => {
-                timeEnd('AngularCompilerPlugin._createOrUpdateProgram.ng.loadNgStructureAsync');
-              });
-          } catch (e) {
-            // TODO: remove this when the issue is addressed.
-            // Temporary workaround for https://github.com/angular/angular/issues/19951
-            this._program = undefined;
-            throw e;
-          }
         }
       })
       .then(() => {
@@ -412,7 +369,7 @@ export class AngularCompilerPlugin implements Tapable {
       const result = __NGTOOLS_PRIVATE_API_2.listLazyRoutes({
         program: this._getTsProgram(),
         host: this._compilerHost,
-        angularCompilerOptions: Object.assign({}, this._angularCompilerOptions, {
+        angularCompilerOptions: Object.assign({}, this._compilerOptions, {
           // genDir seems to still be needed in @angular\compiler-cli\src\compiler_host.js:226.
           genDir: ''
         }),
@@ -506,10 +463,8 @@ export class AngularCompilerPlugin implements Tapable {
             );
           }
         } else {
-          // Found a new route, add it to the map and read it into the compiler host.
+          // Found a new route, add it to the map.
           this._lazyRoutes[moduleKey] = modulePath;
-          this._angularCompilerHost.readFile(lazyRouteTSFile);
-          this._angularCompilerHost.invalidate(lazyRouteTSFile);
         }
       });
   }
@@ -545,7 +500,7 @@ export class AngularCompilerPlugin implements Tapable {
 
     this._typeCheckerProcess = fork(path.resolve(__dirname, typeCheckerFile), [], forkOptions);
     this._typeCheckerProcess.send(new InitMessage(this._compilerOptions, this._basePath,
-      this._JitMode, this._tsFilenames));
+      this._JitMode, this._rootNames));
 
     // Cleanup.
     const killTypeCheckerProcess = () => {
@@ -557,8 +512,8 @@ export class AngularCompilerPlugin implements Tapable {
     process.once('uncaughtException', killTypeCheckerProcess);
   }
 
-  private _updateForkedTypeChecker(changedTsFiles: string[]) {
-    this._typeCheckerProcess.send(new UpdateMessage(changedTsFiles));
+  private _updateForkedTypeChecker(rootNames: string[], changedCompilationFiles: string[]) {
+    this._typeCheckerProcess.send(new UpdateMessage(rootNames, changedCompilationFiles));
   }
 
 
@@ -682,22 +637,12 @@ export class AngularCompilerPlugin implements Tapable {
     // Update the resource loader with the new webpack compilation.
     this._resourceLoader.update(compilation);
 
+    // Create a new process for the type checker on the second build if there isn't one yet.
+    if (this._forkTypeChecker && !this._firstRun && !this._typeCheckerProcess) {
+      this._createForkedTypeChecker();
+    }
+
     this._donePromise = Promise.resolve()
-      .then(() => {
-        // Create a new process for the type checker.
-        if (this._forkTypeChecker && !this._firstRun && !this._typeCheckerProcess) {
-          this._createForkedTypeChecker();
-        }
-      })
-      .then(() => {
-        if (this._firstRun) {
-          // Use the WebpackResourceLoader with a resource loader to create an AngularCompilerHost.
-          this._angularCompilerHost = createCompilerHost({
-            options: this._angularCompilerOptions,
-            tsHost: this._compilerHost
-          }) as CompilerHost & WebpackCompilerHost;
-        }
-      })
       .then(() => this._update())
       .then(() => {
         timeEnd('AngularCompilerPlugin._make');
@@ -731,18 +676,14 @@ export class AngularCompilerPlugin implements Tapable {
         const changedTsFiles = this._getChangedTsFiles();
         if (this._ngCompilerSupportsNewApi) {
           this._processLazyRoutes(this._listLazyRoutesFromProgram());
-          // TODO: remove this when the issue is addressed.
-          // Fix for a bug in compiler where the program needs to be updated after
-          // _listLazyRoutesFromProgram is called.
-          return this._createOrUpdateProgram();
         } else if (this._firstRun) {
           this._processLazyRoutes(this._getLazyRoutesFromNgtools());
         } else if (changedTsFiles.length > 0) {
           this._processLazyRoutes(this._findLazyRoutesInAst(changedTsFiles));
         }
       })
       .then(() => {
-        // Build transforms, emit and report errorsn.
+        // Build transforms, emit and report errors.
 
         // We now have the final list of changed TS files.
         // Go through each changed file and add transforms as needed.
@@ -772,11 +713,11 @@ export class AngularCompilerPlugin implements Tapable {
             }
 
             // If we have a locale, auto import the locale data file.
-            if (this._angularCompilerOptions.i18nInLocale) {
+            if (this._compilerOptions.i18nInLocale) {
               transformOps.push(...registerLocaleData(
                 sf,
                 this.entryModule,
-                this._angularCompilerOptions.i18nInLocale
+                this._compilerOptions.i18nInLocale
               ));
             }
           } else if (this._platform === PLATFORM.Server) {
@@ -846,7 +787,7 @@ export class AngularCompilerPlugin implements Tapable {
     }
 
     // Write the extracted messages to disk.
-    const i18nOutFilePath = path.resolve(this._basePath, this._angularCompilerOptions.i18nOutFile);
+    const i18nOutFilePath = path.resolve(this._basePath, this._compilerOptions.i18nOutFile);
     const i18nOutFileContent = this._compilerHost.readFile(i18nOutFilePath);
     if (i18nOutFileContent) {
       _recursiveMkDir(path.dirname(i18nOutFilePath))
@@ -994,17 +935,14 @@ export class AngularCompilerPlugin implements Tapable {
 
         if (!hasErrors(allDiagnostics)) {
           time('AngularCompilerPlugin._emit.ng.emit');
-          const extractI18n = !!this._angularCompilerOptions.i18nOutFile;
+          const extractI18n = !!this._compilerOptions.i18nOutFile;
           const emitFlags = extractI18n ? EmitFlags.I18nBundle : EmitFlags.Default;
           emitResult = angularProgram.emit({ emitFlags, customTransformers });
           allDiagnostics.push(...emitResult.diagnostics);
           if (extractI18n) {
             this.writeI18nOutFile();
           }
           timeEnd('AngularCompilerPlugin._emit.ng.emit');
-        } else {
-          // Throw away the old program if there was an error.
-          this._program = undefined;
         }
       }
     } catch (e) {