feat(@schematics/angular): drop polyfills.ts file from new templates

With this change we drop the `polyfills.ts` from new application projects and add the polyfills directly in the `angular.json`. This is possible as now the `polyfills` option accept an array of module specifiers.

This change also fixes another open issue (#14432) which was caused by the missing polyfills file in the library test setup.

Closes #14432

Author: alan-agius4

packages/schematics/angular/application/files/src/polyfills.ts.template

@@ -1,6 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
 import 'zone.js/testing';
+
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

packages/schematics/angular/application/files/src/test.ts.template

@@ -6,8 +6,7 @@
     "types": []
   },
   "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
+    "src/main.ts"
   ],
   "include": [
     "src/**/*.d.ts"

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

@@ -8,8 +8,7 @@
     ]
   },
   "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
+    "src/test.ts"
   ],
   "include": [
     "src/**/*.spec.ts",

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

@@ -158,7 +158,7 @@ function addAppToWorkspaceFile(
           outputPath: `dist/${folderName}`,
           index: `${sourceRoot}/index.html`,
           main: `${sourceRoot}/main.ts`,
-          polyfills: `${sourceRoot}/polyfills.ts`,
+          polyfills: ['zone.js'],
           tsConfig: `${projectRoot}tsconfig.app.json`,
           inlineStyleLanguage,
           assets: [`${sourceRoot}/favicon.ico`, `${sourceRoot}/assets`],
@@ -211,7 +211,7 @@ function addAppToWorkspaceFile(
             builder: Builders.Karma,
             options: {
               main: `${sourceRoot}/test.ts`,
-              polyfills: `${sourceRoot}/polyfills.ts`,
+              polyfills: ['zone.js'],
               tsConfig: `${projectRoot}tsconfig.spec.json`,
               karmaConfig: `${projectRoot}karma.conf.js`,
               inlineStyleLanguage,

packages/schematics/angular/application/index.ts

@@ -60,7 +60,6 @@ describe('Application Schematic', () => {
         '/projects/foo/src/favicon.ico',
         '/projects/foo/src/index.html',
         '/projects/foo/src/main.ts',
-        '/projects/foo/src/polyfills.ts',
         '/projects/foo/src/styles.css',
         '/projects/foo/src/test.ts',
         '/projects/foo/src/app/app.module.ts',
@@ -157,7 +156,7 @@ describe('Application Schematic', () => {
       .runSchematicAsync('application', defaultOptions, workspaceTree)
       .toPromise();
     const { files, extends: _extends } = readJsonFile(tree, '/projects/foo/tsconfig.app.json');
-    expect(files).toEqual(['src/main.ts', 'src/polyfills.ts']);
+    expect(files).toEqual(['src/main.ts']);
     expect(_extends).toBe('../../tsconfig.json');
   });
 
@@ -166,7 +165,7 @@ describe('Application Schematic', () => {
       .runSchematicAsync('application', defaultOptions, workspaceTree)
       .toPromise();
     const { files, extends: _extends } = readJsonFile(tree, '/projects/foo/tsconfig.spec.json');
-    expect(files).toEqual(['src/test.ts', 'src/polyfills.ts']);
+    expect(files).toEqual(['src/test.ts']);
     expect(_extends).toBe('../../tsconfig.json');
   });
 
@@ -270,7 +269,6 @@ describe('Application Schematic', () => {
         '/projects/foo/src/favicon.ico',
         '/projects/foo/src/index.html',
         '/projects/foo/src/main.ts',
-        '/projects/foo/src/polyfills.ts',
         '/projects/foo/src/styles.css',
         '/projects/foo/src/app/app.module.ts',
         '/projects/foo/src/app/app.component.ts',
@@ -300,7 +298,6 @@ describe('Application Schematic', () => {
         '/projects/foo/src/favicon.ico',
         '/projects/foo/src/index.html',
         '/projects/foo/src/main.ts',
-        '/projects/foo/src/polyfills.ts',
         '/projects/foo/src/styles.css',
         '/projects/foo/src/app/app.module.ts',
         '/projects/foo/src/app/app.component.css',
@@ -331,7 +328,6 @@ describe('Application Schematic', () => {
         '/projects/foo/src/favicon.ico',
         '/projects/foo/src/index.html',
         '/projects/foo/src/main.ts',
-        '/projects/foo/src/polyfills.ts',
         '/projects/foo/src/styles.css',
         '/projects/foo/src/app/app.module.ts',
         '/projects/foo/src/app/app.component.html',
@@ -413,7 +409,6 @@ describe('Application Schematic', () => {
           '/src/favicon.ico',
           '/src/index.html',
           '/src/main.ts',
-          '/src/polyfills.ts',
           '/src/styles.css',
           '/src/test.ts',
           '/src/app/app.module.ts',
@@ -437,7 +432,7 @@ describe('Application Schematic', () => {
       const buildOpt = prj.architect.build.options;
       expect(buildOpt.index).toEqual('src/index.html');
       expect(buildOpt.main).toEqual('src/main.ts');
-      expect(buildOpt.polyfills).toEqual('src/polyfills.ts');
+      expect(buildOpt.polyfills).toEqual(['zone.js']);
       expect(buildOpt.tsConfig).toEqual('tsconfig.app.json');
 
       const testOpt = prj.architect.test.options;
@@ -515,7 +510,7 @@ describe('Application Schematic', () => {
       expect(appTsConfig.extends).toEqual('./tsconfig.json');
       const specTsConfig = readJsonFile(tree, '/tsconfig.spec.json');
       expect(specTsConfig.extends).toEqual('./tsconfig.json');
-      expect(specTsConfig.files).toEqual(['src/test.ts', 'src/polyfills.ts']);
+      expect(specTsConfig.files).toEqual(['src/test.ts']);
     });
 
     it(`should create correct paths when 'newProjectRoot' is blank`, async () => {
@@ -532,7 +527,7 @@ describe('Application Schematic', () => {
       const buildOpt = project.architect.build.options;
       expect(buildOpt.index).toEqual('foo/src/index.html');
       expect(buildOpt.main).toEqual('foo/src/main.ts');
-      expect(buildOpt.polyfills).toEqual('foo/src/polyfills.ts');
+      expect(buildOpt.polyfills).toEqual(['zone.js']);
       expect(buildOpt.tsConfig).toEqual('foo/tsconfig.app.json');
 
       const appTsConfig = readJsonFile(tree, '/foo/tsconfig.app.json');

packages/schematics/angular/application/index_spec.ts

@@ -1,7 +1,6 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js';
 import 'zone.js/testing';
+
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,

packages/schematics/angular/library/files/src/test.ts.template

@@ -110,6 +110,7 @@ function addLibToWorkspaceFile(
           options: {
             main: `${projectRoot}/src/test.ts`,
             tsConfig: `${projectRoot}/tsconfig.spec.json`,
+            polyfills: ['zone.js'],
             karmaConfig: `${projectRoot}/karma.conf.js`,
           },
         },

packages/schematics/angular/library/index.ts

@@ -9,7 +9,6 @@ export default async function () {
 
   // No need to include all applications code to verify disk cache existence.
   await writeFile('src/main.ts', 'console.log(1);');
-  await writeFile('src/polyfills.ts', 'console.log(1);');
 
   // Enable cache for all environments
   await updateJsonFile('angular.json', (config) => {

tests/legacy-cli/e2e/tests/build/disk-cache-purge.ts

@@ -10,7 +10,6 @@ export default async function () {
 
   // No need to include all applications code to verify disk cache existence.
   await writeFile('src/main.ts', 'console.log(1);');
-  await writeFile('src/polyfills.ts', 'console.log(1);');
 
   try {
     // Should be enabled by default.