feat(@angular-devkit/build-angular): remove automatic inclusion of ES…

…5 browser polyfills BREAKING CHANGE: The automatic inclusion of Angular-required ES2015 polyfills to support ES5 browsers has been removed. Previously when targetting ES5 within the application's TypeScript configuration or listing an ES5 requiring browser in the browserslist file, Angular-required polyfills were included in the built application. However, with Angular no longer supporting IE11, there are now no browsers officially supported by Angular that would require these polyfills. As a result, the automatic inclusion of these ES2015 polyfills has been removed. Any polyfills manually added to an application's code are not affected by this change.
angular · Aug 3, 2021 · 7576136 · 7576136
1 parent 5a46ff3
commit 7576136
Show file tree

Hide file tree

Showing 14 changed files with 19 additions and 243 deletions.
diff --git a/packages/angular_devkit/build_angular/src/browser/index.ts b/packages/angular_devkit/build_angular/src/browser/index.ts
@@ -231,8 +231,6 @@ export function buildWebpackBrowser(
                 'scripts',
               ).map((x) => x.bundleName);
 
-              const files = emittedFiles.filter((x) => x.name !== 'polyfills-es5');
-              const noModuleFiles = emittedFiles.filter((x) => x.name === 'polyfills-es5');
               if (i18n.shouldInline) {
                 const success = await i18nInlineEmittedFiles(
                   context,
@@ -318,8 +316,8 @@ export function buildWebpackBrowser(
                         // i18nLocale is used when Ivy is disabled
                         lang: locale || undefined,
                         outputPath,
-                        files: mapEmittedFilesToFileInfo(files),
-                        noModuleFiles: mapEmittedFilesToFileInfo(noModuleFiles),
+                        files: mapEmittedFilesToFileInfo(emittedFiles),
+                        noModuleFiles: [],
                         moduleFiles: mapEmittedFilesToFileInfo(moduleFiles),
                       });
 

diff --git a/packages/angular_devkit/build_angular/src/dev-server/index.ts b/packages/angular_devkit/build_angular/src/dev-server/index.ts
@@ -315,7 +315,7 @@ export function serveWebpackBrowser(
             baseHref,
             entrypoints,
             moduleEntrypoints: [],
-            noModuleEntrypoints: ['polyfills-es5'],
+            noModuleEntrypoints: [],
             deployUrl: browserOptions.deployUrl,
             sri: browserOptions.subresourceIntegrity,
             postTransform: transforms.indexHtml,

diff --git a/packages/angular_devkit/build_angular/src/utils/build-browser-features.ts b/packages/angular_devkit/build_angular/src/utils/build-browser-features.ts
@@ -8,7 +8,6 @@
 
 import browserslist from 'browserslist';
 import { feature, features } from 'caniuse-lite';
-import * as ts from 'typescript';
 
 export class BuildBrowserFeatures {
   readonly supportedBrowsers: string[];
@@ -17,13 +16,6 @@ export class BuildBrowserFeatures {
     this.supportedBrowsers = browserslist(undefined, { path: this.projectRoot });
   }
 
-  /**
-   * True, when one or more browsers requires ES5 support
-   */
-  isEs5SupportNeeded(): boolean {
-    return !this.isFeatureSupported('es6-module');
-  }
-
   /**
    * True, when a browser feature is supported partially or fully.
    */

diff --git a/packages/angular_devkit/build_angular/src/utils/package-chunk-sort.ts b/packages/angular_devkit/build_angular/src/utils/package-chunk-sort.ts
@@ -28,7 +28,6 @@ export function generateEntryPoints(appConfig: {
 
   const entryPoints = [
     'runtime',
-    'polyfills-es5',
     'polyfills',
     'sw-register',
     ...extraEntryPoints(appConfig.styles, 'styles'),

diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
@@ -46,12 +46,7 @@ import { Spinner } from '../../utils/spinner';
 import { addError } from '../../utils/webpack-diagnostics';
 import { DedupeModuleResolvePlugin, ScriptsWebpackPlugin } from '../plugins';
 import { JavaScriptOptimizerPlugin } from '../plugins/javascript-optimizer-plugin';
-import {
-  getEsVersionForFileName,
-  getOutputHashFormat,
-  getWatchOptions,
-  normalizeExtraEntryPoints,
-} from '../utils/helpers';
+import { getOutputHashFormat, getWatchOptions, normalizeExtraEntryPoints } from '../utils/helpers';
 
 // eslint-disable-next-line max-lines-per-function
 export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
@@ -107,19 +102,6 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   }
 
   if (platform !== 'server') {
-    if (buildBrowserFeatures.isEs5SupportNeeded()) {
-      const polyfillsChunkName = 'polyfills-es5';
-      entryPoints[polyfillsChunkName] = [path.join(__dirname, '..', 'es5-polyfills.js')];
-
-      if (!buildOptions.aot) {
-        entryPoints[polyfillsChunkName].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));
-      }
-
-      if (buildOptions.polyfills) {
-        entryPoints[polyfillsChunkName].push(path.resolve(root, buildOptions.polyfills));
-      }
-    }
-
     if (buildOptions.polyfills) {
       const projectPolyfills = path.resolve(root, buildOptions.polyfills);
       if (entryPoints['polyfills']) {
@@ -130,7 +112,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     }
 
     if (!buildOptions.aot) {
-      const jitPolyfills = path.join(__dirname, '..', 'jit-polyfills.js');
+      const jitPolyfills = 'core-js/proposals/reflect-metadata';
       if (entryPoints['polyfills']) {
         entryPoints['polyfills'].push(jitPolyfills);
       } else {
@@ -366,10 +348,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     devtool: false,
     target: [
       platform === 'server' ? 'node' : 'web',
-      tsConfig.options.target === ScriptTarget.ES5 ||
-      (platform !== 'server' && buildBrowserFeatures.isEs5SupportNeeded())
-        ? 'es5'
-        : 'es2015',
+      tsConfig.options.target === ScriptTarget.ES5 ? 'es5' : 'es2015',
     ],
     profile: buildOptions.statsJson,
     resolve: {
@@ -394,13 +373,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
       clean: buildOptions.deleteOutputPath ?? true,
       path: path.resolve(root, buildOptions.outputPath),
       publicPath: buildOptions.deployUrl ?? '',
-      filename: ({ chunk }) => {
-        if (chunk?.name === 'polyfills-es5') {
-          return `polyfills-es5${hashFormat.chunk}.js`;
-        } else {
-          return `[name]${hashFormat.chunk}.js`;
-        }
-      },
+      filename: `[name]${hashFormat.chunk}.js`,
       chunkFilename: `[name]${hashFormat.chunk}.js`,
     },
     watch: buildOptions.watch,

diff --git a/packages/angular_devkit/build_angular/src/webpack/es5-jit-polyfills.js b/packages/angular_devkit/build_angular/src/webpack/es5-jit-polyfills.js
diff --git a/packages/angular_devkit/build_angular/src/webpack/es5-polyfills.js b/packages/angular_devkit/build_angular/src/webpack/es5-polyfills.js
diff --git a/packages/angular_devkit/build_angular/src/webpack/jit-polyfills.js b/packages/angular_devkit/build_angular/src/webpack/jit-polyfills.js
diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma-context.html b/packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma-context.html
@@ -31,7 +31,6 @@
       %MAPPINGS%
     </script>
     <script src="_karma_webpack_/runtime.js" crossorigin="anonymous"></script>
-    <script src="_karma_webpack_/polyfills-es5.js" crossorigin="anonymous" nomodule></script>
     <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
     <!-- Dynamically replaced with <script> tags -->
     %SCRIPTS%

diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma-debug.html b/packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma-debug.html
@@ -33,7 +33,6 @@
       %MAPPINGS%
     </script>
     <script src="_karma_webpack_/runtime.js" crossorigin="anonymous"></script>
-    <script src="_karma_webpack_/polyfills-es5.js" crossorigin="anonymous" nomodule></script>
     <script src="_karma_webpack_/polyfills.js" crossorigin="anonymous"></script>
     <!-- Dynamically replaced with <script> tags -->
     %SCRIPTS%

diff --git a/packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma.ts b/packages/angular_devkit/build_angular/src/webpack/plugins/karma/karma.ts
@@ -299,7 +299,6 @@ function fallbackMiddleware() {
         const alwaysServe = [
           `/${KARMA_APPLICATION_PATH}/runtime.js`,
           `/${KARMA_APPLICATION_PATH}/polyfills.js`,
-          `/${KARMA_APPLICATION_PATH}/polyfills-es5.js`,
           `/${KARMA_APPLICATION_PATH}/scripts.js`,
           `/${KARMA_APPLICATION_PATH}/styles.css`,
           `/${KARMA_APPLICATION_PATH}/vendor.js`,

diff --git a/packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts b/packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts
@@ -113,7 +113,7 @@ export function getEsVersionForFileName(
 }
 
 export function isPolyfillsEntry(name: string): boolean {
-  return name === 'polyfills' || name === 'polyfills-es5';
+  return name === 'polyfills';
 }
 
 export function getWatchOptions(poll: number | undefined): Configuration['watchOptions'] {

diff --git a/tests/legacy-cli/e2e/tests/build/polyfills.ts b/tests/legacy-cli/e2e/tests/build/polyfills.ts
@@ -1,6 +1,5 @@
 import { oneLineTrim } from 'common-tags';
 import {
-  appendToFile,
   expectFileSizeToBeUnder,
   expectFileToExist,
   expectFileToMatch,
@@ -10,38 +9,22 @@ import { ng } from '../../utils/process';
 import { expectToFail } from '../../utils/utils';
 
 export default async function () {
-  // Enable ES5 polyfills to run both size checks
-  await appendToFile('.browserslistrc', 'IE 11');
-
   await ng('build', '--aot=false', '--configuration=development');
-  // files were created successfully
-  await expectFileToMatch('dist/test-project/polyfills-es5.js', 'core-js/es/reflect');
-  await expectFileToMatch('dist/test-project/polyfills-es5.js', 'zone.js');
-
-  await expectFileToMatch(
-    'dist/test-project/index.html',
-    oneLineTrim`
-    <script src="polyfills-es5.js" nomodule defer></script>
-    <script src="polyfills.js" defer>
-  `,
-  );
 
-  const jitPolyfillSize = await getFileSize('dist/test-project/polyfills-es5.js');
+  // files were created successfully
+  await expectFileToMatch('dist/test-project/polyfills.js', 'core-js/proposals/reflect-metadata');
+  await expectFileToMatch('dist/test-project/polyfills.js', 'zone.js');
+  await expectFileToMatch('dist/test-project/index.html', '<script src="polyfills.js" defer>');
+  const jitPolyfillSize = await getFileSize('dist/test-project/polyfills.js');
 
   await ng('build', '--aot=true', '--configuration=development');
+
   // files were created successfully
-  await expectFileToExist('dist/test-project/polyfills-es5.js');
-  await expectFileSizeToBeUnder('dist/test-project/polyfills-es5.js', jitPolyfillSize);
+  await expectFileToExist('dist/test-project/polyfills.js');
+  await expectFileSizeToBeUnder('dist/test-project/polyfills.js', jitPolyfillSize);
   await expectToFail(() =>
-    expectFileToMatch('dist/test-project/polyfills-es5.js', 'core-js/es/reflect'),
-  );
-  await expectFileToMatch('dist/test-project/polyfills-es5.js', 'zone.js');
-
-  await expectFileToMatch(
-    'dist/test-project/index.html',
-    oneLineTrim`
-    <script src="polyfills-es5.js" nomodule defer></script>
-    <script src="polyfills.js" defer>
-  `,
+    expectFileToMatch('dist/test-project/polyfills.js', 'core-js/proposals/reflect-metadata'),
   );
+  await expectFileToMatch('dist/test-project/polyfills.js', 'zone.js');
+  await expectFileToMatch('dist/test-project/index.html', '<script src="polyfills.js" defer>');
 }
diff --git a/tests/legacy-cli/e2e/tests/misc/es5-polyfills.ts b/tests/legacy-cli/e2e/tests/misc/es5-polyfills.ts