From 5feec4bb395afd0ceeaebe69250a6611b367c54a Mon Sep 17 00:00:00 2001
From: Alan Agius <alan.agius4@gmail.com>
Date: Mon, 6 Dec 2021 18:28:35 +0100
Subject: [PATCH] fix(@angular-devkit/build-angular): prefer ES2015 entrypoints
 when application targets ES2019 or lower

Previously, we always consumed the ES2020 entrypoints, which caused issues in environments where the application compilation target is ES2019 or lower and ES2020 is not supported.

This is because we only downlevel code when we target ES5 or below.

- ES5 or below compilations, ES2015 entrypoints are used and their code is downlevelled to ES5.
- ES2019 or below, ES2015 entrypoints are used and no downlevelling is involved.
- ES2020 or later, ES2020 entrypoints are used.

Closes #22270
---
 .../browser/specs/lazy-module_spec.ts         |  4 ++--
 .../src/webpack/configs/common.ts             | 23 ++++++++++++-------
 .../src/webpack/utils/helpers.ts              | 21 +++++++++++++++++
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/packages/angular_devkit/build_angular/src/builders/browser/specs/lazy-module_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/specs/lazy-module_spec.ts
index 016632feccb2..0631d4a610ec 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser/specs/lazy-module_spec.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser/specs/lazy-module_spec.ts
@@ -152,7 +152,7 @@ describe('Browser Builder lazy modules', () => {
     const { files } = await browserBuild(architect, host, target);
     expect(files['src_one_ts.js']).not.toBeUndefined();
     expect(files['src_two_ts.js']).not.toBeUndefined();
-    expect(files['default-node_modules_angular_common_fesm2020_http_mjs.js']).toBeDefined();
+    expect(files['default-node_modules_angular_common_fesm2015_http_mjs.js']).toBeDefined();
   });
 
   it(`supports disabling the common bundle`, async () => {
@@ -165,6 +165,6 @@ describe('Browser Builder lazy modules', () => {
     const { files } = await browserBuild(architect, host, target, { commonChunk: false });
     expect(files['src_one_ts.js']).not.toBeUndefined();
     expect(files['src_two_ts.js']).not.toBeUndefined();
-    expect(files['default-node_modules_angular_common_fesm2020_http_mjs.js']).toBeUndefined();
+    expect(files['default-node_modules_angular_common_fesm2015_http_mjs.js']).toBeUndefined();
   });
 });
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
index fdc3ac4b5a01..b4a0dc58fc36 100644
--- a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
+++ b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
@@ -39,6 +39,7 @@ import {
   externalizePackages,
   getCacheSettings,
   getInstrumentationExcludedPaths,
+  getMainFieldsAndConditionNames,
   getOutputHashFormat,
   getStatsOptions,
   globalScriptsByBundleName,
@@ -46,7 +47,16 @@ import {
 
 // eslint-disable-next-line max-lines-per-function
 export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Configuration> {
-  const { root, projectRoot, buildOptions, tsConfig, projectName, sourceRoot, tsConfigPath } = wco;
+  const {
+    root,
+    projectRoot,
+    buildOptions,
+    tsConfig,
+    projectName,
+    sourceRoot,
+    tsConfigPath,
+    scriptTarget,
+  } = wco;
   const {
     cache,
     codeCoverage,
@@ -283,7 +293,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
       new JavaScriptOptimizerPlugin({
         define: buildOptions.aot ? GLOBAL_DEFS_FOR_TERSER_WITH_AOT : GLOBAL_DEFS_FOR_TERSER,
         sourcemap: scriptsSourceMap,
-        target: wco.scriptTarget,
+        target: scriptTarget,
         keepNames: !allowMangle || isPlatformServer,
         removeLicenses: buildOptions.extractLicenses,
         advanced: buildOptions.buildOptimizer,
@@ -314,7 +324,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
     devtool: false,
     target: [
       isPlatformServer ? 'node' : 'web',
-      tsConfig.options.target === ScriptTarget.ES5 ? 'es5' : 'es2015',
+      scriptTarget === ScriptTarget.ES5 ? 'es5' : 'es2015',
     ],
     profile: buildOptions.statsJson,
     resolve: {
@@ -322,10 +332,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
       extensions: ['.ts', '.tsx', '.mjs', '.js'],
       symlinks: !buildOptions.preserveSymlinks,
       modules: [tsConfig.options.baseUrl || projectRoot, 'node_modules'],
-      mainFields: isPlatformServer
-        ? ['es2015', 'module', 'main']
-        : ['es2020', 'es2015', 'browser', 'module', 'main'],
-      conditionNames: isPlatformServer ? ['es2015', '...'] : ['es2020', 'es2015', '...'],
+      ...getMainFieldsAndConditionNames(scriptTarget, isPlatformServer),
     },
     resolveLoader: {
       symlinks: !buildOptions.preserveSymlinks,
@@ -394,7 +401,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
               loader: require.resolve('../../babel/webpack-loader'),
               options: {
                 cacheDirectory: (cache.enabled && path.join(cache.path, 'babel-webpack')) || false,
-                scriptTarget: wco.scriptTarget,
+                scriptTarget,
                 aot: buildOptions.aot,
                 optimize: buildOptions.buildOptimizer,
                 instrumentCode: codeCoverage
diff --git a/packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts b/packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts
index 1d40986f38f4..de4a0dbd7606 100644
--- a/packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts
+++ b/packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts
@@ -11,6 +11,7 @@ import { createHash } from 'crypto';
 import { existsSync } from 'fs';
 import glob from 'glob';
 import * as path from 'path';
+import { ScriptTarget } from 'typescript';
 import type { Configuration, WebpackOptionsNormalized } from 'webpack';
 import {
   AssetPatternClass,
@@ -298,3 +299,23 @@ export function getStatsOptions(verbose = false): WebpackStatsOptions {
     ? { ...webpackOutputOptions, ...verboseWebpackOutputOptions }
     : webpackOutputOptions;
 }
+
+export function getMainFieldsAndConditionNames(
+  target: ScriptTarget,
+  platformServer: boolean,
+): Pick<WebpackOptionsNormalized['resolve'], 'mainFields' | 'conditionNames'> {
+  const mainFields = platformServer
+    ? ['es2015', 'module', 'main']
+    : ['es2015', 'browser', 'module', 'main'];
+  const conditionNames = ['es2015', '...'];
+
+  if (target >= ScriptTarget.ES2020) {
+    mainFields.unshift('es2020');
+    conditionNames.unshift('es2020');
+  }
+
+  return {
+    mainFields,
+    conditionNames,
+  };
+}