feat(@angular-devkit/build-angular): differential loading

This PR adds differential loading to the browser builder. First, it checks if differential loading is needed. This is the case if the compilation target is ES2015 while the browserslist points to ES5 browsers.

For providing differential loading, it calls the methods for creating the webpack config for each compilation target (e. g. ES5 and ES2015). The needed differences between those configurations are defined using parameters also added by this PR. Then it calls webpack for each of them and merges the results

This feature is currently hidden behind a flag. To activate it, set the differentialLoading flag in browser/index.ts.

Author: manfredsteyer

package.json

@@ -82,6 +82,8 @@
     "@bazel/karma": "~0.26.0",
     "@bazel/typescript": "~0.26.0",
     "@ngtools/json-schema": "^1.1.0",
+    "@types/browserslist": "^4.4.0",
+    "@types/caniuse-api": "^3.0.0",
     "@types/copy-webpack-plugin": "^4.4.1",
     "@types/express": "^4.16.0",
     "@types/glob": "^7.0.0",

packages/angular_devkit/build_angular/package.json

@@ -14,6 +14,8 @@
     "@ngtools/webpack": "0.0.0",
     "ajv": "6.10.0",
     "autoprefixer": "9.5.1",
+    "browserslist": "4.5.2",
+    "caniuse-api": "3.0.0",
     "circular-dependency-plugin": "5.0.2",
     "clean-css": "4.2.1",
     "copy-webpack-plugin": "5.0.2",
@@ -83,5 +85,8 @@
     "popper.js": "^1.14.1",
     "protractor": "~5.4.0",
     "zone.js": "^0.9.0"
+  },
+  "peerDependencies": {
+    "typescript": ">=2.7 < 3.4"
   }
 }

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

@@ -73,8 +73,14 @@ export interface BuildOptions {
   lazyModules: string[];
   platform?: 'browser' | 'server';
   fileReplacements: NormalizedFileReplacement[];
-    /** @deprecated use only for compatibility in 8.x; will be removed in 9.0 */
+  /** @deprecated use only for compatibility in 8.x; will be removed in 9.0 */
   rebaseRootRelativeCssUrls?: boolean;
+
+  /* Append script target version to filename. */
+  esVersionInFileName?: boolean;
+
+  /* When specified it will be used instead of the script target in the tsconfig.json. */
+  scriptTargetOverride?: ts.ScriptTarget;
 }
 
 export interface WebpackTestOptions extends BuildOptions {

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

@@ -8,6 +8,7 @@
 import { tags } from '@angular-devkit/core';
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import * as path from 'path';
+import * as ts from 'typescript';
 import {
   Configuration,
   ContextReplacementPlugin,
@@ -21,8 +22,8 @@ import { CleanCssWebpackPlugin } from '../../plugins/cleancss-webpack-plugin';
 import { ScriptsWebpackPlugin } from '../../plugins/scripts-webpack-plugin';
 import { findAllNodeModules, findUp } from '../../utilities/find-up';
 import { requireProjectModule } from '../../utilities/require-project-module';
-import { BuildOptions, WebpackConfigOptions } from '../build-options';
-import { getOutputHashFormat, normalizeExtraEntryPoints } from './utils';
+import { WebpackConfigOptions } from '../build-options';
+import { getEsVersionForFileName, getOutputHashFormat, normalizeExtraEntryPoints } from './utils';
 
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
@@ -55,35 +56,48 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   const extraPlugins: any[] = [];
   const entryPoints: { [key: string]: string[] } = {};
 
+  const targetInFileName = getEsVersionForFileName(
+    buildOptions.scriptTargetOverride,
+    buildOptions.esVersionInFileName,
+  );
+
   if (buildOptions.main) {
     entryPoints['main'] = [path.resolve(root, buildOptions.main)];
   }
 
+  const es5Polyfills = path.join(__dirname, '..', 'es5-polyfills.js');
   if (buildOptions.es5BrowserSupport) {
-    entryPoints['polyfills.es5'] = [path.join(__dirname, '..', 'es5-polyfills.js')];
+    entryPoints['polyfills.es5'] = [es5Polyfills];
+    if (!buildOptions.aot) {
+      entryPoints['polyfills.es5'].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));
+    }
+  }
+
+  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.polyfills) {
-    entryPoints['polyfills'] = [path.resolve(root, buildOptions.polyfills)];
+    entryPoints['polyfills'] = [
+      ...(entryPoints['polyfills'] || []),
+      path.resolve(root, buildOptions.polyfills),
+    ];
   }
 
   if (!buildOptions.aot) {
     entryPoints['polyfills'] = [
       ...(entryPoints['polyfills'] || []),
       path.join(__dirname, '..', 'jit-polyfills.js'),
     ];
-
-    if (buildOptions.es5BrowserSupport) {
-      entryPoints['polyfills.es5'] = [
-        ...entryPoints['polyfills.es5'],
-        path.join(__dirname, '..', 'es5-jit-polyfills.js'),
-      ];
-    }
   }
 
   if (buildOptions.profile || process.env['NG_BUILD_PROFILING']) {
     extraPlugins.push(new debug.ProfilingPlugin({
-      outputPath: path.resolve(root, 'chrome-profiler-events.json'),
+      outputPath: path.resolve(root, `chrome-profiler-events${targetInFileName}.json`),
     }));
   }
 
@@ -104,7 +118,6 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
           }
 
           existingEntry.paths.push(resolvedPath);
-
         } else {
           prev.push({
             bundleName,
@@ -177,7 +190,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   }
 
   if (buildOptions.statsJson) {
-    extraPlugins.push(new StatsPlugin('stats.json', 'verbose'));
+    extraPlugins.push(new StatsPlugin(`stats${targetInFileName}.json`, 'verbose'));
   }
 
   let sourceMapUseRule;
@@ -305,7 +318,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
       futureEmitAssets: true,
       path: path.resolve(root, buildOptions.outputPath as string),
       publicPath: buildOptions.deployUrl,
-      filename: `[name]${hashFormat.chunk}.js`,
+      filename: `[name]${targetInFileName}${hashFormat.chunk}.js`,
       // cast required until typings include `futureEmitAssets` property
     } as Output,
     watch: buildOptions.watch,

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

@@ -15,8 +15,37 @@ import {
   PLATFORM
 } from '@ngtools/webpack';
 import { buildOptimizerLoader } from './common';
-import { WebpackConfigOptions } from '../build-options';
+import { WebpackConfigOptions, BuildOptions } from '../build-options';
+
+function _pluginOptionsOverrides(
+  buildOptions: BuildOptions,
+  pluginOptions: AngularCompilerPluginOptions
+): AngularCompilerPluginOptions {
+  const compilerOptions = {
+    ...(pluginOptions.compilerOptions || {})
+  }
 
+  const hostReplacementPaths: { [replace: string]: string } = {};
+  if (buildOptions.fileReplacements) {
+    for (const replacement of buildOptions.fileReplacements) {
+      hostReplacementPaths[replacement.replace] = replacement.with;
+    }
+  }
+
+  if (buildOptions.scriptTargetOverride) {
+    compilerOptions.target = buildOptions.scriptTargetOverride;
+  }
+
+  if (buildOptions.preserveSymlinks) {
+    compilerOptions.preserveSymlinks = true;
+  }
+
+  return {
+    ...pluginOptions,
+    hostReplacementPaths,
+    compilerOptions
+  };
+}
 
 function _createAotPlugin(
   wco: WebpackConfigOptions,
@@ -25,13 +54,8 @@ function _createAotPlugin(
   extract = false,
 ) {
   const { root, buildOptions } = wco;
-  options.compilerOptions = options.compilerOptions || {};
-
-  if (wco.buildOptions.preserveSymlinks) {
-    options.compilerOptions.preserveSymlinks = true;
-  }
 
-  let i18nInFile = buildOptions.i18nFile
+  const i18nInFile = buildOptions.i18nFile
     ? path.resolve(root, buildOptions.i18nFile)
     : undefined;
 
@@ -54,22 +78,14 @@ function _createAotPlugin(
     }
   }
 
-  const hostReplacementPaths: { [replace: string]: string } = {};
-  if (buildOptions.fileReplacements) {
-    for (const replacement of buildOptions.fileReplacements) {
-      hostReplacementPaths[replacement.replace] = replacement.with;
-    }
-  }
-
-  const pluginOptions: AngularCompilerPluginOptions = {
+  let pluginOptions: AngularCompilerPluginOptions = {
     mainPath: useMain ? path.join(root, buildOptions.main) : undefined,
     ...i18nFileAndFormat,
     locale: buildOptions.i18nLocale,
     platform: buildOptions.platform === 'server' ? PLATFORM.Server : PLATFORM.Browser,
     missingTranslation: buildOptions.i18nMissingTranslation,
     sourceMap: buildOptions.sourceMap.scripts,
     additionalLazyModules,
-    hostReplacementPaths,
     nameLazyFiles: buildOptions.namedChunks,
     forkTypeChecker: buildOptions.forkTypeChecker,
     contextElementDependencyConstructor: require('webpack/lib/dependencies/ContextElementDependency'),
@@ -78,6 +94,9 @@ function _createAotPlugin(
     importFactories: buildOptions.experimentalImportFactories,
     ...options,
   };
+
+  pluginOptions = _pluginOptionsOverrides(buildOptions, pluginOptions);
+
   return new AngularCompilerPlugin(pluginOptions);
 }
 
@@ -112,7 +131,7 @@ export function getAotConfig(wco: WebpackConfigOptions, extract = false) {
 export function getTypescriptWorkerPlugin(wco: WebpackConfigOptions, workerTsConfigPath: string) {
   const { buildOptions } = wco;
 
-  const pluginOptions: AngularCompilerPluginOptions = {
+  let pluginOptions: AngularCompilerPluginOptions = {
     skipCodeGeneration: true,
     tsConfigPath: workerTsConfigPath,
     mainPath: undefined,
@@ -127,5 +146,7 @@ export function getTypescriptWorkerPlugin(wco: WebpackConfigOptions, workerTsCon
     discoverLazyRoutes: false,
   };
 
+  pluginOptions = _pluginOptionsOverrides(buildOptions, pluginOptions);
+
   return new AngularCompilerPlugin(pluginOptions);
 }

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

@@ -12,6 +12,7 @@ import * as path from 'path';
 import { basename, normalize } from '@angular-devkit/core';
 import { ExtraEntryPoint, ExtraEntryPointClass } from '../../../browser/schema';
 import { SourceMapDevToolPlugin } from 'webpack';
+import * as ts from 'typescript';
 
 export const ngAppResolve = (resolvePath: string): string => {
   return path.resolve(process.cwd(), resolvePath);
@@ -89,3 +90,14 @@ export function getSourceMapDevTool(
     append: hiddenSourceMap ? false : undefined,
   });
 }
+
+/**
+ * Returns an ES version file suffix to differentiate between various builds.
+ */
+export function getEsVersionForFileName(
+  scriptTargetOverride: ts.ScriptTarget | undefined,
+  esVersionInFileName = false,
+): string {
+  return scriptTargetOverride && esVersionInFileName ?
+    '-' + ts.ScriptTarget[scriptTargetOverride].toLowerCase() : '';
+}