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

(cherry picked from commit 9c3a689)

Author: alan-agius4

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import { APP_BASE_HREF, PlatformLocation } from '@angular/common';
+import { LocationStrategy } from '@angular/common';
 import {
   ApplicationRef,
   type PlatformRef,
@@ -21,7 +21,7 @@ import {
   platformServer,
   ɵrenderInternal as renderInternal,
 } from '@angular/platform-server';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, UrlSerializer } from '@angular/router';
 import { Console } from '../console';
 import { joinUrlParts, stripIndexHtmlFromURL } from './url';
 
@@ -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.href,
         document: html,
       },
     },
@@ -110,15 +110,13 @@ export async function renderAngular(
     } else if (lastSuccessfulNavigation?.finalUrl) {
       hasNavigationError = false;
 
-      const { finalUrl, initialUrl } = lastSuccessfulNavigation;
-      const finalUrlStringified = finalUrl.toString();
+      const urlSerializer = envInjector.get(UrlSerializer);
+      const locationStrategy = envInjector.get(LocationStrategy);
+      const finalUrlSerialized = urlSerializer.serialize(lastSuccessfulNavigation.finalUrl);
+      const finalExternalUrl = joinUrlParts(locationStrategy.getBaseHref(), finalUrlSerialized);
 
-      if (initialUrl.toString() !== finalUrlStringified) {
-        const baseHref =
-          envInjector.get(APP_BASE_HREF, null, { optional: true }) ??
-          envInjector.get(PlatformLocation).getBaseHrefFromDOM();
-
-        redirectTo = joinUrlParts(baseHref, finalUrlStringified);
+      if (urlToRender.href !== new URL(finalExternalUrl, urlToRender.origin).href) {
+        redirectTo = finalExternalUrl;
       }
     }
 

packages/angular/ssr/test/app-engine_spec.ts

@@ -19,20 +19,6 @@ import { RenderMode } from '../src/routes/route-config';
 import { setAngularAppTestingManifest } from './testing-utils';
 
 function createEntryPoint(locale: string) {
-  @Component({
-    standalone: true,
-    selector: `app-ssr-${locale}`,
-    template: `SSR works ${locale.toUpperCase()}`,
-  })
-  class SSRComponent {}
-
-  @Component({
-    standalone: true,
-    selector: `app-ssg-${locale}`,
-    template: `SSG works ${locale.toUpperCase()}`,
-  })
-  class SSGComponent {}
-
   return async () => {
     @Component({
       standalone: true,

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, inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
 import { AngularServerApp } from '../src/app';
 import { RenderMode } from '../src/routes/route-config';
 import { setAngularAppTestingManifest } from './testing-utils';
@@ -27,14 +28,46 @@ describe('AngularServerApp', () => {
     })
     class HomeComponent {}
 
+    @Component({
+      selector: 'app-redirect',
+    })
+    class RedirectComponent {
+      constructor() {
+        void inject(Router).navigate([], {
+          queryParams: { filter: 'test' },
+        });
+      }
+    }
+
+    const queryParamAdderGuard: CanActivateFn = (_route, state) => {
+      const urlTree = inject(Router).parseUrl(state.url);
+
+      if (urlTree.queryParamMap.has('filter')) {
+        return true;
+      }
+
+      urlTree.queryParams = {
+        filter: 'test',
+      };
+
+      return urlTree;
+    };
+
     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-via-guard',
+          canActivate: [queryParamAdderGuard],
+          component: HomeComponent,
+        },
         { path: 'redirect/relative', redirectTo: 'home' },
         { path: 'redirect/:param/relative', redirectTo: 'home' },
         { path: 'redirect/absolute', redirectTo: '/home' },
@@ -260,11 +293,23 @@ 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);
+      });
+
+      it('returns a 302 status and redirects to the correct location when `urlTree` is updated in a guard', async () => {
+        const response = await app.handle(new Request('http://localhost/redirect-via-guard'));
+        expect(response?.headers.get('location')).toBe('/redirect-via-guard?filter=test');
+        expect(response?.status).toBe(302);
+      });
     });
   });
 });