[Ionic v4] Re-navigating to tab page with same route url stops ActivatedRoute events from firing

[leszekkadlof]

Bug Report

Ionic version:
[x] 4.10.2

Current behavior:

When one navigates multiple times using the same route but with different queryParams to a particular page then that page no longer receives ActivatedRoute events for those queryParams.

Expected behavior:

I have a page in a tab which is an editor for a new item (where additional data is provided via queryParams) which can be called from other pages in other tabs via navigate. I ought to be able to call that route multiple times with different queryParams and the editor ought to display for that tab with the appropriate modifications based off the incoming queryParams via it's ActivatedRoute events.

Steps to reproduce:

I've written a test tabbed app https://github.com/leszekkadlof/ionic-tab-queryParam-routes.

App consists of two tabs: Tab One and Tab Two.
Tab One has test navigation buttons that navigate to Tab Two using various parameters.
I have 2 routes in the Tab Two module for Tab2Page - one is the default empty route and another allowing for an ':id' pointing to the same page.
Tab Two registers listener for the data and queryParams events and displays them.
Tab Two also has a test button which re-navigates to itself (Tab Two) using relative paths and a random queryParam.

Test 1 (using empty route to Tab2Page):

1. On Tab One click 'Only queryParam: 111' button:
   Tab Two displays correctly with the correct events.
2. Click Tab Two 'Calling Tab2 with a random parameter multiple times:
   Parameters are correctly received via events and displayed on the page.
3. Go back to Tab One and click 'Only queryParam: 222' button (this navigates to Tab Two using same route but with a different queryParam)
   ** Tab Two displays incorrectly - the same data is displayed for previous test - no events were received according to console.log **
4. Clicking on Tab Two 'Calling Tab2 with a random parameter' button also produces no results even though URL in the browser shows different parameter being passed each time.

Test 2 (using :id route to Tab2Page):

1. On Tab One click 'id: 123 and queryParam 333' button:
   Tab Two displays correctly with both param and queryParam set.
2. Click Tab Two 'Calling Tab2 with a random parameter multiple times:
   This also works - parameters are received.
3. On Tab One click 'id: 789 and queryParam 444' button.
   Tab Two displays correctly with both param and queryParam set.
4. Click Tab Two 'Calling Tab2 with a random parameter multiple times
   This also works - parameters are received.
5. Go back to Tab One click AGAIN 'id: 789 and queryParam 444' button.
   Tab Two seems to appear correctly with both param and queryParam set - however examining console.log shows no event received.
6. Click Tab Two 'Calling Tab2 with a random parameter multiple times
   Also, shows that events are NOT being received
7. Click Tab One 'Only queryParam: 111'
   Now, it works again - Tab Two displays correctly with both param and queryParam set.
8. Click Tab Two 'Calling Tab2 with a random parameter multiple times
   This also works - parameters are received.
9. Click Tab One 'Only queryParam: 222'
   Tab Two is now incorrect and broken

It seems if you re-navigate using the same route regardless of the queryParam then something gets messed up.

Workaround:
The workaround seems to be I need to set a ':id' parameter in the route which a random number which is ignore by the destination page - the presence of the ':id' causes a new instance of the page to be generated which triggers the correct events.

Related code:

I couldn't get this sample to run on Stackblitz because it seems Ionic 4 isn't fully supported yet on Stackblitz, not all tab selectors work for instance.

GitHub: (https://github.com/leszekkadlof/ionic-tab-queryParam-routes).

[KevinKelchen]

May be related to #16736.

[kensodemann]

A member of the community that I am working with has also reported this issue and has provided a sample repo to duplicate the steps. See here: https://github.com/plampy/ionic-queryparams-repro

There is a README.md with details on how to see the issue once you have repo cloned and the app running.

[leszekkadlof]

Thanks

[liamdebeasi]

Hi there,

This issue has been resolved by #17888 and will be in the next release of Ionic. I have pushed a nightly build of Ionic if anyone is interested in trying it out and providing feedback. (npm i @ionic/core@dev @ionic/angular@dev).

Thanks!

[leszekkadlof]

Thanks

[ionitron-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.