fix(@angular/ssr): disable component bootstrapping during route extraction

This commit disables component bootstrapping during route extraction to prevent invoking the AppComponent and its lifecycle hooks.

Closes angular#29085

Author: alan-agius4

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

@@ -7,7 +7,16 @@
  */
 
 import { APP_BASE_HREF, PlatformLocation } from '@angular/common';
-import { ApplicationRef, Compiler, Injector, runInInjectionContext, ɵConsole } from '@angular/core';
+import {
+  APP_INITIALIZER,
+  ApplicationRef,
+  Compiler,
+  ComponentRef,
+  Injector,
+  inject,
+  runInInjectionContext,
+  ɵConsole,
+} from '@angular/core';
 import { INITIAL_CONFIG, platformServer } from '@angular/platform-server';
 import {
   Route as AngularRoute,
@@ -483,6 +492,18 @@ export async function getRoutesFromAngularRouterConfig(
       // would also necessitate various patches of `@angular/bazel` to support ESM.
       useFactory: () => new Console(),
     },
+    {
+      // We cannot replace `ApplicationRef` with a different provider here due to the dependency injection (DI) hierarchy.
+      // This code is running at the platform level, where `ApplicationRef` is provided in the root injector.
+      // As a result, any attempt to replace it will cause the root provider to override the platform provider.
+      // TODO(alanagius): investigate exporting the app config directly which would help with: https://github.com/angular/angular/issues/59144
+      provide: APP_INITIALIZER,
+      multi: true,
+      useFactory: () => () => {
+        const appRef = inject(ApplicationRef);
+        appRef.bootstrap = () => undefined as unknown as ComponentRef<unknown>;
+      },
+    },
   ]);
 
   try {

packages/angular/ssr/test/routes/ng-routes_spec.ts

@@ -466,4 +466,33 @@ describe('extractRoutesAndCreateRouteTree', () => {
       { route: '/example/home', renderMode: RenderMode.Server },
     ]);
   });
+
+  it('should not bootstrap the root component', async () => {
+    @Component({
+      standalone: true,
+      selector: 'app-root',
+      template: '',
+    })
+    class RootComponent {
+      constructor() {
+        throw new Error('RootComponent should not be bootstrapped.');
+      }
+    }
+
+    setAngularAppTestingManifest(
+      [
+        { path: '', component: DummyComponent },
+        { path: 'home', component: DummyComponent },
+      ],
+      [{ path: '**', renderMode: RenderMode.Server }],
+      undefined,
+      undefined,
+      undefined,
+      RootComponent,
+    );
+
+    const { routeTree, errors } = await extractRoutesAndCreateRouteTree({ url });
+    expect(errors).toHaveSize(0);
+    expect(routeTree.toObject()).toHaveSize(2);
+  });
 });

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

@@ -6,14 +6,22 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { Component, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { Component, Type, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideServerRendering } from '@angular/platform-server';
 import { RouterOutlet, Routes, provideRouter } from '@angular/router';
 import { destroyAngularServerApp } from '../src/app';
 import { ServerAsset, setAngularAppManifest } from '../src/manifest';
 import { ServerRoute, provideServerRoutesConfig } from '../src/routes/route-config';
 
+@Component({
+  standalone: true,
+  selector: 'app-root',
+  template: '<router-outlet />',
+  imports: [RouterOutlet],
+})
+class AppComponent {}
+
 /**
  * Configures the Angular application for testing by setting up the Angular app manifest,
  * configuring server-side rendering, and bootstrapping the application with the provided routes.
@@ -26,24 +34,18 @@ import { ServerRoute, provideServerRoutesConfig } from '../src/routes/route-conf
  * @param additionalServerAssets - A record of additional server assets to include,
  *                                  where the keys are asset paths and the values are asset details.
  * @param locale - An optional locale to configure for the application during testing.
+ * @param rootComponent - The root Angular component to bootstrap the application.
  */
 export function setAngularAppTestingManifest(
   routes: Routes,
   serverRoutes: ServerRoute[],
   baseHref = '/',
   additionalServerAssets: Record<string, ServerAsset> = {},
   locale?: string,
+  rootComponent: Type<unknown> = AppComponent,
 ): void {
   destroyAngularServerApp();
 
-  @Component({
-    standalone: true,
-    selector: 'app-root',
-    template: '<router-outlet />',
-    imports: [RouterOutlet],
-  })
-  class AppComponent {}
-
   setAngularAppManifest({
     inlineCriticalCss: false,
     baseHref,
@@ -81,7 +83,7 @@ export function setAngularAppTestingManifest(
       },
     },
     bootstrap: async () => () => {
-      return bootstrapApplication(AppComponent, {
+      return bootstrapApplication(rootComponent, {
         providers: [
           provideServerRendering(),
           provideExperimentalZonelessChangeDetection(),