feat(@angular-devkit/build-angular): enable differential loading for es2015 builds

Alan Agius · alexeagle · commit a29bf4ec36f3 · 2019-04-15T11:03:09.000-07:00
With this change we turn on differential loading for projects that has es2015 as script target and still want to support browsers which that don't support ES2015.

Supported browsers are defined in the browserlist file.
diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/models/es5-polyfills.js b/packages/angular_devkit/build_angular/src/angular-cli-files/models/es5-polyfills.js
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
- // ES2015 symbol capabilities
+// ES2015 symbol capabilities
 import 'core-js/modules/es.symbol';
 
 // ES2015 function capabilities
diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/models/safari-nomodule.min.js b/packages/angular_devkit/build_angular/src/angular-cli-files/models/safari-nomodule.min.js
diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts
@@ -73,11 +73,14 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     }
   }
 
-  if (buildOptions.es5BrowserSupport === undefined
-    && buildOptions.scriptTargetOverride === ts.ScriptTarget.ES5) {
-    entryPoints['polyfills'] = [es5Polyfills];
-    if (!buildOptions.aot) {
-      entryPoints['polyfills'].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));
+  if (buildOptions.es5BrowserSupport === undefined) {
+    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'));
+      }
     }
   }
 
diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts
@@ -70,7 +70,7 @@ export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise
   const scripts = new Set<string>();
 
   // Sort files in the order we want to insert them by entrypoint and dedupes duplicates
-  const mergedFiles = [...noModuleFiles, ...moduleFiles, ...files];
+  const mergedFiles = [...moduleFiles, ...noModuleFiles, ...files];
   for (const entrypoint of entrypoints) {
     for (const { extension, file, name } of mergedFiles) {
       if (name !== entrypoint) { continue; }
diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html_spec.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html_spec.ts
@@ -82,12 +82,12 @@ describe('augment-index-html', () => {
           <link rel="stylesheet" href="styles.css">
         </head>
         <body>
-          <script src="runtime-es5.js" nomodule></script>
-          <script src="polyfills-es5.js" nomodule></script>
           <script src="runtime-es2015.js" type="module"></script>
           <script src="polyfills-es2015.js" type="module"></script>
-          <script src="main-es5.js" nomodule></script>
+          <script src="runtime-es5.js" nomodule></script>
+          <script src="polyfills-es5.js" nomodule></script>
           <script src="main-es2015.js" type="module"></script>
+          <script src="main-es5.js" nomodule></script>
         </body>
       </html>
     `);
@@ -125,8 +125,8 @@ describe('augment-index-html', () => {
         </head>
         <body>
           <script src="scripts.js"></script>
-          <script src="main-es5.js" nomodule></script>
           <script src="main-es2015.js" type="module"></script>
+          <script src="main-es5.js" nomodule></script>
         </body>
       </html>
     `);
diff --git a/packages/angular_devkit/build_angular/src/browser/index.ts b/packages/angular_devkit/build_angular/src/browser/index.ts
@@ -47,7 +47,6 @@ import {
 import { deleteOutputDir } from '../utils';
 import { generateBrowserWebpackConfigFromContext } from '../utils/webpack-browser-config';
 import { Schema as BrowserBuilderSchema } from './schema';
-import { isDifferentialLoadingNeeded } from './utils';
 
 export type BrowserBuilderOutput = json.JsonObject & BuilderOutput & {
   outputPath: string;
diff --git a/packages/angular_devkit/build_angular/src/utils/differential-loading.ts b/packages/angular_devkit/build_angular/src/utils/differential-loading.ts
@@ -6,25 +6,24 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { Path, getSystemPath } from '@angular-devkit/core';
 import * as browserslist from 'browserslist';
 import * as caniuse from 'caniuse-api';
 import * as ts from 'typescript';
 
 
 export function isDifferentialLoadingNeeded(
-  projectRoot: Path,
+  projectRoot: string,
   target: ts.ScriptTarget = ts.ScriptTarget.ES5): boolean {
 
   const supportES2015 = target !== ts.ScriptTarget.ES3 && target !== ts.ScriptTarget.ES5;
 
   return supportES2015 && isEs5SupportNeeded(projectRoot);
 }
 
-export function isEs5SupportNeeded(projectRoot: Path): boolean {
+export function isEs5SupportNeeded(projectRoot: string): boolean {
   const browsersList: string[] = browserslist(
     undefined, {
-      path: getSystemPath(projectRoot),
+      path: projectRoot,
     });
 
   return !caniuse.isSupported('es6-module', browsersList.join(', '));
diff --git a/packages/angular_devkit/build_angular/src/utils/differential-loading_spec.ts b/packages/angular_devkit/build_angular/src/utils/differential-loading_spec.ts
@@ -10,7 +10,7 @@
 import { TestProjectHost } from '@angular-devkit/architect/testing';
 import { join } from '@angular-devkit/core';
 import { ScriptTarget } from 'typescript';
-import { isDifferentialLoadingNeeded } from './utils';
+import { isDifferentialLoadingNeeded } from './differential-loading';
 
 const devkitRoot = (global as any)._DevKitRoot; // tslint:disable-line:no-any
 const workspaceRoot = join(
diff --git a/packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts b/packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts
@@ -24,13 +24,15 @@ import { getEsVersionForFileName } from '../angular-cli-files/models/webpack-con
 import { readTsconfig } from '../angular-cli-files/utilities/read-tsconfig';
 import { Schema as BrowserBuilderSchema } from '../browser/schema';
 import { NormalizedBrowserBuilderSchema, defaultProgress, normalizeBrowserSchema } from '../utils';
+import { isDifferentialLoadingNeeded } from './differential-loading';
 
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
 const webpackMerge = require('webpack-merge');
 
 type BrowserWebpackConfigOptions = WebpackConfigOptions<NormalizedBrowserBuilderSchema>;
 
 export async function generateWebpackConfig(
+  context: BuilderContext,
   workspaceRoot: string,
   projectRoot: string,
   sourceRoot: string | undefined,
@@ -51,13 +53,10 @@ export async function generateWebpackConfig(
 
   // At the moment, only the browser builder supports differential loading
   // However this config generation is used by multiple builders such as dev-server
-  // const builderInfo = additionalOptions.builderInfo;
-  // const differentialLoading =
-  //   builderInfo
-  //   && builderInfo.builderName === 'browser'
-  //   && isDifferentialLoadingNeeded(projectRoot, scriptTarget);
-  const differentialLoading = false;
-  const scriptTargets = [tsConfig.options.target];
+  const scriptTarget = tsConfig.options.target;
+  const differentialLoading = context.builder.builderName === 'browser'
+    && isDifferentialLoadingNeeded(projectRoot, scriptTarget);
+  const scriptTargets = [scriptTarget];
 
   if (differentialLoading) {
     scriptTargets.unshift(ts.ScriptTarget.ES5);
@@ -121,6 +120,7 @@ export async function generateWebpackConfig(
 
 export async function generateBrowserWebpackConfigFromWorkspace(
   options: BrowserBuilderSchema,
+  context: BuilderContext,
   projectName: string,
   workspace: experimental.workspace.Workspace,
   host: virtualFs.Host<fs.Stats>,
@@ -143,6 +143,7 @@ export async function generateBrowserWebpackConfigFromWorkspace(
   );
 
   return generateWebpackConfig(
+    context,
     getSystemPath(workspace.root),
     getSystemPath(projectRoot),
     sourceRoot && getSystemPath(sourceRoot),
@@ -176,6 +177,7 @@ export async function generateBrowserWebpackConfigFromContext(
 
   const config = await generateBrowserWebpackConfigFromWorkspace(
     options,
+    context,
     projectName,
     workspace,
     host,

Original file line number	Diff line number	Diff line change
`@@ -73,11 +73,14 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {`
`73`	`73`	`}`
`74`	`74`	`}`
`75`	`75`
`76`		`- if (buildOptions.es5BrowserSupport === undefined`
`77`		`- && buildOptions.scriptTargetOverride === ts.ScriptTarget.ES5) {`
`78`		`- entryPoints['polyfills'] = [es5Polyfills];`
`79`		`- if (!buildOptions.aot) {`
`80`		`- entryPoints['polyfills'].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));`
	`76`	`+ if (buildOptions.es5BrowserSupport === undefined) {`
	`77`	`+ if (buildOptions.scriptTargetOverride === ts.ScriptTarget.ES2015) {`
	`78`	`+ entryPoints['polyfills'] = [path.join(__dirname, '..', 'safari-nomodule.js')];`
	`79`	`+ } else {`
	`80`	`+ entryPoints['polyfills'] = [es5Polyfills];`
	`81`	`+ if (!buildOptions.aot) {`
	`82`	`+ entryPoints['polyfills'].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));`
	`83`	`+ }`
`81`	`84`	`}`
`82`	`85`	`}`
`83`	`86`