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

Author: alan-agius4

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/browser.ts

@@ -53,10 +53,6 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
 
   return {
     devtool: false,
-    resolve: {
-      mainFields: ['es2020', 'es2015', 'browser', 'module', 'main'],
-      conditionNames: ['es2020', 'es2015', '...'],
-    },
     output: {
       crossOriginLoading,
       trustedTypes: 'angular#bundler',

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

@@ -31,6 +31,7 @@ import { DedupeModuleResolvePlugin, ScriptsWebpackPlugin } from '../plugins';
 import { JavaScriptOptimizerPlugin } from '../plugins/javascript-optimizer-plugin';
 import {
   getInstrumentationExcludedPaths,
+  getMainFieldsAndConditionNames,
   getOutputHashFormat,
   getWatchOptions,
   normalizeExtraEntryPoints,
@@ -326,11 +327,13 @@ export async function getCommonConfig(
     );
   }
 
+  const isPlatformServer = platform === 'server';
+
   return {
     mode: scriptsOptimization || stylesOptimization.minify ? 'production' : 'development',
     devtool: false,
     target: [
-      platform === 'server' ? 'node' : 'web',
+      isPlatformServer ? 'node' : 'web',
       tsConfig.options.target === ScriptTarget.ES5 ? 'es5' : 'es2015',
     ],
     profile: buildOptions.statsJson,
@@ -339,6 +342,7 @@ export async function getCommonConfig(
       extensions: ['.ts', '.tsx', '.mjs', '.js'],
       symlinks: !buildOptions.preserveSymlinks,
       modules: [tsConfig.options.baseUrl || projectRoot, 'node_modules'],
+      ...getMainFieldsAndConditionNames(wco.scriptTarget, isPlatformServer),
     },
     resolveLoader: {
       symlinks: !buildOptions.preserveSymlinks,

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

@@ -32,10 +32,6 @@ export function getServerConfig(wco: WebpackConfigOptions): Configuration {
   }
 
   return {
-    resolve: {
-      mainFields: ['es2015', 'main', 'module'],
-      conditionNames: ['es2015', '...'],
-    },
     output: {
       libraryTarget: 'commonjs',
     },

packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts

@@ -8,7 +8,8 @@
 
 import glob from 'glob';
 import * as path from 'path';
-import { Configuration, SourceMapDevToolPlugin } from 'webpack';
+import { ScriptTarget } from 'typescript';
+import { Configuration, SourceMapDevToolPlugin, WebpackOptionsNormalized } from 'webpack';
 import { ExtraEntryPoint, ExtraEntryPointClass } from '../../builders/browser/schema';
 
 export interface HashFormat {
@@ -147,3 +148,23 @@ export function getInstrumentationExcludedPaths(
 
   return excluded;
 }
+
+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,
+  };
+}