fix(@angular/ssr): resolve route parameters in redirect targets

Route parameters in the path of a `redirectTo` target, such as `:id` in `profile/:id`, were
sent unchanged in the `Location` header by the server, while the router replaces them with the
matching parameters of the current URL. The server now does the same.

Author: bschaeublin

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

@@ -485,9 +485,12 @@ async function* handleSSGRoute(
           redirectTo:
             redirectTo === undefined
               ? undefined
-              : resolveRedirectTo(
-                  parentRoute.replace(URL_PARAMETER_GLOBAL_REGEXP, replacer),
-                  redirectTo,
+              : replaceRedirectParams(
+                  resolveRedirectTo(
+                    parentRoute.replace(URL_PARAMETER_GLOBAL_REGEXP, replacer),
+                    redirectTo,
+                  ),
+                  (parameter) => params[parameter.slice(1)],
                 ),
         };
       }
@@ -563,6 +566,29 @@ function resolveRedirectTo(parentRoute: string, redirectTo: string): string {
   return joinUrlParts(parentRoute.replace(URL_PARAMETER_GLOBAL_REGEXP, '*'), path);
 }
 
+/**
+ * Replaces the route parameters, such as `:id`, in the path of `redirectTo`.
+ *
+ * Like in the Angular router, only whole path segments starting with `:` are parameters.
+ * Parameters for which `resolve` returns `undefined` are kept as is.
+ *
+ * @param redirectTo - The target path for redirection.
+ * @param resolve - A function that returns the replacement for a parameter, such as `:id`.
+ * @returns The redirect path with its route parameters replaced.
+ */
+function replaceRedirectParams(
+  redirectTo: string,
+  resolve: (parameter: string) => string | undefined,
+): string {
+  const [path] = redirectTo.split(/[?#]/, 1);
+  const resolvedPath = path
+    .split('/')
+    .map((segment) => (segment[0] === ':' ? (resolve(segment) ?? segment) : segment))
+    .join('/');
+
+  return resolvedPath + redirectTo.slice(path.length);
+}
+
 /**
  * Builds a server configuration route tree from the given server routes configuration.
  *
@@ -836,8 +862,19 @@ export function extractRoutesAndCreateRouteTree(options: {
     );
 
     for (const { route, ...metadata } of routes) {
+      const fullRoute = joinUrlParts(baseHref, route);
+
       if (metadata.redirectTo !== undefined) {
-        metadata.redirectTo = joinUrlParts(baseHref, metadata.redirectTo);
+        // Reference the route parameters by their position in the URL (see `buildPathWithParams`).
+        const routeSegments = fullRoute.split('/');
+        metadata.redirectTo = replaceRedirectParams(
+          joinUrlParts(baseHref, metadata.redirectTo),
+          (parameter) => {
+            const position = routeSegments.lastIndexOf(parameter);
+
+            return position === -1 ? undefined : `*${position}`;
+          },
+        );
       }
 
       // Remove undefined fields
@@ -849,7 +886,6 @@ export function extractRoutesAndCreateRouteTree(options: {
         }
       }
 
-      const fullRoute = joinUrlParts(baseHref, route);
       routeTree.insert(fullRoute, metadata);
     }
 

packages/angular/ssr/src/utils/url.ts

@@ -152,12 +152,19 @@ export function stripIndexHtmlFromURL(url: URL): URL {
   return url;
 }
 
+/**
+ * Matches a `*<n>` placeholder that makes up a whole path segment, which may be followed by
+ * the query or fragment of the URL.
+ */
+const POSITIONAL_PLACEHOLDER_REGEXP = /^\*(\d+)(?=[?#]|$)/;
+
 /**
  * Resolves `*` placeholders in a path template by mapping them to corresponding segments
  * from a base path. This is useful for constructing paths dynamically based on a given base path.
  *
  * The function processes the `toPath` string, replacing each `*` placeholder with
- * the corresponding segment from the `fromPath`. If the `toPath` contains no placeholders,
+ * the corresponding segment from the `fromPath`, and each `*<n>` placeholder with the
+ * segment at position `n` of the `fromPath`. If the `toPath` contains no placeholders,
  * it is returned as-is. Invalid `toPath` formats (not starting with `/`) will throw an error.
  *
  * @param toPath - A path template string that may contain `*` placeholders. Each `*` is replaced
@@ -176,6 +183,10 @@ export function stripIndexHtmlFromURL(url: URL): URL {
  * const resolvedPath = buildPathWithParams('/*\/details', '/123/abc');
  * console.log(resolvedPath); // Outputs: '/123/details'
  *
+ * // Example with a positional placeholder
+ * const positionalPath = buildPathWithParams('/user/*1', '/123/abc');
+ * console.log(positionalPath); // Outputs: '/user/123'
+ *
  * // Example with a static path
  * const staticPath = buildPathWithParams('/static/path', '/base/unused');
  * console.log(staticPath); // Outputs: '/static/path'
@@ -197,7 +208,9 @@ export function buildPathWithParams(toPath: string, fromPath: string): string {
   const fromPathParts = fromPath.split('/');
   const toPathParts = toPath.split('/');
   const resolvedParts = toPathParts.map((part, index) =>
-    toPathParts[index] === '*' ? fromPathParts[index] : part,
+    part === '*'
+      ? fromPathParts[index]
+      : part.replace(POSITIONAL_PLACEHOLDER_REGEXP, (_, position) => fromPathParts[position]),
   );
 
   return joinUrlParts(...resolvedParts);

packages/angular/ssr/test/app_spec.ts

@@ -90,6 +90,8 @@ describe('AngularServerApp', () => {
         { path: 'redirect/absolute', redirectTo: '/home' },
         { path: 'redirect-with-query', redirectTo: 'home?param=value' },
         { path: 'redirect-nested/:param', children: [{ path: 'old', redirectTo: 'new' }] },
+        { path: 'redirect-param/:a/:b', redirectTo: '/home/:b/:a' },
+        { path: 'redirect-param-relative/:id', redirectTo: 'target/:id' },
         {
           path: 'redirect-to-function',
           redirectTo: () => 'home',
@@ -252,6 +254,20 @@ describe('AngularServerApp', () => {
         expect(response?.status).toBe(302);
       });
 
+      it('should resolve route parameters in absolute redirect targets', async () => {
+        const response = await app.handle(new Request('http://localhost/redirect-param/x/y'));
+        expect(response?.headers.get('location')).toBe('/home/y/x');
+        expect(response?.status).toBe(302);
+      });
+
+      it('should resolve route parameters in relative redirect targets', async () => {
+        const response = await app.handle(
+          new Request('http://localhost/redirect-param-relative/7?filter=test'),
+        );
+        expect(response?.headers.get('location')).toBe('/target/7?filter=test');
+        expect(response?.status).toBe(302);
+      });
+
       it('should handle request abortion gracefully', async () => {
         const controller = new AbortController();
         const request = new Request('http://localhost/home', { signal: controller.signal });

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

@@ -489,6 +489,38 @@ describe('extractRoutesAndCreateRouteTree', () => {
         { route: '/new', renderMode: RenderMode.Server },
       ]);
     });
+
+    it('should resolve route parameters of redirect targets of prerendered routes', async () => {
+      setAngularAppTestingManifest(
+        [
+          { path: 'user/:id', redirectTo: '/profile/:id' },
+          { path: 'profile/:id', component: DummyComponent },
+        ],
+        [
+          {
+            path: 'user/:id',
+            renderMode: RenderMode.Prerender,
+            async getPrerenderParams() {
+              return [{ id: '7' }];
+            },
+          },
+          { path: '**', renderMode: RenderMode.Server },
+        ],
+      );
+
+      const { routeTree, errors } = await extractRoutesAndCreateRouteTree({
+        url,
+        invokeGetPrerenderParams: true,
+        includePrerenderFallbackRoutes: true,
+      });
+
+      expect(errors).toHaveSize(0);
+      expect(routeTree.toObject()).toEqual([
+        { route: '/user/7', renderMode: RenderMode.Prerender, redirectTo: '/profile/7' },
+        { route: '/user/*', renderMode: RenderMode.Server, redirectTo: '/profile/*2' },
+        { route: '/profile/*', renderMode: RenderMode.Server },
+      ]);
+    });
   });
 
   it('should extract routes with a route level matcher', async () => {
@@ -652,6 +684,36 @@ describe('extractRoutesAndCreateRouteTree', () => {
     ]);
   });
 
+  it('should reference route parameters of redirect targets by their position', async () => {
+    setAngularAppTestingManifest(
+      [
+        {
+          path: ':lang',
+          children: [
+            { path: 'user/:id', redirectTo: 'profile/:id' },
+            { path: 'profile/:id', component: DummyComponent },
+          ],
+        },
+        { path: 'search/:term', redirectTo: '/find/:term' },
+      ],
+      [{ path: '**', renderMode: RenderMode.Server }],
+    );
+
+    const { routeTree, errors } = await extractRoutesAndCreateRouteTree({ url });
+    expect(errors).toHaveSize(0);
+    expect(routeTree.toObject()).toEqual([
+      { route: '/*', renderMode: RenderMode.Server },
+      {
+        route: '/*/user/*',
+        renderMode: RenderMode.Server,
+        redirectTo: '/*/profile/*3',
+        relativeRedirect: true,
+      },
+      { route: '/*/profile/*', renderMode: RenderMode.Server },
+      { route: '/search/*', renderMode: RenderMode.Server, redirectTo: '/find/*2' },
+    ]);
+  });
+
   it('should resolve multi-segment relative redirects against the parent route', async () => {
     setAngularAppTestingManifest(
       [

packages/angular/ssr/test/utils/url_spec.ts

@@ -184,6 +184,15 @@ describe('URL Utils', () => {
       expect(result.toString()).toBe('/base/path/details');
     });
 
+    it('should replace positional placeholders with the segments at those positions', () => {
+      expect(buildPathWithParams('/user/*2/*1', '/a/b')).toBe('/user/b/a');
+    });
+
+    it('should replace a positional placeholder followed by a query or fragment', () => {
+      expect(buildPathWithParams('/user/*1?tab=1', '/a')).toBe('/user/a?tab=1');
+      expect(buildPathWithParams('/user/*1#top', '/a')).toBe('/user/a#top');
+    });
+
     it('should throw an error if the toPath does not start with "/"', () => {
       const fromPath = '/base/path';
       const toPath = 'details';