fix(@angular/ssr): preserve preload metadata for nested empty-path routes

Previously, `handleRoute` yielded a parent route's metadata before appending `loadChildren` preloads or traversing child routes, while `traverseRoutesConfig` appended a trailing slash only to empty-path routes. Under a non-empty parent, the parent ('/pricing') and its empty-path child ('/pricing/') received distinct keys during `getRoutesFromAngularRouterConfig` deduplication (`seenRoutes`) and were only merged later by `RouteTree.insert`. However, when an empty-path route was nested under another empty-path route (such as at the root '/' or under '/es' -> '' -> ''), both the parent and child received the same key, causing `seenRoutes` to keep the outer route's metadata and drop the descendant's accumulated `preload` and redirect metadata.

Update `handleRoute` to append `loadChildren` preloads upfront and allow the first matching empty-path child route to override its parent's metadata for the same path, and remove the redundant `addTrailingSlash` keying in `traverseRoutesConfig`.

Closes #34320

Author: alan-agius4

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

@@ -31,7 +31,7 @@ import { AngularAppManifest, getAngularAppManifest } from '../manifest';
 import { AngularBootstrap, isNgModule } from '../utils/ng';
 import { promiseWithAbort } from '../utils/promise';
 import { VALID_REDIRECT_RESPONSE_CODES, isValidRedirectResponseCode } from '../utils/redirect';
-import { addTrailingSlash, joinUrlParts, stripLeadingSlash } from '../utils/url';
+import { joinUrlParts, stripLeadingSlash } from '../utils/url';
 import {
   PrerenderFallback,
   RenderMode,
@@ -170,20 +170,28 @@ async function* handleRoute(options: {
     } = options;
 
     const { redirectTo, loadChildren, loadComponent, children, ɵentryName } = route;
-    if (ɵentryName && loadComponent) {
+    if (ɵentryName && (loadComponent || loadChildren)) {
       appendPreloadToMetadata(ɵentryName, entryPointToBrowserMapping, metadata);
     }
 
+    const parentRoutes = new Map<string, RouteTreeNodeMetadata>();
+
     if (metadata.renderMode === RenderMode.Prerender) {
-      yield* handleSSGRoute(
+      for await (const result of handleSSGRoute(
         serverConfigRouteTree,
         typeof redirectTo === 'string' ? redirectTo : undefined,
         parentRoute,
         metadata,
         parentInjector,
         invokeGetPrerenderParams,
         includePrerenderFallbackRoutes,
-      );
+      )) {
+        if ('error' in result) {
+          yield result;
+        } else {
+          parentRoutes.set(result.route, result);
+        }
+      }
     } else if (redirectTo !== undefined) {
       if (metadata.status && !isValidRedirectResponseCode(metadata.status)) {
         yield {
@@ -192,34 +200,23 @@ async function* handleRoute(options: {
             `Please use one of the following redirect response codes: ${[...VALID_REDIRECT_RESPONSE_CODES.values()].join(', ')}.`,
         };
       } else if (typeof redirectTo === 'string') {
-        yield {
+        parentRoutes.set(metadata.route, {
           ...metadata,
           redirectTo: resolveRedirectTo(parentRoute, redirectTo),
           relativeRedirect: redirectTo[0] !== '/' ? true : undefined,
-        };
+        });
       } else {
-        yield metadata;
+        parentRoutes.set(metadata.route, metadata);
       }
     } else {
-      yield metadata;
+      parentRoutes.set(metadata.route, metadata);
     }
 
-    // Recursively process child routes
-    if (children?.length) {
-      yield* traverseRoutesConfig({
-        ...options,
-        routes: children,
-        parentRoute: currentRoutePath,
-        parentPreloads: metadata.preload,
-      });
-    }
-
-    // Load and process lazy-loaded child routes
-    if (loadChildren) {
-      if (ɵentryName) {
-        appendPreloadToMetadata(ɵentryName, entryPointToBrowserMapping, metadata);
-      }
+    // Recursively process child and lazy-loaded routes
+    let childRoutes: Route[] | undefined = children;
+    let childInjector = parentInjector;
 
+    if (!childRoutes?.length && loadChildren) {
       const routeInjector = route.providers
         ? createEnvironmentInjector(
             route.providers,
@@ -230,16 +227,48 @@ async function* handleRoute(options: {
 
       const loadedChildRoutes = await loadChildrenHelper(route, compiler, routeInjector);
       if (loadedChildRoutes) {
-        const { routes: childRoutes, injector = routeInjector } = loadedChildRoutes;
-        yield* traverseRoutesConfig({
-          ...options,
-          routes: childRoutes,
-          parentInjector: injector,
-          parentRoute: currentRoutePath,
-          parentPreloads: metadata.preload,
-        });
+        childRoutes = loadedChildRoutes.routes;
+        childInjector = loadedChildRoutes.injector ?? routeInjector;
       }
     }
+
+    if (!childRoutes?.length) {
+      yield* parentRoutes.values();
+
+      return;
+    }
+
+    const childResults: (RouteTreeNodeMetadata | { error: string })[] = [];
+    const overriddenParentRoutes = new Set<string>();
+    const traverseChildRoutes = traverseRoutesConfig({
+      ...options,
+      routes: childRoutes,
+      parentInjector: childInjector,
+      parentRoute: currentRoutePath,
+      parentPreloads: metadata.preload,
+    });
+
+    for await (const result of traverseChildRoutes) {
+      if ('error' in result) {
+        childResults.push(result);
+        continue;
+      }
+
+      // If a child route resolves to the exact same path as the parent (i.e., an empty-path child),
+      // let the first matching child override the parent's metadata so accumulated preloads and
+      // redirects from the activated descendant chain are preserved.
+      if (parentRoutes.has(result.route)) {
+        if (!overriddenParentRoutes.has(result.route)) {
+          overriddenParentRoutes.add(result.route);
+          parentRoutes.set(result.route, result);
+        }
+      } else {
+        childResults.push(result);
+      }
+    }
+
+    yield* parentRoutes.values();
+    yield* childResults;
   } catch (error) {
     yield {
       error: `Error in handleRoute for '${options.currentRoutePath}': ${(error as Error).message}`,
@@ -344,10 +373,7 @@ async function* traverseRoutesConfig(options: {
         renderMode: RenderMode.Prerender,
         ...matchedMetaData,
         preload: parentPreloads,
-        // Match Angular router behavior
-        // ['one', 'two', ''] -> 'one/two/'
-        // ['one', 'two', 'three'] -> 'one/two/three'
-        route: path === '' ? addTrailingSlash(currentRoutePath) : currentRoutePath,
+        route: currentRoutePath,
         presentInClientRouter: undefined,
       },
       currentRoutePath,

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

@@ -1044,4 +1044,95 @@ describe('extractRoutesAndCreateRouteTree', () => {
 
     expect(isDiscoveringRoutes).toBeTrue();
   });
+
+  it('should preserve preload metadata for routes under nested empty-path routes', async () => {
+    setAngularAppTestingManifest(
+      [
+        {
+          path: '',
+          children: [
+            {
+              path: '',
+              pathMatch: 'full',
+              loadChildren: () => [
+                {
+                  path: '',
+                  loadComponent: () => DummyComponent,
+                  ɵentryName: 'home-page',
+                } as Route,
+              ],
+              ɵentryName: 'home-routes',
+            } as Route,
+            {
+              path: '',
+              children: [
+                {
+                  path: 'pricing',
+                  loadChildren: () => [
+                    {
+                      path: '',
+                      loadComponent: () => DummyComponent,
+                      ɵentryName: 'pricing-page',
+                    } as Route,
+                  ],
+                  ɵentryName: 'pricing-routes',
+                } as Route,
+              ],
+            },
+          ],
+        },
+        {
+          path: 'es',
+          children: [
+            {
+              path: '',
+              pathMatch: 'full',
+              loadChildren: () => [
+                {
+                  path: '',
+                  loadComponent: () => DummyComponent,
+                  ɵentryName: 'home-page',
+                } as Route,
+              ],
+              ɵentryName: 'home-routes',
+            } as Route,
+          ],
+        },
+      ],
+      [{ path: '**', renderMode: RenderMode.Prerender }],
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      {
+        'home-routes': ['chunk-home-routes.js'],
+        'home-page': ['chunk-home-page.js'],
+        'pricing-routes': ['chunk-pricing-routes.js'],
+        'pricing-page': ['chunk-pricing-page.js'],
+      },
+    );
+
+    const { routeTree, errors } = await extractRoutesAndCreateRouteTree({ url });
+    expect(errors).toHaveSize(0);
+    expect(routeTree.toObject()).toEqual([
+      {
+        route: '/',
+        renderMode: RenderMode.Prerender,
+        preload: ['chunk-home-routes.js', 'chunk-home-page.js'],
+      },
+      {
+        route: '/pricing',
+        renderMode: RenderMode.Prerender,
+        preload: ['chunk-pricing-routes.js', 'chunk-pricing-page.js'],
+      },
+      {
+        route: '/es',
+        renderMode: RenderMode.Prerender,
+        preload: ['chunk-home-routes.js', 'chunk-home-page.js'],
+      },
+    ]);
+  });
 });

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

@@ -17,7 +17,7 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { RouterOutlet, Routes, provideRouter } from '@angular/router';
 import { type CompactPlan, compileSheet, encodePlan } from 'beasties/compiler';
 import { destroyAngularServerApp } from '../src/app';
-import { ServerAsset, setAngularAppManifest } from '../src/manifest';
+import { AngularAppManifest, ServerAsset, setAngularAppManifest } from '../src/manifest';
 import { ServerRoute, provideServerRendering, withRoutes } from '../src/routes/route-config';
 
 @Component({
@@ -44,6 +44,7 @@ class AppComponent {}
  *                         root component and all its children.
  * @param inlineCriticalCss - An optional record of stylesheet paths to CSS content to be compiled into critical CSS plans.
  * @param nonce - An optional Content Security Policy (CSP) nonce to be used for inlined critical CSS.
+ * @param entryPointToBrowserMapping - An optional mapping of entry-point names to their associated browser bundles.
  */
 export function setAngularAppTestingManifest(
   routes: Routes,
@@ -55,6 +56,7 @@ export function setAngularAppTestingManifest(
   extraProviders: Array<Provider | EnvironmentProviders> = [],
   inlineCriticalCss?: Record<string, string>,
   nonce?: string,
+  entryPointToBrowserMapping?: AngularAppManifest['entryPointToBrowserMapping'],
 ): void {
   destroyAngularServerApp();
 
@@ -70,6 +72,7 @@ export function setAngularAppTestingManifest(
   setAngularAppManifest({
     criticalCssPlans,
     nonce,
+    entryPointToBrowserMapping,
     baseHref,
     locale,
     assets: {