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

alan-agius4 · alan-agius4 · commit f0b0980fbd55 · 2025-09-10T18:59:25.000+02:00
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 = () =&gt; bootstrapApplication(AppComponent, config);
```

After:
```ts
const bootstrap = (context: BootstrapContext) =&gt;
  bootstrapApplication(AppComponent, config, context);
```
diff --git a/goldens/public-api/angular/ssr/node/index.api.md b/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';
@@ -26,14 +27,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)
diff --git a/packages/angular/build/BUILD.bazel b/packages/angular/build/BUILD.bazel
@@ -124,6 +124,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/@types/babel__core",
diff --git a/packages/angular/build/src/utils/server-rendering/load-esm-from-memory.ts b/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;
 }
diff --git a/packages/angular/ssr/node/src/common-engine/common-engine.ts b/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[];
@@ -34,7 +35,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[];
@@ -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);
 }
diff --git a/packages/angular/ssr/src/manifest.ts b/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';
 
diff --git a/packages/angular/ssr/src/routes/ng-routes.ts b/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;
diff --git a/packages/angular/ssr/src/routes/route-config.ts b/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
diff --git a/packages/angular/ssr/src/utils/ng.ts b/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.
diff --git a/packages/angular/ssr/test/testing-utils.ts b/packages/angular/ssr/test/testing-utils.ts
@@ -90,15 +90,19 @@ export function setAngularAppTestingManifest(
       `,
       },
     },
-    bootstrap: async () => () => {
-      return bootstrapApplication(rootComponent, {
-        providers: [
-          provideZonelessChangeDetection(),
-          provideRouter(routes),
-          provideServerRendering(withRoutes(serverRoutes)),
-          ...extraProviders,
-        ],
-      });
+    bootstrap: async () => (context) => {
+      return bootstrapApplication(
+        rootComponent,
+        {
+          providers: [
+            provideZonelessChangeDetection(),
+            provideRouter(routes),
+            provideServerRendering(withRoutes(serverRoutes)),
+            ...extraProviders,
+          ],
+        },
+        context,
+      );
     },
   });
 }
diff --git a/packages/angular_devkit/build_angular/src/builders/app-shell/render-worker.ts b/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);
 }
diff --git a/packages/angular_devkit/build_angular/src/builders/prerender/render-worker.ts b/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);
 }
diff --git a/packages/angular_devkit/build_angular/src/builders/prerender/routes-extractor-worker.ts b/packages/angular_devkit/build_angular/src/builders/prerender/routes-extractor-worker.ts
@@ -7,6 +7,7 @@
  */
 
 import type { ApplicationRef, Type } from '@angular/core';
+import type { BootstrapContext } from '@angular/platform-browser';
 import type { ɵgetRoutesFromAngularRouterConfig } from '@angular/ssr';
 import assert from 'node:assert';
 import * as fs from 'node:fs';
@@ -25,7 +26,7 @@ interface ServerBundleExports {
   AppServerModule?: Type<unknown>;
 
   /** Standalone application bootstrapping function. */
-  default?: (() => Promise<ApplicationRef>) | Type<unknown>;
+  default?: ((context: BootstrapContext) => Promise<ApplicationRef>) | Type<unknown>;
 
   /** Method to extract routes from the router config. */
   ɵgetRoutesFromAngularRouterConfig: typeof ɵgetRoutesFromAngularRouterConfig;
diff --git a/packages/schematics/angular/server/files/application-builder/standalone-src/main.server.ts.template b/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, context);
 
 export default bootstrap;
diff --git a/packages/schematics/angular/server/files/server-builder/standalone-src/main.server.ts.template b/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, context);
 
 export default bootstrap;
diff --git a/packages/schematics/angular/server/index_spec.ts b/packages/schematics/angular/server/index_spec.ts
@@ -201,7 +201,7 @@ describe('Server Schematic', () => {
       const filePath = '/projects/bar/src/main.server.ts';
       expect(tree.exists(filePath)).toBeTrue();
       const contents = tree.readContent(filePath);
-      expect(contents).toContain(`bootstrapApplication(App, config)`);
+      expect(contents).toContain(`bootstrapApplication(App, config, context)`);
     });
 
     it('should account for renamed app component', async () => {
@@ -212,7 +212,7 @@ describe('Server Schematic', () => {
         import { appConfig } from './app/app.config';
         import { MyCustomApp } from './foo/bar/baz/app.foo';
 
-        bootstrapApplication(MyCustomApp, appConfig)
+        bootstrapApplication(MyCustomApp, appConfig, context)
           .catch((err) => console.error(err));
       `,
       );
@@ -222,7 +222,7 @@ describe('Server Schematic', () => {
       expect(tree.exists(filePath)).toBeTrue();
       const contents = tree.readContent(filePath);
       expect(contents).toContain(`import { MyCustomApp } from './foo/bar/baz/app.foo';`);
-      expect(contents).toContain(`bootstrapApplication(MyCustomApp, config)`);
+      expect(contents).toContain(`bootstrapApplication(MyCustomApp, config, context)`);
     });
 
     it('should account for renamed app component that is aliased within the main file', async () => {
@@ -243,7 +243,7 @@ describe('Server Schematic', () => {
       expect(tree.exists(filePath)).toBeTrue();
       const contents = tree.readContent(filePath);
       expect(contents).toContain(`import { MyCustomApp } from './foo/bar/baz/app.foo';`);
-      expect(contents).toContain(`bootstrapApplication(MyCustomApp, config)`);
+      expect(contents).toContain(`bootstrapApplication(MyCustomApp, config, context)`);
     });
 
     it('should create server app config file', async () => {

Original file line number	Diff line number	Diff line change
`@@ -634,7 +634,7 @@ export async function getRoutesFromAngularRouterConfig(`
`634`	`634`	`const moduleRef = await platformRef.bootstrapModule(bootstrap);`
`635`	`635`	`applicationRef = moduleRef.injector.get(ApplicationRef);`
`636`	`636`	`} else {`
`637`		`- applicationRef = await bootstrap();`
	`637`	`+ applicationRef = await bootstrap({ platformRef });`
`638`	`638`	`}`
`639`	`639`
`640`	`640`	`const injector = applicationRef.injector;`