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

constants.bzl

@@ -3,8 +3,8 @@ RELEASE_ENGINES_NODE = "^20.19.0 || ^22.12.0 || >=24.0.0"
 RELEASE_ENGINES_NPM = "^6.11.0 || ^7.5.6 || >=8.0.0"
 RELEASE_ENGINES_YARN = ">= 1.13.0"
 
-NG_PACKAGR_VERSION = "^20.2.0"
-ANGULAR_FW_VERSION = "^20.2.0"
+NG_PACKAGR_VERSION = "^20.3.0"
+ANGULAR_FW_VERSION = "^20.3.0"
 ANGULAR_FW_PEER_DEP = "^20.0.0"
 NG_PACKAGR_PEER_DEP = "^20.0.0"
 

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)

package.json

@@ -46,20 +46,20 @@
   },
   "homepage": "https://github.com/angular/angular-cli",
   "devDependencies": {
-    "@angular/animations": "20.2.4",
+    "@angular/animations": "20.3.0",
     "@angular/cdk": "20.2.2",
-    "@angular/common": "20.2.4",
-    "@angular/compiler": "20.2.4",
-    "@angular/compiler-cli": "20.2.4",
-    "@angular/core": "20.2.4",
-    "@angular/forms": "20.2.4",
-    "@angular/localize": "20.2.4",
+    "@angular/common": "20.3.0",
+    "@angular/compiler": "20.3.0",
+    "@angular/compiler-cli": "20.3.0",
+    "@angular/core": "20.3.0",
+    "@angular/forms": "20.3.0",
+    "@angular/localize": "20.3.0",
     "@angular/material": "20.2.2",
     "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#1b75cbad43a688705205725df89bf311a8d08652",
-    "@angular/platform-browser": "20.2.4",
-    "@angular/platform-server": "20.2.4",
-    "@angular/router": "20.2.4",
-    "@angular/service-worker": "20.2.4",
+    "@angular/platform-browser": "20.3.0",
+    "@angular/platform-server": "20.3.0",
+    "@angular/router": "20.3.0",
+    "@angular/service-worker": "20.3.0",
     "@bazel/bazelisk": "1.26.0",
     "@bazel/buildifier": "8.2.1",
     "@eslint/compat": "1.3.2",

packages/angular/build/BUILD.bazel

@@ -123,6 +123,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",

packages/angular/build/package.json

@@ -53,7 +53,7 @@
     "@angular-devkit/core": "workspace:*",
     "jsdom": "26.1.0",
     "less": "4.4.0",
-    "ng-packagr": "20.2.0",
+    "ng-packagr": "20.3.0",
     "postcss": "8.5.6",
     "rxjs": "7.8.2",
     "vitest": "3.2.4"

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/BUILD.bazel

@@ -30,6 +30,7 @@ ts_project(
     deps = [
         "//:node_modules/@angular/common",
         "//:node_modules/@angular/core",
+        "//:node_modules/@angular/platform-browser",
         "//:node_modules/@angular/platform-server",
         "//:node_modules/@angular/router",
         "//:node_modules/tslib",

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

packages/angular/ssr/package.json

@@ -29,12 +29,12 @@
   },
   "devDependencies": {
     "@angular-devkit/schematics": "workspace:*",
-    "@angular/common": "20.2.4",
-    "@angular/compiler": "20.2.4",
-    "@angular/core": "20.2.4",
-    "@angular/platform-browser": "20.2.4",
-    "@angular/platform-server": "20.2.4",
-    "@angular/router": "20.2.4",
+    "@angular/common": "20.3.0",
+    "@angular/compiler": "20.3.0",
+    "@angular/core": "20.3.0",
+    "@angular/platform-browser": "20.3.0",
+    "@angular/platform-server": "20.3.0",
+    "@angular/router": "20.3.0",
     "@schematics/angular": "workspace:*"
   },
   "sideEffects": false,

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

@@ -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/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,
+      );
     },
   });
 }

packages/angular_devkit/build_angular/BUILD.bazel

@@ -184,6 +184,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",

packages/angular_devkit/build_angular/package.json

@@ -68,7 +68,7 @@
     "@angular/ssr": "workspace:*",
     "@web/test-runner": "0.20.2",
     "browser-sync": "3.0.4",
-    "ng-packagr": "20.2.0",
+    "ng-packagr": "20.3.0",
     "undici": "7.13.0"
   },
   "peerDependencies": {

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/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;

packages/ngtools/webpack/package.json

@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@angular-devkit/core": "workspace:0.0.0-PLACEHOLDER",
-    "@angular/compiler": "20.2.4",
-    "@angular/compiler-cli": "20.2.4",
+    "@angular/compiler": "20.3.0",
+    "@angular/compiler-cli": "20.3.0",
     "typescript": "5.9.2",
     "webpack": "5.101.2"
   }

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;

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;