fix(@angular/cli): add polyfills manually in for ng5 unit tests

Author: filipesilva

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

@@ -162,8 +162,15 @@ export function getNonAotTestConfig(wco: WebpackConfigOptions) {
 
   let pluginOptions: any = { tsConfigPath, skipCodeGeneration: true };
 
-  // The options below only apply to AoTPlugin.
-  if (!AngularCompilerPlugin.isSupported()) {
+  if (AngularCompilerPlugin.isSupported()) {
+    if (appConfig.polyfills) {
+      // TODO: remove singleFileIncludes for 2.0, this is just to support old projects that did not
+      // include 'polyfills.ts' in `tsconfig.spec.json'.
+      const polyfillsPath = path.resolve(projectRoot, appConfig.root, appConfig.polyfills);
+      pluginOptions.singleFileIncludes = [polyfillsPath];
+    }
+  } else {
+    // The options below only apply to AoTPlugin.
     // Force include main and polyfills.
     // This is needed for AngularCompilerPlugin compatibility with existing projects,
     // since TS compilation there is stricter and tsconfig.spec.ts doesn't include them.

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

@@ -60,6 +60,9 @@ export interface AngularCompilerPluginOptions {
   mainPath?: string;
   skipCodeGeneration?: boolean;
   hostReplacementPaths?: { [path: string]: string };
+  // TODO: remove singleFileIncludes for 2.0, this is just to support old projects that did not
+  // include 'polyfills.ts' in `tsconfig.spec.json'.
+  singleFileIncludes?: string[];
   i18nInFile?: string;
   i18nInFormat?: string;
   i18nOutFile?: string;
@@ -83,6 +86,7 @@ export class AngularCompilerPlugin implements Tapable {
   // TS compilation.
   private _compilerOptions: CompilerOptions;
   private _rootNames: string[];
+  private _singleFileIncludes: string[] = [];
   private _program: (ts.Program | Program);
   private _compilerHost: WebpackCompilerHost & CompilerHost;
   private _moduleResolutionCache: ts.ModuleResolutionCache;
@@ -157,17 +161,19 @@ export class AngularCompilerPlugin implements Tapable {
       basePath = path.resolve(process.cwd(), options.basePath);
     }
 
-    // TODO: check if we can get this from readConfiguration
-    this._basePath = basePath;
+    if (options.singleFileIncludes !== undefined) {
+      this._singleFileIncludes.push(...options.singleFileIncludes);
+    }
 
     // Parse the tsconfig contents.
     const config = readConfiguration(this._tsConfigPath);
     if (config.errors && config.errors.length) {
       throw new Error(formatDiagnostics(config.errors));
     }
 
-    this._rootNames = config.rootNames;
+    this._rootNames = config.rootNames.concat(...this._singleFileIncludes);
     this._compilerOptions = config.options;
+    this._basePath = config.options.basePath;
 
     // Overwrite outDir so we can find generated files next to their .ts origin in compilerHost.
     this._compilerOptions.outDir = '';
@@ -295,7 +301,8 @@ export class AngularCompilerPlugin implements Tapable {
         // 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;
+        const config = readConfiguration(this._tsConfigPath);
+        this._rootNames = config.rootNames.concat(...this._singleFileIncludes);
 
         // Update the forked type checker with all changed compilation files.
         // This includes templates, that also need to be reloaded on the type checker.

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

@@ -16,6 +16,7 @@ const MagicString = require('magic-string');
  * @param max The maximum number of items to return.
  * @return all nodes of kind, or [] if none is found
  */
+// TODO: replace this with collectDeepNodes and add limits to collectDeepNodes
 export function findAstNodes<T extends ts.Node>(
   node: ts.Node | null,
   sourceFile: ts.SourceFile,

tests/e2e/setup/500-create-project.ts

@@ -52,20 +52,6 @@ export default function() {
     .then(() => updateTsConfig(json => {
       json['compilerOptions']['sourceRoot'] = '/';
     }))
-    .then(() => {
-      if (argv.nightly) {
-        // *************************************************************************************
-        // REMOVE THIS WITH UPDATED NG5 SCHEMATICS
-        // In ng5 we have to tell users users to update their tsconfig.json.
-        // `src/tsconfig.spec.json` needs to be updated with "polyfills.ts" on `include`.
-        // *************************************************************************************
-        return updateJsonFile('src/tsconfig.spec.json', json => {
-          json['include'] = json['include'].concat('polyfills.ts');
-        })
-        // Ignore error if file doesn't exist.
-        .catch(() => { return; });
-      }
-    })
     .then(() => git('config', 'user.email', '[email protected]'))
     .then(() => git('config', 'user.name', 'Angular CLI E2e'))
     .then(() => git('config', 'commit.gpgSign', 'false'))

tests/e2e/utils/project.ts

@@ -43,20 +43,6 @@ export function createProject(name: string, ...args: string[]) {
     .then(() => useCIDefaults())
     .then(() => argv['ng2'] ? useNg2() : Promise.resolve())
     .then(() => argv.nightly || argv['ng-sha'] ? useSha() : Promise.resolve())
-    .then(() => {
-      if (argv.nightly) {
-        // *************************************************************************************
-        // REMOVE THIS WITH UPDATED NG5 SCHEMATICS
-        // In ng5 we have to tell users users to update their tsconfig.json.
-        // `src/tsconfig.spec.json` needs to be updated with "polyfills.ts" on `include`.
-        // *************************************************************************************
-        return updateJsonFile('src/tsconfig.spec.json', json => {
-          json['include'] = json['include'].concat('polyfills.ts');
-        })
-        // Ignore error if file doesn't exist.
-        .catch(() => { return; });
-      }
-    })
     .then(() => console.log(`Project ${name} created... Installing npm.`))
     .then(() => silentNpm('install'));
 }