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

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.

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';
 
 /**
  * A set of well-known URLs that are not handled by Angular.
@@ -173,7 +178,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,43 @@ export function buildPathWithParams(toPath: string, fromPath: string): string {
   return joinUrlParts(...resolvedParts);
 }
 
+/**
+ * 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`, and is removed if `fromParams` has no such parameter.
+ *
+ * @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('/search?q=:term', new URLSearchParams('term=cats')); // returns '/search?q=cats'
+ * ```
+ */
+export function buildQueryWithParams(toUrl: string, fromParams: URLSearchParams): string {
+  const [, path, query, fragment] = /^([^?#]*)\?([^#]*)(.*)$/.exec(toUrl) ?? [];
+  if (query === undefined || !query.includes('=:')) {
+    return toUrl;
+  }
+
+  const resolvedParams = new URLSearchParams();
+  for (const [name, value] of new URLSearchParams(query)) {
+    if (value[0] === ':') {
+      for (const sourceValue of fromParams.getAll(value.slice(1))) {
+        resolvedParams.append(name, sourceValue);
+      }
+    } else {
+      resolvedParams.append(name, value);
+    }
+  }
+
+  const resolvedQuery = resolvedParams.toString();
+
+  return path + (resolvedQuery ? `?${resolvedQuery}` : '') + fragment;
+}
+
 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,14 @@ 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&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,21 @@ describe('URL Utils', () => {
     });
   });
 
+  describe('buildQueryWithParams', () => {
+    it('should replace query placeholders with the values of the source parameters', () => {
+      const fromParams = new URLSearchParams('term=cats&term=dogs&page=2');
+      expect(buildQueryWithParams('/search?q=:term&p=:page&static=1#top', fromParams)).toBe(
+        '/search?q=cats&q=dogs&p=2&static=1#top',
+      );
+    });
+
+    it('should remove query parameters whose source parameter is missing', () => {
+      const fromParams = new URLSearchParams();
+      expect(buildQueryWithParams('/search?q=:term&static=1', fromParams)).toBe('/search?static=1');
+      expect(buildQueryWithParams('/search?q=:term', fromParams)).toBe('/search');
+    });
+  });
+
   describe('stripMatrixParams', () => {
     it('should remove a single matrix parameter', () => {
       expect(stripMatrixParams('/path;param=value')).toBe('/path');