fix(@angular-devkit/build-angular): nomodule polyfill for Safari 10.1 and iOS Safari 10.3

The nomodule polyfill needs to be loaded prior to any script and be
outside of webpack compilation because otherwise webpack will cause the
script to be wrapped in `window["webpackJsonp"]` which causes it to
fail.

This polyfill will only be injected when the either Safari 10.1 or iOS
Safari 10.3 support is required, which is based on the browsers  defined in browserslist file.

Fixes #14680

Author: alan-agius4

packages/angular_devkit/build_angular/src/angular-cli-files/models/safari-nomodule.js

@@ -1,22 +1,8 @@
-/**
- * Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
- * load <script nomodule> anyway. This snippet solve this problem, but only for script
- * tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
- *
- * Again: this will **not** prevent inline script, e.g.:
- * <script nomodule>alert('no modules');</script>.
- *
- * This workaround is possible because Safari supports the non-standard 'beforeload' event.
- * This allows us to trap the module and nomodule load.
- *
- * Note also that `nomodule` is supported in later versions of Safari - it's just 10.1 that
- * omits this attribute.
- */
-(function() {
+(function () {
   var check = document.createElement('script');
   if (!('noModule' in check) && 'onbeforeload' in check) {
     var support = false;
-    document.addEventListener('beforeload', function(e) {
+    document.addEventListener('beforeload', function (e) {
       if (e.target === check) {
         support = true;
       } else if (!e.target.hasAttribute('nomodule') || !support) {
@@ -30,4 +16,4 @@
     document.head.appendChild(check);
     check.remove();
   }
-}());
+}());

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

@@ -16,8 +16,8 @@ import {
   Output,
   debug,
 } from 'webpack';
-import { AssetPatternClass } from '../../../browser/schema';
-import { isEs5SupportNeeded } from '../../../utils/differential-loading';
+import { AssetPatternClass, ExtraEntryPoint } from '../../../browser/schema';
+import { BuildBrowserFeatures } from '../../../utils/build-browser-features';
 import { BundleBudgetPlugin } from '../../plugins/bundle-budget';
 import { CleanCssWebpackPlugin } from '../../plugins/cleancss-webpack-plugin';
 import { NamedLazyChunksPlugin } from '../../plugins/named-chunks-plugin';
@@ -41,7 +41,7 @@ export const buildOptimizerLoader: string = g['_DevKitIsLocal']
 
 // tslint:disable-next-line:no-big-function
 export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
-  const { root, projectRoot, buildOptions } = wco;
+  const { root, projectRoot, buildOptions, tsConfig } = wco;
   const { styles: stylesOptimization, scripts: scriptsOptimization } = buildOptions.optimization;
   const {
     styles: stylesSourceMap,
@@ -68,25 +68,39 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   }
 
   if (wco.buildOptions.platform !== 'server') {
-    const es5Polyfills = path.join(__dirname, '..', 'es5-polyfills.js');
-    const es5JitPolyfills = path.join(__dirname, '..', 'es5-jit-polyfills.js');
-    if (targetInFileName) {
-      // For differential loading we don't need to have 2 polyfill bundles
-      if (buildOptions.scriptTargetOverride === ScriptTarget.ES2015) {
-        entryPoints['polyfills'] = [path.join(__dirname, '..', 'safari-nomodule.js')];
-      } else {
-        entryPoints['polyfills'] = [es5Polyfills];
-        if (!buildOptions.aot) {
-          entryPoints['polyfills'].push(es5JitPolyfills);
+    const buildBrowserFeatures = new BuildBrowserFeatures(
+      projectRoot,
+      tsConfig.options.target || ScriptTarget.ES5,
+    );
+    if ((buildOptions.scriptTargetOverride || tsConfig.options.target) === ScriptTarget.ES5) {
+      if (buildOptions.es5BrowserSupport ||
+        (
+          buildOptions.es5BrowserSupport === undefined &&
+          buildBrowserFeatures.isEs5SupportNeeded()
+        )
+      ) {
+        // The nomodule polyfill needs to be inject prior to any script and be
+        // outside of webpack compilation because otherwise webpack will cause the
+        // script to be wrapped in window["webpackJsonp"] which causes this to fail.
+        if (buildBrowserFeatures.isNoModulePolyfillNeeded()) {
+          const noModuleScript: ExtraEntryPoint = {
+            bundleName: 'polyfills-nomodule-es5',
+            input: path.join(__dirname, '..', 'safari-nomodule.js'),
+          };
+          buildOptions.scripts = buildOptions.scripts
+            ? [...buildOptions.scripts, noModuleScript]
+            : [noModuleScript];
         }
-      }
-    } else {
-      // For NON differential loading we want to have 2 polyfill bundles
-      if (buildOptions.es5BrowserSupport
-        || (buildOptions.es5BrowserSupport === undefined && isEs5SupportNeeded(projectRoot))) {
-        entryPoints['polyfills-es5'] = [es5Polyfills];
+
+         // For differential loading we don't need to generate a seperate polyfill file
+        // because they will be loaded exclusivly based on module and nomodule
+        const polyfillsChunkName = buildBrowserFeatures.isDifferentialLoadingNeeded()
+          ? 'polyfills'
+          : 'polyfills-es5';
+
+        entryPoints[polyfillsChunkName] = [path.join(__dirname, '..', 'es5-polyfills.js')];
         if (!buildOptions.aot) {
-          entryPoints['polyfills-es5'].push(es5JitPolyfills);
+          entryPoints[polyfillsChunkName].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));
         }
       }
     }

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

@@ -8,16 +8,11 @@
 // tslint:disable
 // TODO: cleanup this file, it's copied as is from Angular CLI.
 
-import * as path from 'path';
 import { basename, normalize } from '@angular-devkit/core';
 import { ExtraEntryPoint, ExtraEntryPointClass } from '../../../browser/schema';
 import { SourceMapDevToolPlugin } from 'webpack';
 import { ScriptTarget } from 'typescript';
 
-export const ngAppResolve = (resolvePath: string): string => {
-  return path.resolve(process.cwd(), resolvePath);
-};
-
 export interface HashFormat {
   chunk: string;
   extract: string;

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

@@ -26,6 +26,7 @@ export function generateEntryPoints(
   };
 
   const entryPoints = [
+    'polyfills-nomodule-es5',
     'polyfills-es5',
     'polyfills',
     'sw-register',

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

@@ -49,7 +49,7 @@ import {
   statsWarningsToString,
 } from '../angular-cli-files/utilities/stats';
 import { ExecutionTransformer } from '../transforms';
-import { deleteOutputDir, isEs5SupportNeeded } from '../utils';
+import { BuildBrowserFeatures, deleteOutputDir } from '../utils';
 import { Version } from '../utils/version';
 import { generateBrowserWebpackConfigFromContext } from '../utils/webpack-browser-config';
 import { Schema as BrowserBuilderSchema } from './schema';
@@ -193,9 +193,13 @@ export function buildWebpackBrowser(
       const tsConfigPath = path.resolve(getSystemPath(workspace.root), options.tsConfig);
       const tsConfig = readTsconfig(tsConfigPath);
 
-      if (isEs5SupportNeeded(projectRoot) &&
-          tsConfig.options.target !== ScriptTarget.ES5 &&
-          tsConfig.options.target !== ScriptTarget.ES2015) {
+      const target = tsConfig.options.target || ScriptTarget.ES5;
+      const buildBrowserFeatures = new BuildBrowserFeatures(
+        getSystemPath(projectRoot),
+        target,
+      );
+
+      if (target > ScriptTarget.ES2015 && buildBrowserFeatures.isDifferentialLoadingNeeded()) {
         context.logger.warn(tags.stripIndent`
           WARNING: Using differential loading with targets ES5 and ES2016 or higher may
           cause problems. Browsers with support for ES2015 will load the ES2016+ scripts

packages/angular_devkit/build_angular/src/utils/build-browser-features.ts

@@ -0,0 +1,58 @@
+/**
+ * @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 * as browserslist from 'browserslist';
+import { feature, features } from 'caniuse-lite';
+import * as ts from 'typescript';
+
+export class BuildBrowserFeatures {
+  private readonly _supportedBrowsers: string[];
+  private readonly _es6TargetOrLater: boolean;
+
+  constructor(
+    private projectRoot: string,
+    private scriptTarget: ts.ScriptTarget,
+  ) {
+    this._supportedBrowsers = browserslist(undefined, { path: this.projectRoot });
+    this._es6TargetOrLater = this.scriptTarget > ts.ScriptTarget.ES5;
+  }
+
+  /**
+   * True, when one or more browsers requires ES5
+   * support and the scirpt target is ES2015 or greater.
+   */
+  isDifferentialLoadingNeeded(): boolean {
+    return this._es6TargetOrLater && this.isEs5SupportNeeded();
+  }
+
+  /**
+   * True, when one or more browsers requires ES5 support
+   */
+  isEs5SupportNeeded(): boolean {
+    return !caniuse.isSupported('es6-module', this._supportedBrowsers.join(', '));
+  }
+
+  /**
+   * Safari 10.1 and iOS Safari 10.3 supports modules,
+   * but does not support the `nomodule` attribute.
+   * While return `true`, when support for Safari 10.1 and iOS Safari 10.3
+   * is required and in differential loading is enabled.
+   */
+  isNoModulePolyfillNeeded(): boolean {
+    if (!this.isDifferentialLoadingNeeded()) {
+      return false;
+    }
+
+    const safariBrowsers = [
+      'safari 10.1',
+      'ios_saf 10.3',
+    ];
+
+    return this._supportedBrowsers.some(browser => safariBrowsers.includes(browser));
+  }
+}