fix(@angular/ssr): use router to normalize URLs for comparison

Updates `constructDecodedUrl` in the SSR engine to use the Angular `Router` for parsing and serializing URLs instead of manual string manipulation and decoding.

This ensures that the URL comparison used to determine if a redirect is necessary is consistent with how the router interprets and serializes the URL. This prevents issues where differences in encoding or edge cases (like duplicate query parameters or empty values) could lead to incorrect comparison results and unexpected redirects.

Also updates tests to include edge cases for query parameters and paths to verify this behavior.

Fixes #33053

Author: alan-agius4

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

@@ -126,8 +126,8 @@ export async function renderAngular(
         envInjector.get(REQUEST, null, { optional: true })?.headers.get('X-Forwarded-Prefix');
 
       const { pathname, search, hash } = envInjector.get(PlatformLocation);
-      const finalUrl = constructDecodedUrl({ pathname, search, hash }, requestPrefix);
-      const urlToRenderString = constructDecodedUrl(urlToRender, requestPrefix);
+      const finalUrl = constructSerializedUrl(router, { pathname, search, hash }, requestPrefix);
+      const urlToRenderString = constructSerializedUrl(router, urlToRender, requestPrefix);
 
       if (urlToRenderString !== finalUrl) {
         redirectTo = [pathname, search, hash].join('');
@@ -190,22 +190,27 @@ function asyncDestroyPlatform(platformRef: PlatformRef): Promise<void> {
 }
 
 /**
- * Constructs a decoded URL string from its components, ensuring consistency for comparison.
+ * Constructs a normalized and serialized URL string from its components.
  *
- * This function takes a URL-like object (containing `pathname`, `search`, and `hash`),
- * strips the trailing slash from the pathname, joins the components, and then decodes
- * the entire string. This normalization is crucial for accurately comparing URLs
- * that might differ only in encoding or trailing slashes.
+ * This function uses the provided `Router` instance to parse and serialize the URL,
+ * ensuring that the resulting string is consistent with the router's configuration.
+ * It also handles the optional `prefix` parameter to ensure proper URL construction.
  *
+ * @param router - The `Router` instance to use for parsing and serializing the URL.
  * @param url - An object containing the URL components:
  *   - `pathname`: The path of the URL.
  *   - `search`: The query string of the URL (including '?').
  *   - `hash`: The hash fragment of the URL (including '#').
  * @param prefix - An optional prefix (e.g., `APP_BASE_HREF`) to prepend to the pathname
  * if it is not already present.
- * @returns The constructed and decoded URL string.
+ * @returns The normalized and serialized URL string.
+ *
+ * @note
+ * We use the Angular `Router` to construct the URL, so that the URL is consistent with the router's configuration.
+ * This is important for the URL to be correctly parsed and serialized by the router as it might have different encodings.
  */
-function constructDecodedUrl(
+function constructSerializedUrl(
+  router: Router,
   url: { pathname: string; search: string; hash: string },
   prefix?: string | null,
 ): string {
@@ -219,5 +224,7 @@ function constructDecodedUrl(
 
   urlParts.push(search, hash);
 
-  return decodeURIComponent(urlParts.join(''));
+  const urlTree = router.parseUrl(urlParts.join(''));
+
+  return router.serializeUrl(urlTree);
 }

packages/angular/ssr/test/app_spec.ts

@@ -334,11 +334,23 @@ describe('AngularServerApp', () => {
         expect(response?.status).toBe(302);
       });
 
-      it('should work with encoded characters', async () => {
-        const request = new Request('http://localhost/home?email=xyz%40xyz.com');
-        const response = await app.handle(request);
-        expect(response?.status).toBe(200);
-        expect(await response?.text()).toContain('Home works');
+      it('should work with complex and encoded URLs', async () => {
+        const urls = [
+          'http://localhost/home?email=xyz%40xyz.com',
+          'http://localhost/home?empty',
+          'http://localhost/home?scope=email+profile',
+          'http://localhost/home?bbb=1&aaa=2&bbb=3',
+          'http://localhost//home',
+        ];
+
+        for (const url of urls) {
+          const request = new Request(url);
+          const response = await app.handle(request);
+          expect(response?.status).withContext(`url: ${url}`).toBe(200);
+          expect(await response?.text())
+            .withContext(`url: ${url}`)
+            .toContain('Home works');
+        }
       });
 
       it('should work with decoded characters', async () => {