Ionic-framework: Preserve query parameters on back button navigation

[jorrit-wehelp]

Bug Report

Ionic version:


[x] 4.x

Current behavior:

Query parameters are not preserved when using back button.

Expected behavior:

Preserve any queryParams.

Steps to reproduce:

Two pages, One starts with an queryParam.
Navigate to second page.
Use ion-back-button to go back
The queryParam is gone.

Related code:

─────────────────────────────────────────────────────────────────────────────────────────────────────────
 --- a/angular/src/directives/navigation/stack-utils.ts
 +++ b/angular/src/directives/navigation/stack-utils.ts
──────────────────────────────────────────────────────────────────────────────────────────────────────────
@@ -38,7 +38,7 @@ function setBack(views: RouteView[], view: RouteView) {
 }

 export function getUrl(router: Router, activatedRoute: ActivatedRoute) {
   const urlTree = router.createUrlTree(['.'], { relativeTo: activatedRoute });
   const urlTree = router.createUrlTree(['.'], { relativeTo: activatedRoute, queryParams: activatedRoute.snapshot.queryParams });
   return router.serializeUrl(urlTree);
 }

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.3.0
   Ionic Framework               : @ionic/angular 4.0.0-beta.18
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 12 other plugins)

[paulstelzer]

Thanks for your issue! This must be a duplicate of #16736 (please confirm or deny)

There is a workaround inside: https://github.com/ionic-team/ionic/issues/16736#issuecomment-447291631

[jorrit-wehelp]

No, it's not a duplicate. This is not regarding the router's ActivatedRoute observables not firing when navigating...
It's about 'storing ' the views in the stack with the URL query parameters, so back button works more like normal history.back(). Only if we keep the query params after a back navigation these could be picked up with the workaround mentioned in the other issue.

[paulstelzer]

Alright I understand!

[astec]

This is a serious blocker.

/members?commune=abc
=>_navForward_=> /member?id=123
=>_click back button_=> /members — _we've lost commune ID parameter_

We've decided to use query URL parameters in PWA for a number of reasons (_analytics, filters, etc._) and this bug breaks navigation.

Reproducible in 4.0.0 release.

CC @manucorporat as I see you are working on back button navigation & overlays.

[davidbwire]

Was experiencing the same problem on @ionic/angular 4.1.1 but managed to achieve desired behavior by setting defaultHref attribute on all none home to home pages cc @astec

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home"></ion-back-button>
    </ion-buttons>
    <ion-title>Page Title</ion-title>
  </ion-toolbar>
</ion-header>

[liamdebeasi]

Hey there! Can you give this a shot on 4.2.0? There were a few routing fixes that went in with that release.

Thanks!

[daem0ndev]

@liamdebeasi I can confirm this is a completely different issue from the fixes we introduced in 4.2. I am working on a PR for this one will update this thread when ready.

Also slightly related but different issue that could potentially be resolved once this issue is resolved: https://github.com/ionic-team/ionic/issues/15428

cc @mhartington

[daem0ndev]

Another related issue (not sure if there is an open one for it, but its related here) is that navigating directly to a url with a query string on ionic will trim off the query string. This can be reproduced by simply going to the ionic conference app and directly navigating to http://localhost:4200/app/tabs/schedule?test=ionic and it will trim off the query string before loading the page. Ideally the query string should remain as it would in a regular angular app.

Edit: interestingly enough, this other issue seems to only manifest when using tabs. If you go to the tutorial route, which does not use /app/tabs/ that one will keep the query string

[lucassch]

still happens in @ionic/angular 4.3.3

[sdeprada]

I think this behaviour begins with @ionic/angular 4.2.0 version
With "@ionic/angular": "^4.1.2" version, query parameters are preserved on back button

[liamdebeasi]

Thanks for the issue! This has been resolved via https://github.com/ionic-team/ionic/pull/18298 and will be in the next release of Ionic.

In the meantime, I have created a nightly build if people would like to test it out and provide feedback. (npm i @ionic/angular@dev).

Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.