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

goldens/public-api/angular/ssr/node/index.api.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { ApplicationRef } from '@angular/core';
+import { BootstrapContext } from '@angular/platform-browser';
 import { Http2ServerRequest } from 'node:http2';
 import { Http2ServerResponse } from 'node:http2';
 import { IncomingMessage } from 'node:http';
@@ -25,14 +26,14 @@ export class CommonEngine {
 
 // @public (undocumented)
 export interface CommonEngineOptions {
- bootstrap?: Type<{}> | (() => Promise<ApplicationRef>);
+ bootstrap?: Type<{}> | ((context: BootstrapContext) => Promise<ApplicationRef>);
  enablePerformanceProfiler?: boolean;
  providers?: StaticProvider[];
 }
 
 // @public (undocumented)
 export interface CommonEngineRenderOptions {
- bootstrap?: Type<{}> | (() => Promise<ApplicationRef>);
+ bootstrap?: Type<{}> | ((context: BootstrapContext) => Promise<ApplicationRef>);
  // (undocumented)
  document?: string;
  // (undocumented)

packages/angular/build/BUILD.bazel

@@ -87,6 +87,7 @@ ts_project(
  "//:node_modules/@angular/compiler-cli",
  "//:node_modules/@angular/core",
  "//:node_modules/@angular/localize",
+ "//:node_modules/@angular/platform-browser",
  "//:node_modules/@angular/platform-server",
  "//:node_modules/@angular/service-worker",
  "//:node_modules/@babel/core",

packages/angular/build/src/utils/server-rendering/load-esm-from-memory.ts

@@ -7,6 +7,7 @@
  */
 
 import type { ApplicationRef, Type } from '@angular/core';
+import type { BootstrapContext } from '@angular/platform-browser';
 import type { ɵextractRoutesAndCreateRouteTree, ɵgetOrCreateAngularServerApp } from '@angular/ssr';
 import { assertIsError } from '../error';
 import { loadEsmModule } from '../load-esm';
@@ -15,7 +16,7 @@ import { loadEsmModule } from '../load-esm';
  * Represents the exports available from the main server bundle.
  */
 interface MainServerBundleExports {
- default: (() => Promise<ApplicationRef>) | Type<unknown>;
+ default: ((context: BootstrapContext) => Promise<ApplicationRef>) | Type<unknown>;
  ɵextractRoutesAndCreateRouteTree: typeof ɵextractRoutesAndCreateRouteTree;
  ɵgetOrCreateAngularServerApp: typeof ɵgetOrCreateAngularServerApp;
 }

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';
@@ -22,7 +23,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[];
@@ -33,7 +34,7 @@ export interface CommonEngineOptions {
 
 export interface CommonEngineRenderOptions {
  /** 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 the current request. */
  providers?: StaticProvider[];
@@ -194,7 +195,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/manifest.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import type { BootstrapContext } from '@angular/platform-browser';
 import type { SerializableRouteTreeNode } from './routes/route-tree';
 import { AngularBootstrap } from './utils/ng';
 

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

@@ -629,7 +629,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/utils/ng.ts

@@ -8,6 +8,7 @@
 
 import { ɵConsole } from '@angular/core';
 import type { ApplicationRef, StaticProvider, Type } from '@angular/core';
+import { BootstrapContext } from '@angular/platform-browser';
 import {
  ɵSERVER_CONTEXT as SERVER_CONTEXT,
  renderApplication,
@@ -23,7 +24,9 @@ import { 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.

packages/angular/ssr/test/testing-utils.ts

@@ -91,16 +91,20 @@ export function setAngularAppTestingManifest(
  `,
  },
  },
- bootstrap: async () => () => {
- return bootstrapApplication(rootComponent, {
- providers: [
- provideServerRendering(),
- provideExperimentalZonelessChangeDetection(),
- provideRouter(routes),
- provideServerRouting(serverRoutes),
- ...extraProviders,
- ],
- });
+ bootstrap: async () => (context) => {
+ return bootstrapApplication(
+ rootComponent,
+ {
+ providers: [
+ provideServerRendering(),
+ provideExperimentalZonelessChangeDetection(),
+ provideRouter(routes),
+ provideServerRouting(serverRoutes),
+ ...extraProviders,
+ ],
+ },
+ context,
+ );
  },
  });
 }

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';
@@ -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);
 }