fix(@angular/build): minimize reliance on esbuild inject to prevent code reordering

Resolved an issue where the use of `esbuild`'s `inject` feature caused incorrect reordering of class structures during bundling. This reordering affected extended classes, as illustrated below: ```js class e extends Ur { constructor(n, r, i) { super(n, r, i); } ngOnDestroy() { this.flush(); } static ɵfac = function (r) { return new (r || e)(pe(Xe), pe(Ti), pe(Di)); }; static ɵprov = oe({ token: e, factory: e.ɵfac }); } var Ur = class { // Class properties and methods omitted for brevity }; ``` By reducing the reliance on `inject`, we ensure that the ordering of class properties and methods remains consistent, preserving the expected behavior. Closes #28941

Author: alan-agius4

packages/angular/build/src/tools/esbuild/application-code-bundle.ts

@@ -254,9 +254,7 @@ export function createServerMainCodeBundleOptions(
 
  return (loadResultCache) => {
  const pluginOptions = createCompilerPluginOptions(options, sourceFileCache, loadResultCache);
-
  const mainServerNamespace = 'angular:main-server';
- const mainServerInjectPolyfillsNamespace = 'angular:main-server-inject-polyfills';
  const mainServerInjectManifestNamespace = 'angular:main-server-inject-manifest';
  const zoneless = isZonelessApp(polyfills);
  const entryPoints: Record<string, string> = {
@@ -275,7 +273,9 @@ export function createServerMainCodeBundleOptions(
  const buildOptions: BuildOptions = {
  ...getEsBuildServerCommonOptions(options),
  target,
- inject: [mainServerInjectPolyfillsNamespace, mainServerInjectManifestNamespace],
+ banner: {
+ js: `import './polyfills.server.mjs';`,
+ },
  entryPoints,
  supported: getFeatureSupport(target, zoneless),
  plugins: [
@@ -311,18 +311,10 @@ export function createServerMainCodeBundleOptions(
 
  buildOptions.plugins.push(
  createServerBundleMetadata(),
- createVirtualModulePlugin({
- namespace: mainServerInjectPolyfillsNamespace,
- cache: loadResultCache,
- loadContent: () => ({
- contents: `import './polyfills.server.mjs';`,
- loader: 'js',
- resolveDir: workspaceRoot,
- }),
- }),
  createVirtualModulePlugin({
  namespace: mainServerInjectManifestNamespace,
  cache: loadResultCache,
+ entryPointOnly: false,
  loadContent: async () => {
  const contents: string[] = [
  // Configure `@angular/ssr` manifest.
@@ -348,16 +340,19 @@ export function createServerMainCodeBundleOptions(
  );
 
  const contents: string[] = [
- // Re-export all symbols including default export from 'main.server.ts'
- `export { default } from '${mainServerEntryPointJsImport}';`,
- `export * from '${mainServerEntryPointJsImport}';`,
+ // Inject manifest
+ `import '${mainServerInjectManifestNamespace}';`,
 
  // Add @angular/ssr exports
  `export {
- ɵdestroyAngularServerApp,
- ɵextractRoutesAndCreateRouteTree,
- ɵgetOrCreateAngularServerApp,
- } from '@angular/ssr';`,
+ ɵdestroyAngularServerApp,
+ ɵextractRoutesAndCreateRouteTree,
+ ɵgetOrCreateAngularServerApp,
+ } from '@angular/ssr';`,
+
+ // Re-export all symbols including default export from 'main.server.ts'
+ `export { default } from '${mainServerEntryPointJsImport}';`,
+ `export * from '${mainServerEntryPointJsImport}';`,
  ];
 
  return {
@@ -392,22 +387,24 @@ export function createSsrEntryCodeBundleOptions(
 
  return (loadResultCache) => {
  const pluginOptions = createCompilerPluginOptions(options, sourceFileCache, loadResultCache);
-
  const ssrEntryNamespace = 'angular:ssr-entry';
  const ssrInjectManifestNamespace = 'angular:ssr-entry-inject-manifest';
- const ssrInjectRequireNamespace = 'angular:ssr-entry-inject-require';
  const isNodePlatform = options.ssrOptions?.platform !== ExperimentalPlatform.Neutral;
 
- const inject: string[] = [ssrInjectManifestNamespace];
- if (isNodePlatform) {
- inject.unshift(ssrInjectRequireNamespace);
- }
-
  const buildOptions: BuildOptions = {
  ...getEsBuildServerCommonOptions(options),
  target,
+ banner: isNodePlatform
+ ? {
+ js: [
+ // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
+ // See: https://github.com/evanw/esbuild/issues/1921.
+ `import { createRequire } from 'node:module';`,
+ `globalThis['require'] ??= createRequire(import.meta.url);`,
+ ].join('\n'),
+ }
+ : undefined,
  entryPoints: {
- // TODO: consider renaming to index
  'server': ssrEntryNamespace,
  },
  supported: getFeatureSupport(target, true),
@@ -420,7 +417,6 @@ export function createSsrEntryCodeBundleOptions(
  stylesheetBundler,
  ),
  ],
- inject,
  };
 
  buildOptions.plugins ??= [];
@@ -443,27 +439,10 @@ export function createSsrEntryCodeBundleOptions(
 
  buildOptions.plugins.push(
  createServerBundleMetadata({ ssrEntryBundle: true }),
- createVirtualModulePlugin({
- namespace: ssrInjectRequireNamespace,
- cache: loadResultCache,
- loadContent: () => {
- const contents: string[] = [
- // Note: Needed as esbuild does not provide require shims / proxy from ESModules.
- // See: https://github.com/evanw/esbuild/issues/1921.
- `import { createRequire } from 'node:module';`,
- `globalThis['require'] ??= createRequire(import.meta.url);`,
- ];
-
- return {
- contents: contents.join('\n'),
- loader: 'js',
- resolveDir: workspaceRoot,
- };
- },
- }),
  createVirtualModulePlugin({
  namespace: ssrInjectManifestNamespace,
  cache: loadResultCache,
+ entryPointOnly: false,
  loadContent: () => {
  const contents: string[] = [
  // Configure `@angular/ssr` app engine manifest.
@@ -488,6 +467,9 @@ export function createSsrEntryCodeBundleOptions(
  serverEntryPoint,
  );
  const contents: string[] = [
+ // Configure `@angular/ssr` app engine manifest.
+ `import '${ssrInjectManifestNamespace}';`,
+
  // Re-export all symbols including default export
  `import * as server from '${serverEntryPointJsImport}';`,
  `export * from '${serverEntryPointJsImport}';`,

tests/legacy-cli/e2e/tests/build/server-rendering/server-routes-output-mode-server-platform-neutral.ts

@@ -11,6 +11,7 @@ import {
 import { updateJsonFile, useSha } from '../../../utils/project';
 import { getGlobalVariable } from '../../../utils/env';
 import { findFreePort } from '../../../utils/network';
+import { readFile } from 'node:fs/promises';
 
 export default async function () {
  assert(
@@ -68,6 +69,10 @@ export default async function () {
  },
  ];
  `,
+ 'src/app/app.config.ts': `
+ import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+ ${(await readFile('src/app/app.config.ts', 'utf8')).replace('provideRouter(routes),', 'provideAnimationsAsync(), provideRouter(routes),')}
+ `,
  'src/server.ts': `
  import { AngularAppEngine, createRequestHandler } from '@angular/ssr';
  import { createApp, createRouter, toWebHandler, defineEventHandler, toWebRequest } from 'h3';