fix(@angular-devkit/build-angular): prefer ES2015 entrypoints when ap…

…plication 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

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

@@ -38,14 +38,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,
@@ -266,7 +276,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,
@@ -297,18 +307,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,
@@ -383,7 +390,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,
+  };
+}