fix(@schematics/angular): exclusively list the files in tsconfigs (#15030)

* test: update tests to work with new stricter tsconfig file inclusions

* fix(@schematics/angular): exclusively list the files in tsconfigs

With the omission of `includes` or `files` in tsconfig files tsc will pick up all the files under the rootDir and make them as part of the compilation. In certain cases, redundant files will be picked up which will cause a slower compilations.

Related to: TOOL-949

Author: alan-agius4

packages/angular_devkit/build_angular/test/browser/errors_spec_large.ts

@@ -23,11 +23,13 @@ describe('Browser Builder errors', () => {
   it('shows error when files are not part of the compilation', async () => {
     host.replaceInFile(
       'src/tsconfig.app.json',
-      '"compilerOptions": {',
-      `
-      "files": ["main.ts"],
-      "compilerOptions": {
-    `,
+      /,\r?\n?\s*"polyfills\.ts"/,
+      '',
+    );
+    host.replaceInFile(
+      'src/tsconfig.app.json',
+      '"**/*.ts"',
+      '"**/*.d.ts"',
     );
     const logger = new logging.Logger('');
     const logs: string[] = [];

packages/angular_devkit/build_angular/test/browser/lazy-module_spec_large.ts

@@ -7,7 +7,7 @@
  */
 
 import { Architect } from '@angular-devkit/architect';
-import { TestLogger } from '@angular-devkit/architect/testing';
+import { TestLogger, TestProjectHost } from '@angular-devkit/architect/testing';
 import { take, tap, timeout } from 'rxjs/operators';
 import {
   browserBuild,
@@ -30,6 +30,21 @@ describe('Browser Builder lazy modules', () => {
   });
   afterEach(async () => host.restore().toPromise());
 
+  function addLazyLoadedModulesInTsConfig(host: TestProjectHost, lazyModuleFiles: Record<string, string>) {
+    const files = [
+      ...Object.keys(lazyModuleFiles),
+      'main.ts',
+    ]
+    .map(f => '"' + f.replace('src/', '') + '"')
+    .join(', ');
+
+    host.replaceInFile(
+      'src/tsconfig.app.json',
+      '"main.ts"',
+      `${files}`,
+    );
+  }
+
   const cases: [string, Record<string, string>][] = [
     ['string', lazyModuleStringImport],
     ['function', lazyModuleFnImport],
@@ -40,6 +55,10 @@ describe('Browser Builder lazy modules', () => {
         host.writeMultipleFiles(lazyModuleFiles);
         host.writeMultipleFiles(imports);
 
+        if (name === 'string') {
+          addLazyLoadedModulesInTsConfig(host, lazyModuleFiles);
+        }
+
         const { files } = await browserBuild(architect, host, target);
         expect('lazy-lazy-module.js' in files).toBe(true);
       });
@@ -91,6 +110,7 @@ describe('Browser Builder lazy modules', () => {
       it('supports lazy bundle for lazy routes with AOT', async () => {
         host.writeMultipleFiles(lazyModuleFiles);
         host.writeMultipleFiles(imports);
+        addLazyLoadedModulesInTsConfig(host, lazyModuleFiles);
 
         const { files } = await browserBuild(architect, host, target, { aot: true });
         if (ivyEnabled) {
@@ -131,10 +151,13 @@ describe('Browser Builder lazy modules', () => {
   });
 
   it(`supports lazy bundle for System.import() calls`, async () => {
-    host.writeMultipleFiles({
+    const lazyfiles = {
       'src/lazy-module.ts': 'export const value = 42;',
       'src/main.ts': `declare var System: any; System.import('./lazy-module');`,
-    });
+    };
+
+    host.writeMultipleFiles(lazyfiles);
+    addLazyLoadedModulesInTsConfig(host, lazyfiles);
 
     const { files } = await browserBuild(architect, host, target);
     expect(files['lazy-module.js']).not.toBeUndefined();
@@ -199,6 +222,7 @@ describe('Browser Builder lazy modules', () => {
         }`,
     });
     host.replaceInFile('src/tsconfig.app.json', `"module": "es2015"`, `"module": "esnext"`);
+    addLazyLoadedModulesInTsConfig(host, lazyModuleFiles);
 
     const { files } = await browserBuild(architect, host, target, {
       lazyModules: ['src/app/lazy/lazy.module'],
@@ -227,6 +251,7 @@ describe('Browser Builder lazy modules', () => {
         }`,
     });
     host.replaceInFile('src/tsconfig.app.json', `"module": "es2015"`, `"module": "esnext"`);
+    addLazyLoadedModulesInTsConfig(host, lazyModuleFiles);
     const { files } = await browserBuild(architect, host, target, {
       lazyModules: ['src/app/lazy/lazy.module'],
       aot: true,

packages/angular_devkit/build_angular/test/browser/output-hashing_spec_large.ts

@@ -13,7 +13,7 @@ import {
   createArchitect,
   host,
   lazyModuleFiles,
-  lazyModuleStringImport,
+  lazyModuleFnImport,
 } from '../utils';
 
 describe('Browser Builder output hashing', () => {
@@ -68,7 +68,7 @@ describe('Browser Builder output hashing', () => {
     let newHashes: Map<string, string>;
 
     host.writeMultipleFiles(lazyModuleFiles);
-    host.writeMultipleFiles(lazyModuleStringImport);
+    host.writeMultipleFiles(lazyModuleFnImport);
 
     const overrides = { outputHashing: 'all', extractCss: true };
 
@@ -79,7 +79,7 @@ describe('Browser Builder output hashing', () => {
     // Save the current hashes.
     oldHashes = generateFileHashMap();
     host.writeMultipleFiles(lazyModuleFiles);
-    host.writeMultipleFiles(lazyModuleStringImport);
+    host.writeMultipleFiles(lazyModuleFnImport);
 
     await browserBuild(architect, host, target, overrides);
     newHashes = generateFileHashMap();
@@ -117,7 +117,7 @@ describe('Browser Builder output hashing', () => {
   it('supports options', async () => {
     host.writeMultipleFiles({ 'src/styles.css': `h1 { background: url('./spectrum.png')}` });
     host.writeMultipleFiles(lazyModuleFiles);
-    host.writeMultipleFiles(lazyModuleStringImport);
+    host.writeMultipleFiles(lazyModuleFnImport);
 
     // We must do several builds instead of a single one in watch mode, so that the output
     // path is deleted on each run and only contains the most recent files.

packages/angular_devkit/build_angular/test/browser/rebuild_spec_large.ts

@@ -15,7 +15,7 @@ import {
   host,
   ivyEnabled,
   lazyModuleFiles,
-  lazyModuleStringImport,
+  lazyModuleFnImport,
 } from '../utils';
 
 describe('Browser Builder rebuilds', () => {
@@ -84,7 +84,7 @@ describe('Browser Builder rebuilds', () => {
               // No lazy chunk should exist.
               if (!hasLazyChunk) {
                 phase = 2;
-                host.writeMultipleFiles({ ...lazyModuleFiles, ...lazyModuleStringImport });
+                host.writeMultipleFiles({ ...lazyModuleFiles, ...lazyModuleFnImport });
               }
               break;
 

packages/schematics/angular/application/files/tsconfig.app.json.template

@@ -4,13 +4,20 @@
     "outDir": "<%= relativePathToWorkspaceRoot %>/out-tsc/app",
     "types": []
   },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],<% if (!enableIvy) { %>
   "include": [
     "src/**/*.ts"
   ],
   "exclude": [
     "src/test.ts",
     "src/**/*.spec.ts"
-  ]<% if (enableIvy) { %>,
+  ]<% } %><% if (enableIvy) { %>
+  "include": [
+    "src/**/*.d.ts"
+  ],
   "angularCompilerOptions": {
     "enableIvy": true
   }<% } %>

packages/schematics/angular/application/index_spec.ts

@@ -232,6 +232,27 @@ describe('Application Schematic', () => {
     expect(workspace.projects.foo.architect.build.options.aot).toEqual(true);
   });
 
+  it('should set the right files, exclude, include in the tsconfig for VE projects', async () => {
+    const tree = await schematicRunner.runSchematicAsync('application', defaultOptions, workspaceTree)
+      .toPromise();
+    const path = '/projects/foo/tsconfig.app.json';
+    const tsConfig = JSON.parse(tree.readContent(path));
+    expect(tsConfig.files).toEqual(['src/main.ts', 'src/polyfills.ts']);
+    expect(tsConfig.exclude).toEqual(['src/test.ts', 'src/**/*.spec.ts']);
+    expect(tsConfig.include).toEqual(['src/**/*.ts']);
+  });
+
+  it('should set the right files, exclude, include in the tsconfig for Ivy projects', async () => {
+    const options = { ...defaultOptions, enableIvy: true };
+    const tree = await schematicRunner.runSchematicAsync('application', options, workspaceTree)
+      .toPromise();
+    const path = '/projects/foo/tsconfig.app.json';
+    const tsConfig = JSON.parse(tree.readContent(path));
+    expect(tsConfig.files).toEqual(['src/main.ts', 'src/polyfills.ts']);
+    expect(tsConfig.exclude).toBeUndefined();
+    expect(tsConfig.include).toEqual(['src/**/*.d.ts']);
+  });
+
   describe(`update package.json`, () => {
     it(`should add build-angular to devDependencies`, async () => {
       const tree = await schematicRunner.runSchematicAsync('application', defaultOptions, workspaceTree)

packages/schematics/angular/universal/files/root/__tsconfigFileName__.json.template

@@ -4,6 +4,9 @@
     "outDir": "<%= outDir %>-server",
     "module": "commonjs"
   },
+  "files": [
+    "src/main.server.ts"
+  ],
   "angularCompilerOptions": {
     "entryModule": "./<%= rootInSrc ? '' : 'src/' %><%= appDir %>/<%= stripTsExtension(rootModuleFileName) %>#<%= rootModuleClassName %>"
   }

packages/schematics/angular/universal/index_spec.ts

@@ -92,6 +92,9 @@ describe('Universal Schematic', () => {
         outDir: './out-tsc/app-server',
         module: 'commonjs',
       },
+      files: [
+        "src/main.server.ts"
+      ],
       angularCompilerOptions: {
         entryModule: './src/app/app.server.module#AppServerModule',
       },
@@ -113,6 +116,9 @@ describe('Universal Schematic', () => {
         outDir: '../../out-tsc/app-server',
         module: 'commonjs',
       },
+      files: [
+        "src/main.server.ts"
+      ],
       angularCompilerOptions: {
         entryModule: './src/app/app.server.module#AppServerModule',
       },

tests/angular_devkit/build_angular/hello-world-app-ivy/src/tsconfig.app.json

@@ -4,9 +4,12 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "**/*.d.ts"
   ],
   "angularCompilerOptions": {
     "enableIvy": true

tests/angular_devkit/build_angular/hello-world-app-ivy/src/tsconfig.server.json

@@ -1,14 +1,13 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "./tsconfig.app.json",
   "compilerOptions": {
     "outDir": "../dist-server",
     "baseUrl": "./",
     "module": "commonjs",
     "types": []
   },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
+  "files": [
+    "main.server.ts"
   ],
   "angularCompilerOptions": {
     "entryModule": "app/app.server.module#AppServerModule",

tests/angular_devkit/build_angular/hello-world-app/src/tsconfig.app.json

@@ -4,6 +4,13 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
+  "files": [
+    "main.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "**/*.ts"
+  ],
   "exclude": [
     "test.ts",
     "**/*.spec.ts"

tests/angular_devkit/build_angular/hello-world-app/src/tsconfig.server.json

@@ -1,14 +1,12 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "./tsconfig.app.json",
   "compilerOptions": {
     "outDir": "../dist-server",
-    "baseUrl": "./",
     "module": "commonjs",
     "types": []
   },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
+  "files": [
+    "main.server.ts"
   ],
   "angularCompilerOptions": {
     "entryModule": "app/app.server.module#AppServerModule"

tests/legacy-cli/e2e/tests/basic/rebuild.ts

@@ -37,7 +37,7 @@ export default function() {
             FormsModule,
             HttpClientModule,
             RouterModule.forRoot([
-              { path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' }
+              { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
             ])
           ],
           providers: [],

tests/legacy-cli/e2e/tests/build/build-app-shell.ts

@@ -52,6 +52,12 @@ export default function() {
           "module": "commonjs",
           "types": []
         },
+        "files": [
+          "src/main.server.ts"
+        ],
+        "include": [
+          "src/**/*.d.ts"
+        ],
         "angularCompilerOptions": {
           "entryModule": "src/app/app.server.module#AppServerModule"
         }

tests/legacy-cli/e2e/tests/build/build-errors.ts

@@ -50,6 +50,7 @@ export default function() {
       .then(() =>
         updateJsonFile('./tsconfig.app.json', configJson => {
           configJson.include = ['src/**/*.ts'];
+          configJson.exclude = ['**/**.spec.ts'];
           configJson.files = undefined;
         }),
       )

tests/legacy-cli/e2e/tests/build/dynamic-import.ts

@@ -14,6 +14,10 @@ export default async function() {
     ];
   });
 
+  await updateJsonFile('tsconfig.app.json', tsConfig => {
+    tsConfig.files.push('src/app/lazy/lazy.module.ts');
+  });
+
   // Update the app component to use the lazy module
   await writeFile('src/app/app.component.ts', `
     import { Component, SystemJsNgModuleLoader } from '@angular/core';

tests/legacy-cli/e2e/tests/build/lazy-load-syntax.ts

@@ -82,19 +82,19 @@ export default async function () {
     buildTarget['configurations']['production'] = { aot: true };
   });
 
-  // Test string import.
-  // Both Ivy and View Engine should support it.
-  await replaceLoadChildren(`'./lazy/lazy.module#LazyModule'`);
-  await ng('e2e');
-  await ng('e2e', '--prod');
-
   // Test `import()` style lazy load.
   // Both Ivy and View Engine should support it.
   await replaceLoadChildren(`() => import('./lazy/lazy.module').then(m => m.LazyModule)`);
 
-  // TODO: remove cast after https://github.com/angular/angular/pull/29832 is released.
-  await replaceInFile(appRoutingModulePath, '];', '] as Routes;');
+  await ng('e2e');
+  await ng('e2e', '--prod');
 
+  // Test string import.
+  // Both Ivy and View Engine should support it.
+  await updateJsonFile('tsconfig.app.json', tsConfig => {
+    tsConfig.files.push('src/app/lazy/lazy.module.ts');
+  });
+  await replaceLoadChildren(`'./lazy/lazy.module#LazyModule'`);
   await ng('e2e');
   await ng('e2e', '--prod');
 }

tests/legacy-cli/e2e/tests/build/platform-server.ts

@@ -50,6 +50,12 @@ export default function() {
           "module": "commonjs",
           "types": []
         },
+        "files": [
+          "src/main.server.ts"
+        ],
+        "include": [
+          "src/**/*.d.ts"
+        ],
         "angularCompilerOptions": {
           "entryModule": "src/app/app.server.module#AppServerModule"
         }

tests/legacy-cli/e2e/tests/misc/lazy-module.ts

@@ -15,9 +15,9 @@ export default function() {
       import { RouterModule } from '@angular/router';
     `))
     .then(() => replaceInFile('src/app/app.module.ts', 'imports: [', `imports: [
-      RouterModule.forRoot([{ path: "lazy", loadChildren: 'src/app/lazy/lazy.module#LazyModule' }]),
-      RouterModule.forRoot([{ path: "lazy1", loadChildren: './lazy/lazy.module#LazyModule' }]),
-      RouterModule.forRoot([{ path: "lazy2", loadChildren: './too/lazy/lazy.module#LazyModule' }]),
+      RouterModule.forRoot([{ path: "lazy", loadChildren: () => import('src/app/lazy/lazy.module').then(m => m.LazyModule) }]),
+      RouterModule.forRoot([{ path: "lazy1", loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }]),
+      RouterModule.forRoot([{ path: "lazy2", loadChildren: () => import('./too/lazy/lazy.module').then(m => m.LazyModule) }]),
     `))
     .then(() => ng('build', '--named-chunks'))
     .then(() => readdirSync('dist/test-project'))