feat(@angular-devkit/build-angular): deprecate es5BrowserSupport option in browser builder

In future, this will be determined from the list of supported browsers specified in the 'browserslist' file.

Author: Alan Agius

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -17,6 +17,7 @@ import {
   debug,
 } from 'webpack';
 import { AssetPatternClass } from '../../../browser/schema';
+import { isEs5SupportNeeded } from '../../../utils/differential-loading';
 import { BundleBudgetPlugin } from '../../plugins/bundle-budget';
 import { CleanCssWebpackPlugin } from '../../plugins/cleancss-webpack-plugin';
 import { ScriptsWebpackPlugin } from '../../plugins/scripts-webpack-plugin';
@@ -66,20 +67,25 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   }
 
   const es5Polyfills = path.join(__dirname, '..', 'es5-polyfills.js');
-  if (buildOptions.es5BrowserSupport) {
-    entryPoints['polyfills.es5'] = [es5Polyfills];
-    if (!buildOptions.aot) {
-      entryPoints['polyfills.es5'].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));
-    }
-  }
+  const es5JitPolyfills = path.join(__dirname, '..', 'es5-jit-polyfills.js');
 
-  if (buildOptions.es5BrowserSupport === undefined) {
+  if (targetInFileName) {
+    // For differential loading we don't need to have 2 polyfill bundles
     if (buildOptions.scriptTargetOverride === ts.ScriptTarget.ES2015) {
       entryPoints['polyfills'] = [path.join(__dirname, '..', 'safari-nomodule.js')];
     } else {
       entryPoints['polyfills'] = [es5Polyfills];
       if (!buildOptions.aot) {
-        entryPoints['polyfills'].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));
+        entryPoints['polyfills'].push(es5JitPolyfills);
+      }
+    }
+  } else {
+    // For NON differential loading we want to have 2 polyfill bundles
+    if (buildOptions.es5BrowserSupport
+      || (buildOptions.es5BrowserSupport === undefined && isEs5SupportNeeded(projectRoot))) {
+      entryPoints['polyfills.es5'] = [es5Polyfills];
+      if (!buildOptions.aot) {
+        entryPoints['polyfills.es5'].push(es5JitPolyfills);
       }
     }
   }

packages/angular_devkit/build_angular/src/browser/schema.json

@@ -308,7 +308,7 @@
     "es5BrowserSupport": {
       "description": "Enables conditionally loaded ES2015 polyfills.",
       "type": "boolean",
-      "default": false
+      "x-deprecated": "This will be determined from the list of supported browsers specified in the 'browserslist' file."
     },
     "rebaseRootRelativeCssUrls": {
       "description": "Change root relative URLs in stylesheets to include base HREF and deploy URL. Use only for compatibility and transition. The behavior of this option is non-standard and will be removed in the next major release.",

packages/angular_devkit/build_angular/src/utils/index.ts

@@ -8,6 +8,7 @@
 
 export * from './default-progress';
 export * from './delete-output-dir';
+export * from './differential-loading';
 export * from './run-module-as-observable-fork';
 export * from './normalize-file-replacements';
 export * from './normalize-asset-patterns';

tests/legacy-cli/e2e/tests/misc/support-ie.ts

@@ -1,5 +1,5 @@
 import { oneLineTrim } from 'common-tags';
-import { expectFileNotToExist, expectFileToMatch } from '../../utils/fs';
+import { expectFileNotToExist, expectFileToMatch, writeFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
 
@@ -14,6 +14,7 @@ export default async function () {
       appArchitect.build.options.es5BrowserSupport = false;
   });
 
+  await writeFile('browserslist', 'last 2 Chrome versions');
   await ng('build');
   await expectFileNotToExist('dist/test-project/polyfills.es5.js');
   await expectFileToMatch('dist/test-project/index.html', oneLineTrim`
@@ -24,6 +25,7 @@ export default async function () {
     <script src="main.js"></script>
   `);
 
+  await writeFile('browserslist', 'IE 10');
   await ng('build', `--es5BrowserSupport`);
   await expectFileToMatch('dist/test-project/polyfills.es5.js', 'core-js');
   await expectFileToMatch('dist/test-project/index.html', oneLineTrim`