feat(@angular-devkit/build-angular): conditional ES2015 polyfill loading

Author: clydin

packages/angular/cli/lib/config/schema.json

@@ -863,6 +863,11 @@
                 "$ref": "#/definitions/targetOptions/definitions/browser/definitions/budget"
               },
               "default": []
+            },
+            "es5BrowserSupport": {
+              "description": "Enables conditionally loaded ES2015 polyfills.",
+              "type": "boolean",
+              "default": false
             }
           },
           "additionalProperties": false,

packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts

@@ -58,6 +58,7 @@ export interface BuildOptions {
   statsJson: boolean;
   forkTypeChecker: boolean;
   profile?: boolean;
+  es5BrowserSupport?: boolean;
 
   main: string;
   index: string;

packages/angular_devkit/build_angular/src/angular-cli-files/models/es2015-jit-polyfills.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import 'core-js/es6/reflect';

packages/angular_devkit/build_angular/src/angular-cli-files/models/es2015-polyfills.js

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/weak-map';
+import 'core-js/es6/set';

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

@@ -44,6 +44,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
       entrypoints: generateEntryPoints(buildOptions),
       deployUrl: buildOptions.deployUrl,
       sri: buildOptions.subresourceIntegrity,
+      noModuleEntrypoints: ['es2015-polyfills'],
     }));
   }
 
@@ -112,7 +113,7 @@ export function getBrowserConfig(wco: WebpackConfigOptions) {
               const moduleName = module.nameForCondition ? module.nameForCondition() : '';
 
               return /[\\/]node_modules[\\/]/.test(moduleName)
-                && !chunks.some(({ name }) => name === 'polyfills'
+                && !chunks.some(({ name }) => name === 'polyfills' || name === 'es2015-polyfills'
                   || globalStylesBundleNames.includes(name));
             },
           },

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

@@ -53,6 +53,10 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     entryPoints['main'] = [path.resolve(root, buildOptions.main)];
   }
 
+  if (buildOptions.es5BrowserSupport) {
+    entryPoints['es2015-polyfills'] = [path.join(__dirname, '..', 'es2015-polyfills.js')];
+  }
+
   if (buildOptions.polyfills) {
     entryPoints['polyfills'] = [path.resolve(root, buildOptions.polyfills)];
   }
@@ -62,6 +66,13 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
       ...(entryPoints['polyfills'] || []),
       path.join(__dirname, '..', 'jit-polyfills.js'),
     ];
+
+    if (buildOptions.es5BrowserSupport) {
+      entryPoints['es2015-polyfills'] = [
+        ...entryPoints['es2015-polyfills'],
+        path.join(__dirname, '..', 'es2015-jit-polyfills.js'),
+      ];
+    }
   }
 
   if (buildOptions.profile) {

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/index-html-webpack-plugin.ts

@@ -18,6 +18,7 @@ export interface IndexHtmlWebpackPluginOptions {
   entrypoints: string[];
   deployUrl?: string;
   sri: boolean;
+  noModuleEntrypoints: string[];
 }
 
 function readFile(filename: string, compilation: compilation.Compilation): Promise<string> {
@@ -53,6 +54,7 @@ export class IndexHtmlWebpackPlugin {
       input: 'index.html',
       output: 'index.html',
       entrypoints: ['polyfills', 'main'],
+      noModuleEntrypoints: [],
       sri: false,
       ...options,
     };
@@ -67,14 +69,26 @@ export class IndexHtmlWebpackPlugin {
 
 
       // Get all files for selected entrypoints
-      let unfilteredSortedFiles: string[] = [];
+      const unfilteredSortedFiles: string[] = [];
+      const noModuleFiles = new Set<string>();
+      const otherFiles = new Set<string>();
       for (const entryName of this._options.entrypoints) {
         const entrypoint = compilation.entrypoints.get(entryName);
         if (entrypoint && entrypoint.getFiles) {
-          unfilteredSortedFiles = unfilteredSortedFiles.concat(entrypoint.getFiles() || []);
+          const files: string[] = entrypoint.getFiles() || [];
+          unfilteredSortedFiles.push(...files);
+
+          if (this._options.noModuleEntrypoints.includes(entryName)) {
+            files.forEach(file => noModuleFiles.add(file));
+          } else {
+            files.forEach(file => otherFiles.add(file));
+          }
         }
       }
 
+      // Clean out files that are used in all types of entrypoints
+      otherFiles.forEach(file => noModuleFiles.delete(file));
+
       // Filter files
       const existingFiles = new Set<string>();
       const stylesheets: string[] = [];
@@ -137,25 +151,31 @@ export class IndexHtmlWebpackPlugin {
       // Inject into the html
       const indexSource = new ReplaceSource(new RawSource(inputContent), this._options.input);
 
-      const scriptElements = treeAdapter.createDocumentFragment();
+      let scriptElements = '';
       for (const script of scripts) {
-        const attrs = [
+        const attrs: { name: string, value: string | null }[] = [
           { name: 'type', value: 'text/javascript' },
           { name: 'src', value: (this._options.deployUrl || '') + script },
         ];
 
+        if (noModuleFiles.has(script)) {
+          attrs.push({ name: 'nomodule', value: null });
+        }
+
         if (this._options.sri) {
           const content = compilation.assets[script].source();
           attrs.push(...this._generateSriAttributes(content));
         }
 
-        const element = treeAdapter.createElement('script', undefined, attrs);
-        treeAdapter.appendChild(scriptElements, element);
+        const attributes = attrs
+          .map(attr => attr.value === null ? attr.name : `${attr.name}="${attr.value}"`)
+          .join(' ');
+        scriptElements += `<script ${attributes}></script>`;
       }
 
       indexSource.insert(
         scriptInsertionPoint,
-        parse5.serialize(scriptElements, { treeAdapter }),
+        scriptElements,
       );
 
       // Adjust base href if specified

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/package-chunk-sort.ts

@@ -11,7 +11,7 @@ import { normalizeExtraEntryPoints } from '../models/webpack-configs/utils';
 export function generateEntryPoints(
   appConfig: { styles: ExtraEntryPoint[], scripts: ExtraEntryPoint[] },
 ) {
-  const entryPoints = ['polyfills', 'sw-register'];
+  const entryPoints = ['es2015-polyfills', 'polyfills', 'sw-register'];
 
   // Add all styles/scripts, except lazy-loaded ones.
   [

packages/angular_devkit/build_angular/src/browser/schema.d.ts

@@ -236,6 +236,11 @@ export interface BrowserBuilderSchema {
    * Output profile events for Chrome profiler.
    */
   profile: boolean;
+
+  /**
+   * Enables conditionally loaded IE9-11 polyfills.
+   */
+  es5BrowserSupport: boolean;
 }
 
 export type OptimizationOptions = boolean | OptimizationObject;

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

@@ -299,6 +299,11 @@
       "type": "boolean",
       "description": "Output profile events for Chrome profiler.",
       "default": false
+    },
+    "es5BrowserSupport": {
+      "description": "Enables conditionally loaded ES2015 polyfills.",
+      "type": "boolean",
+      "default": false
     }
   },
   "additionalProperties": false,