fix(@angular/ssr): ensure server-side navigation triggers a redirect

When a navigation occurs on the server-side, such as using `router.navigate`, and the final URL is different from the initial URL that was requested, the server should respond with a redirect.

Previously, the initial URL was being read from `router.lastSuccessfulNavigation.initialUrl`, which could be incorrect in scenarios involving server-side navigations, causing the comparison with the final URL to fail and preventing the redirect.

This change ensures that the initial URL requested by the browser is used for the comparison, correctly triggering a redirect when necessary.

Closes #31482

Author: alan-agius4

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

@@ -60,12 +60,12 @@ export async function renderAngular(
   serverContext: string,
 ): Promise<{ hasNavigationError: boolean; redirectTo?: string; content: () => Promise<string> }> {
   // A request to `http://www.example.com/page/index.html` will render the Angular route corresponding to `http://www.example.com/page`.
-  const urlToRender = stripIndexHtmlFromURL(url).toString();
+  const urlToRender = stripIndexHtmlFromURL(url);
   const platformRef = platformServer([
     {
       provide: INITIAL_CONFIG,
       useValue: {
-        url: urlToRender,
+        url: urlToRender.toString(),
         document: html,
       },
     },
@@ -110,15 +110,15 @@ export async function renderAngular(
     } else if (lastSuccessfulNavigation?.finalUrl) {
       hasNavigationError = false;
 
-      const { finalUrl, initialUrl } = lastSuccessfulNavigation;
-      const finalUrlStringified = finalUrl.toString();
+      const baseHref =
+        envInjector.get(APP_BASE_HREF, null, { optional: true }) ??
+        envInjector.get(PlatformLocation).getBaseHrefFromDOM();
+      const finalUrlStringified = lastSuccessfulNavigation.finalUrl.toString();
+      const finalUrlWithBaseHref = joinUrlParts(baseHref, finalUrlStringified);
+      const initialUrl = `${urlToRender.pathname}${urlToRender.search}${urlToRender.hash}`;
 
-      if (initialUrl.toString() !== finalUrlStringified) {
-        const baseHref =
-          envInjector.get(APP_BASE_HREF, null, { optional: true }) ??
-          envInjector.get(PlatformLocation).getBaseHrefFromDOM();
-
-        redirectTo = joinUrlParts(baseHref, finalUrlStringified);
+      if (initialUrl !== finalUrlWithBaseHref) {
+        redirectTo = finalUrlWithBaseHref;
       }
     }
 

packages/angular/ssr/test/app_spec.ts

@@ -11,7 +11,8 @@
 import '@angular/compiler';
 /* eslint-enable import/no-unassigned-import */
 
-import { Component } from '@angular/core';
+import { Component, PendingTasks, inject } from '@angular/core';
+import { Router } from '@angular/router';
 import { AngularServerApp } from '../src/app';
 import { RenderMode } from '../src/routes/route-config';
 import { setAngularAppTestingManifest } from './testing-utils';
@@ -26,14 +27,32 @@ describe('AngularServerApp', () => {
     })
     class HomeComponent {}
 
+    @Component({
+      selector: 'app-redirect',
+    })
+    class RedirectComponent {
+      constructor() {
+        const router = inject(Router);
+        const pendingTasks = inject(PendingTasks);
+
+        pendingTasks.run(() =>
+          router.navigate([], {
+            queryParams: { filter: 'test' },
+          }),
+        );
+      }
+    }
+
     setAngularAppTestingManifest(
       [
         { path: 'home', component: HomeComponent },
         { path: 'home-csr', component: HomeComponent },
         { path: 'home-ssg', component: HomeComponent },
         { path: 'page-with-headers', component: HomeComponent },
         { path: 'page-with-status', component: HomeComponent },
+
         { path: 'redirect', redirectTo: 'home' },
+        { path: 'redirect-via-navigate', component: RedirectComponent },
         { path: 'redirect/relative', redirectTo: 'home' },
         { path: 'redirect/:param/relative', redirectTo: 'home' },
         { path: 'redirect/absolute', redirectTo: '/home' },
@@ -259,11 +278,17 @@ describe('AngularServerApp', () => {
     });
 
     describe('SSR pages', () => {
-      it('returns a 302 status and redirects to the correct location when redirectTo is a function', async () => {
+      it('returns a 302 status and redirects to the correct location when `redirectTo` is a function', async () => {
         const response = await app.handle(new Request('http://localhost/redirect-to-function'));
         expect(response?.headers.get('location')).toBe('/home');
         expect(response?.status).toBe(302);
       });
+
+      it('returns a 302 status and redirects to the correct location when `router.navigate` is used', async () => {
+        const response = await app.handle(new Request('http://localhost/redirect-via-navigate'));
+        expect(response?.headers.get('location')).toBe('/redirect-via-navigate?filter=test');
+        expect(response?.status).toBe(302);
+      });
     });
   });
 });