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 (angular#14432) which was caused by the missing polyfills file in the library test setup.

Closes angular#14432

Author: alan-agius4

packages/angular_devkit/build_angular/src/webpack/configs/common.ts

@@ -108,11 +108,29 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
     extraPlugins.push(new ContextReplacementPlugin(/@?hapi|express[\\/]/));
   }
 
-  if (buildOptions.polyfills.length) {
+  if (polyfills?.length) {
+    // `zone.js/testing` is a **special** polyfill because when not imported in the main it fails with the below errors:
+    // `Error: Expected to be running in 'ProxyZone', but it was not found.`
+    // This was also the reason why previously it was imported in `test.ts` as the first module.
+    // From Jia li:
+    // This is because the jasmine functions such as beforeEach/it will not be patched by zone.js since
+    // jasmine will not be loaded yet, so the ProxyZone will not be there. We have to load zone-testing.js after
+    // jasmine is ready.
+    const zoneTestingEntryPoint = 'zone.js/testing';
+    const polyfillsExludingZoneTesting = polyfills.filter((p) => p !== zoneTestingEntryPoint);
+
     if (Array.isArray(entryPoints['polyfills'])) {
-      entryPoints['polyfills'].push(...buildOptions.polyfills);
+      entryPoints['polyfills'].push(...polyfillsExludingZoneTesting);
     } else {
-      entryPoints['polyfills'] = buildOptions.polyfills;
+      entryPoints['polyfills'] = polyfillsExludingZoneTesting;
+    }
+
+    if (polyfillsExludingZoneTesting.length !== polyfills.length) {
+      if (Array.isArray(entryPoints['main'])) {
+        entryPoints['main'].unshift(zoneTestingEntryPoint);
+      } else {
+        entryPoints['main'] = [zoneTestingEntryPoint, entryPoints['main'] as string];
+      }
     }
   }
 

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

@@ -1,6 +1,4 @@
 // 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', 'zone.js/testing'],
               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,4 @@
 // 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', 'zone.js/testing'],
             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.

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

@@ -1,6 +1,6 @@
-import { appendToFile } from '../../utils/fs';
+import { appendToFile, createDir, writeMultipleFiles } from '../../utils/fs';
 import { killAllProcesses, waitForAnyProcessOutputToMatch } from '../../utils/process';
-import { ngServe } from '../../utils/project';
+import { ngServe, updateJsonFile } from '../../utils/project';
 
 const webpackGoodRegEx = / Compiled successfully./;
 
@@ -9,7 +9,28 @@ export default async function () {
     return;
   }
 
+  await createDir('src/environments');
+
   try {
+    await writeMultipleFiles({
+      'src/environments/environment.ts': `export const env = 'dev';`,
+      'src/environments/environment.prod.ts': `export const env = 'prod';`,
+      'src/main.ts': `
+        import { env } from 'environments/environment';
+        console.log(env);
+      `,
+    });
+
+    await updateJsonFile('angular.json', (workspaceJson) => {
+      const appArchitect = workspaceJson.projects['test-project'].architect;
+      appArchitect.build.configurations.production.fileReplacements = [
+        {
+          replace: 'src/environments/environment.ts',
+          with: 'src/environments/environment.prod.ts',
+        },
+      ];
+    });
+
     await ngServe('--configuration=production');
 
     // Should trigger a rebuild.