fix(@angular/ssr): resolve query parameter placeholders in redirect targets (#34321)

Query parameters of an absolute `redirectTo` target whose value is a placeholder, such as
`q=:term`, were sent unchanged in the `Location` header by the server, while the router replaces
them with the values of the matching query parameters of the current URL. The server now does
the same.

Query parameters whose source parameter is missing in the current URL are left out, which
matches the `undefined` value that the router assigns to them.

PR Close #34321

Author: bschaeublin

packages/angular/ssr/src/app.ts

@@ -24,7 +24,12 @@ import { ServerRouter } from './routes/router';
 import { AngularBootstrap, renderAngular } from './utils/ng';
 import { promiseWithAbort } from './utils/promise';
 import { createRedirectResponse } from './utils/redirect';
-import { buildPathWithParams, joinUrlParts, stripLeadingSlash } from './utils/url';
+import {
+  buildPathWithParams,
+  buildQueryWithParams,
+  joinUrlParts,
+  stripLeadingSlash,
+} from './utils/url';
 import { getFirstHeaderValue } from './utils/validation';
 
 /**
@@ -174,7 +179,7 @@ export class AngularServerApp {
 
       // Match Angular router behavior: relative redirects keep the query string.
       return createRedirectResponse(
-        relativeRedirect ? location + url.search : location,
+        relativeRedirect ? location + url.search : buildQueryWithParams(location, url.searchParams),
         status,
         headers,
       );

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

@@ -216,6 +216,62 @@ export function buildPathWithParams(toPath: string, fromPath: string): string {
   return joinUrlParts(...resolvedParts) + toPath.slice(path.length);
 }
 
+/**
+ * Resolves `:name` placeholders in the query of a URL, like the Angular router does for redirects.
+ *
+ * Each query parameter whose value is a `:name` placeholder gets the values of the `name`
+ * query parameter of `fromParams`, or `undefined` if `fromParams` has no such parameter.
+ * Like in the Angular router, placeholders of repeated query parameters are not resolved.
+ *
+ * @param toUrl - A URL whose query may contain `:name` placeholders.
+ * @param fromParams - The query parameters that provide the values for the placeholders.
+ * @returns The URL with its query placeholders resolved.
+ *
+ * @example
+ * ```typescript
+ * buildQueryWithParams('/find?q=:x', new URLSearchParams('x=cats')); // returns '/find?q=cats'
+ * ```
+ */
+export function buildQueryWithParams(toUrl: string, fromParams: URLSearchParams): string {
+  const [, path, query, fragment] = /^([^?#]*)\?([^#]*)(.*)$/.exec(toUrl) ?? [];
+  if (query === undefined) {
+    return toUrl;
+  }
+
+  const params = query.split('&');
+  const names = params.map((param) => param.split('=', 1)[0]);
+  const resolvedQuery = params
+    .map((param, index) => {
+      const name = names[index];
+      const value = param.slice(name.length + 1);
+      if (value[0] !== ':' || names.indexOf(name) !== names.lastIndexOf(name)) {
+        return param;
+      }
+
+      const sourceValues = fromParams.getAll(value.slice(1));
+
+      return (sourceValues.length ? sourceValues : ['undefined'])
+        .map((sourceValue) => `${name}=${encodeQueryValue(sourceValue)}`)
+        .join('&');
+    })
+    .join('&');
+
+  return `${path}?${resolvedQuery}${fragment}`;
+}
+
+/**
+ * Encodes a query parameter value like the Angular router (`DefaultUrlSerializer`), which keeps
+ * `@`, `:`, `$`, `,` and `;` as is.
+ *
+ * @param value - The query parameter value to encode.
+ * @returns The encoded query parameter value.
+ */
+function encodeQueryValue(value: string): string {
+  return encodeURIComponent(value).replace(/%(40|3A|24|2C|3B)/g, (match) =>
+    decodeURIComponent(match),
+  );
+}
+
 const MATRIX_PARAMS_REGEX = /;[^/]+/g;
 
 /**

packages/angular/ssr/test/app_spec.ts

@@ -92,6 +92,10 @@ describe('AngularServerApp', () => {
         { 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-query-placeholder',
+          redirectTo: '/home?q=:term&id=:missing&static=value',
+        },
         {
           path: 'redirect-to-function',
           redirectTo: () => 'home',
@@ -268,6 +272,16 @@ describe('AngularServerApp', () => {
         expect(response?.status).toBe(302);
       });
 
+      it('should resolve query parameters in absolute redirect targets', async () => {
+        const response = await app.handle(
+          new Request('http://localhost/redirect-query-placeholder?term=cats&term=dogs'),
+        );
+        expect(response?.headers.get('location')).toBe(
+          '/home?q=cats&q=dogs&id=undefined&static=value',
+        );
+        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/utils/url_spec.ts

@@ -10,6 +10,7 @@ import {
   addLeadingSlash,
   addTrailingSlash,
   buildPathWithParams,
+  buildQueryWithParams,
   joinUrlParts,
   stripIndexHtmlFromURL,
   stripLeadingSlash,
@@ -204,6 +205,27 @@ describe('URL Utils', () => {
     });
   });
 
+  describe('buildQueryWithParams', () => {
+    it('should replace query placeholders with the values of the source parameters', () => {
+      const fromParams = new URLSearchParams('term=big cats&term=a:b@c&page=2');
+      expect(buildQueryWithParams('/search?q=:term&p=:page&static=a=:b#top', fromParams)).toBe(
+        '/search?q=big%20cats&q=a:b@c&p=2&static=a=:b#top',
+      );
+    });
+
+    it('should set query parameters whose source parameter is missing to undefined', () => {
+      const fromParams = new URLSearchParams();
+      expect(buildQueryWithParams('/search?q=:term&static=1', fromParams)).toBe(
+        '/search?q=undefined&static=1',
+      );
+    });
+
+    it('should not replace placeholders of repeated query parameters', () => {
+      const fromParams = new URLSearchParams('a=1&b=2');
+      expect(buildQueryWithParams('/search?q=:a&q=:b', fromParams)).toBe('/search?q=:a&q=:b');
+    });
+  });
+
   describe('stripMatrixParams', () => {
     it('should remove a single matrix parameter', () => {
       expect(stripMatrixParams('/path;param=value')).toBe('/path');