fix(angular): update route snapshot on query param navigation (#31534)

Issue number: resolves #24587

---------

## What is the current behavior?

Currently, the `ActivatedRoute` that `ion-router-outlet` injects into a
page copies `snapshot` once, when the page is activated. A navigation
that only changes query params reuses the page without re-activating the
outlet, so `route.snapshot` stays stale (e.g.,
`snapshot.queryParamMap.get('foo')` is `null` after navigating to
`?foo=bar`).

## What is the new behavior?

The proxy's `snapshot` now reads from the route it stands in for, so it
always matches the current URL.

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

## Other information

The issue's broken relative links stopped reproducing once Angular
started building URL trees from the snapshot itself (all supported
versions do). The stale snapshot behind it was still there. The new spec
also covers relative links so the original symptom stays fixed, but
reverting this fix will not break that test because it's just to make
sure this issue doesn't come up again even though it's technically not a
problem right now.

Author: ShaneK

packages/angular/src/common/directives/navigation/router-outlet.ts

@@ -517,7 +517,7 @@ export abstract class IonRouterOutlet implements OnDestroy, OnInit {
 
     proxy._futureSnapshot = (activatedRoute as any)._futureSnapshot;
     proxy._routerState = (activatedRoute as any)._routerState;
-    proxy.snapshot = activatedRoute.snapshot;
+    bindProxySnapshot(proxy, activatedRoute);
     proxy.outlet = activatedRoute.outlet;
     proxy.component = activatedRoute.component;
 
@@ -561,14 +561,26 @@ export abstract class IonRouterOutlet implements OnDestroy, OnInit {
 
     (proxy as any)._futureSnapshot = (activatedRoute as any)._futureSnapshot;
     (proxy as any)._routerState = (activatedRoute as any)._routerState;
-    proxy.snapshot = activatedRoute.snapshot;
+    bindProxySnapshot(proxy, activatedRoute);
     proxy.outlet = activatedRoute.outlet;
     proxy.component = activatedRoute.component;
 
     this.currentActivatedRoute$.next({ component, activatedRoute });
   }
 }
 
+/**
+ * A query params change reuses the page and updates the route's snapshot without
+ * re-activating the outlet, so the proxy reads it live instead of copying it once.
+ * It's configurable because `updateActivatedRouteProxy` rebinds it.
+ */
+const bindProxySnapshot = (proxy: ActivatedRoute, activatedRoute: ActivatedRoute): void => {
+  Object.defineProperty(proxy, 'snapshot', {
+    get: () => activatedRoute.snapshot,
+    configurable: true,
+  });
+};
+
 class OutletInjector implements Injector {
   constructor(private route: ActivatedRoute, private childContexts: ChildrenOutletContexts, private parent: Injector) {}
 

packages/angular/test/base/e2e/src/standalone/router-outlet-query-params.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Router Outlet: query params', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/router-outlet-query-params');
+  });
+
+  test('should resolve relative links after navigating to the same page with query params', async ({ page }, testInfo) => {
+    testInfo.annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/24587',
+    });
+
+    await page.locator('#set-query-params').click();
+    await expect(page).toHaveURL(/\/standalone\/router-outlet-query-params\?foo=bar$/);
+
+    await page.locator('#go-to-details').click();
+
+    await expect(page).toHaveURL(/\/standalone\/router-outlet-query-params\/details$/);
+    await expect(page.locator('app-router-outlet-query-params-details')).toBeVisible();
+  });
+
+  test('should update the route snapshot after navigating to the same page with query params', async ({ page }, testInfo) => {
+    testInfo.annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/24587',
+    });
+
+    await page.locator('#set-query-params').click();
+    await expect(page).toHaveURL(/\/standalone\/router-outlet-query-params\?foo=bar$/);
+
+    await page.locator('#read-snapshot').click();
+
+    await expect(page.locator('#snapshot-foo')).toHaveText('bar');
+  });
+});

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -36,6 +36,14 @@ export const routes: Routes = [
       { path: 'modal-options-generic', loadComponent: () => import('../modal-options-generic/modal-options-generic.component').then(c => c.ModalOptionsGenericComponent) },
       { path: 'popover-custom-injector', loadComponent: () => import('../popover-custom-injector/popover-custom-injector.component').then(c => c.PopoverCustomInjectorComponent) },
       { path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(c => c.RouterOutletComponent) },
+      {
+        path: 'router-outlet-query-params',
+        loadComponent: () => import('../router-outlet-query-params/router-outlet-query-params-parent.component').then(c => c.RouterOutletQueryParamsParentComponent),
+        children: [
+          { path: '', loadComponent: () => import('../router-outlet-query-params/router-outlet-query-params.component').then(c => c.RouterOutletQueryParamsComponent) },
+          { path: 'details', loadComponent: () => import('../router-outlet-query-params/router-outlet-query-params-details.component').then(c => c.RouterOutletQueryParamsDetailsComponent) },
+        ]
+      },
       { path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(c => c.BackButtonComponent) },
       { path: 'router-link', loadComponent: () => import('../router-link/router-link.component').then(c => c.RouterLinkComponent) },
       { path: 'nav', loadComponent: () => import('../nav/nav.component').then(c => c.NavComponent) },

packages/angular/test/base/src/app/standalone/home-page/home-page.component.html

@@ -79,6 +79,11 @@
         Router Outlet Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/router-outlet-query-params">
+      <ion-label>
+        Router Outlet Query Params Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/split-pane">
       <ion-label>
         Split Pane Test

packages/angular/test/base/src/app/standalone/router-outlet-query-params/router-outlet-query-params-details.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { IonContent } from '@ionic/angular';
+
+@Component({
+  selector: 'app-router-outlet-query-params-details',
+  template: `
+    <ion-content>
+      <h1>Details</h1>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonContent],
+})
+export class RouterOutletQueryParamsDetailsComponent {}

packages/angular/test/base/src/app/standalone/router-outlet-query-params/router-outlet-query-params-parent.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { IonRouterOutlet } from '@ionic/angular';
+
+@Component({
+  selector: 'app-router-outlet-query-params-parent',
+  template: `<ion-router-outlet></ion-router-outlet>`,
+  standalone: true,
+  imports: [IonRouterOutlet],
+})
+export class RouterOutletQueryParamsParentComponent {}

packages/angular/test/base/src/app/standalone/router-outlet-query-params/router-outlet-query-params.component.ts

@@ -0,0 +1,27 @@
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { IonContent, IonRouterLinkWithHref } from '@ionic/angular';
+
+@Component({
+  selector: 'app-router-outlet-query-params',
+  template: `
+    <ion-content>
+      <h1>Page One</h1>
+      <a id="set-query-params" [routerLink]="[]" [queryParams]="{ foo: 'bar' }">Stay with query params</a><br />
+      <a id="go-to-details" [routerLink]="['details']">Go to details</a><br />
+      <button id="read-snapshot" (click)="readSnapshot()">Read snapshot</button>
+      <p id="snapshot-foo">{{ snapshotFoo }}</p>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [RouterLink, IonContent, IonRouterLinkWithHref],
+})
+export class RouterOutletQueryParamsComponent {
+  private route = inject(ActivatedRoute);
+
+  snapshotFoo = '';
+
+  readSnapshot() {
+    this.snapshotFoo = this.route.snapshot.queryParamMap.get('foo') ?? 'none';
+  }
+}