feat(@angular/ssr): introduce BootstrapContext for isolated server-side rendering

This commit introduces a number of changes to the server bootstrapping process to make it more robust and less error-prone, especially for concurrent requests.

Previously, the server rendering process relied on a module-level global platform injector. This could lead to issues in server-side rendering environments where multiple requests are processed concurrently, as they could inadvertently share or overwrite the global injector state.

The new approach introduces a `BootstrapContext` that is passed to the `bootstrapApplication` function. This context provides a platform reference that is scoped to the individual request, ensuring that each server-side render has an isolated platform injector. This prevents state leakage between concurrent requests and makes the overall process more reliable.

BREAKING CHANGE:
The server-side bootstrapping process has been changed to eliminate the reliance on a global platform injector.

Before:
```ts
const bootstrap = () => bootstrapApplication(AppComponent, config);
```

After:
```ts
const bootstrap = (context: BootstrapContext) =>
  bootstrapApplication(AppComponent, config, context);
```

Author: alan-agius4

packages/angular/ssr/node/src/common-engine/common-engine.ts

@@ -7,6 +7,7 @@
  */
 
 import { ApplicationRef, StaticProvider, Type } from '@angular/core';
+import { BootstrapContext } from '@angular/platform-browser';
 import { renderApplication, renderModule, ɵSERVER_CONTEXT } from '@angular/platform-server';
 import * as fs from 'node:fs';
 import { dirname, join, normalize, resolve } from 'node:path';
@@ -23,7 +24,7 @@ const SSG_MARKER_REGEXP = /ng-server-context=["']\w*\|?ssg\|?\w*["']/;
 
 export interface CommonEngineOptions {
   /** A method that when invoked returns a promise that returns an `ApplicationRef` instance once resolved or an NgModule. */
-  bootstrap?: Type<{}> | (() => Promise<ApplicationRef>);
+  bootstrap?: Type<{}> | ((context: BootstrapContext) => Promise<ApplicationRef>);
 
   /** A set of platform level providers for all requests. */
   providers?: StaticProvider[];
@@ -197,7 +198,9 @@ async function exists(path: fs.PathLike): Promise<boolean> {
   }
 }
 
-function isBootstrapFn(value: unknown): value is () => Promise<ApplicationRef> {
+function isBootstrapFn(
+  value: unknown,
+): value is (context: BootstrapContext) => Promise<ApplicationRef> {
   // We can differentiate between a module and a bootstrap function by reading compiler-generated `ɵmod` static property:
   return typeof value === 'function' && !('ɵmod' in value);
 }

packages/angular/ssr/src/routes/ng-routes.ts

@@ -634,7 +634,7 @@ export async function getRoutesFromAngularRouterConfig(
       const moduleRef = await platformRef.bootstrapModule(bootstrap);
       applicationRef = moduleRef.injector.get(ApplicationRef);
     } else {
-      applicationRef = await bootstrap();
+      applicationRef = await bootstrap({ platformRef });
     }
 
     const injector = applicationRef.injector;

packages/angular/ssr/src/routes/route-config.ts

@@ -356,20 +356,23 @@ export function withAppShell(
  * when using the `bootstrapApplication` function:
  *
  * ```ts
- * import { bootstrapApplication } from '@angular/platform-browser';
+ * import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
  * import { provideServerRendering, withRoutes, withAppShell } from '@angular/ssr';
  * import { AppComponent } from './app/app.component';
  * import { SERVER_ROUTES } from './app/app.server.routes';
  * import { AppShellComponent } from './app/app-shell.component';
  *
- * bootstrapApplication(AppComponent, {
- *   providers: [
- *      provideServerRendering(
- *         withRoutes(SERVER_ROUTES),
- *         withAppShell(AppShellComponent)
- *      )
- *   ]
- * });
+ * const bootstrap = (context: BootstrapContext) =>
+ *     bootstrapApplication(AppComponent, {
+ *       providers: [
+ *         provideServerRendering(
+ *           withRoutes(SERVER_ROUTES),
+ *           withAppShell(AppShellComponent),
+ *         ),
+ *       ],
+ *     }, context);
+ *
+ * export default bootstrap;
  * ```
  * @see {@link withRoutes} configures server-side routing
  * @see {@link withAppShell} configures the application shell

packages/angular/ssr/src/utils/ng.ts

@@ -14,6 +14,7 @@ import {
   type Type,
   ɵConsole,
 } from '@angular/core';
+import { BootstrapContext } from '@angular/platform-browser';
 import {
   INITIAL_CONFIG,
   ɵSERVER_CONTEXT as SERVER_CONTEXT,
@@ -31,7 +32,9 @@ import { joinUrlParts, stripIndexHtmlFromURL } from './url';
  * - A reference to an Angular component or module (`Type<unknown>`) that serves as the root of the application.
  * - A function that returns a `Promise<ApplicationRef>`, which resolves with the root application reference.
  */
-export type AngularBootstrap = Type<unknown> | (() => Promise<ApplicationRef>);
+export type AngularBootstrap =
+  | Type<unknown>
+  | ((context: BootstrapContext) => Promise<ApplicationRef>);
 
 /**
  * Renders an Angular application or module to an HTML string.
@@ -90,7 +93,7 @@ export async function renderAngular(
       const moduleRef = await platformRef.bootstrapModule(bootstrap);
       applicationRef = moduleRef.injector.get(ApplicationRef);
     } else {
-      applicationRef = await bootstrap();
+      applicationRef = await bootstrap({ platformRef });
     }
 
     // Block until application is stable.

packages/angular_devkit/build_angular/src/builders/app-shell/render-worker.ts

@@ -7,6 +7,7 @@
  */
 
 import type { ApplicationRef, StaticProvider, Type } from '@angular/core';
+import type { BootstrapContext } from '@angular/platform-browser';
 import type { renderApplication, renderModule, ɵSERVER_CONTEXT } from '@angular/platform-server';
 import assert from 'node:assert';
 import { workerData } from 'node:worker_threads';
@@ -33,7 +34,7 @@ interface ServerBundleExports {
   renderApplication?: typeof renderApplication;
 
   /** Standalone application bootstrapping function. */
-  default?: () => Promise<ApplicationRef>;
+  default?: (context: BootstrapContext) => Promise<ApplicationRef>;
 }
 
 /**
@@ -121,7 +122,9 @@ async function render({ serverBundlePath, document, url }: RenderRequest): Promi
   return Promise.race([renderAppPromise, renderingTimeout]).finally(() => clearTimeout(timer));
 }
 
-function isBootstrapFn(value: unknown): value is () => Promise<ApplicationRef> {
+function isBootstrapFn(
+  value: unknown,
+): value is (context: BootstrapContext) => Promise<ApplicationRef> {
   // We can differentiate between a module and a bootstrap function by reading compiler-generated `ɵmod` static property:
   return typeof value === 'function' && !('ɵmod' in value);
 }

packages/angular_devkit/build_angular/src/builders/prerender/render-worker.ts

@@ -7,6 +7,7 @@
  */
 
 import type { ApplicationRef, StaticProvider, Type } from '@angular/core';
+import type { BootstrapContext } from '@angular/platform-browser';
 import type { renderApplication, renderModule, ɵSERVER_CONTEXT } from '@angular/platform-server';
 import assert from 'node:assert';
 import * as fs from 'node:fs';
@@ -42,7 +43,7 @@ interface ServerBundleExports {
   renderApplication?: typeof renderApplication;
 
   /** Standalone application bootstrapping function. */
-  default?: (() => Promise<ApplicationRef>) | Type<unknown>;
+  default?: ((context: BootstrapContext) => Promise<ApplicationRef>) | Type<unknown>;
 }
 
 /**
@@ -148,7 +149,9 @@ async function render({
   return result;
 }
 
-function isBootstrapFn(value: unknown): value is () => Promise<ApplicationRef> {
+function isBootstrapFn(
+  value: unknown,
+): value is (context: BootstrapContext) => Promise<ApplicationRef> {
   // We can differentiate between a module and a bootstrap function by reading compiler-generated `ɵmod` static property:
   return typeof value === 'function' && !('ɵmod' in value);
 }

packages/schematics/angular/server/files/application-builder/standalone-src/main.server.ts.template

@@ -1,7 +1,8 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
 import { <%= appComponentName %> } from '<%= appComponentPath %>';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(<%= appComponentName %>, config);
+const bootstrap = (context: BootstrapContext) =>
+    bootstrapApplication(<%= appComponentName %>, config, BootstrapContext);
 
 export default bootstrap;

packages/schematics/angular/server/files/server-builder/standalone-src/main.server.ts.template

@@ -1,7 +1,8 @@
-import { bootstrapApplication } from '@angular/platform-browser';
+import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
 import { <%= appComponentName %> } from '<%= appComponentPath %>';
 import { config } from './app/app.config.server';
 
-const bootstrap = () => bootstrapApplication(<%= appComponentName %>, config);
+const bootstrap = (context: BootstrapContext) =>
+    bootstrapApplication(<%= appComponentName %>, config, BootstrapContext);
 
 export default bootstrap;