fix(@angular-devkit/build-angular): prefer ES2015 entrypoints when application targets ES2019 or lower

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();
   });
 });

packages/angular_devkit/build_angular/src/webpack/configs/common.ts

@@ -39,14 +39,24 @@ import {
   externalizePackages,
   getCacheSettings,
   getInstrumentationExcludedPaths,
+  getMainFieldsAndConditionNames,
   getOutputHashFormat,
   getStatsOptions,
   globalScriptsByBundleName,
 } from '../utils/helpers';
 
 // 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,18 +324,15 @@ 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: {
       roots: [projectRoot],
       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

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,
+  };
+}