[4.0.0.beta-17] ActivatedRoute.queryParams break after navigation

Bug Report

Ionic version: 4.0.0.beta-17 and 4.0.0.beta-18

Current behavior: Subscriptions on ActivatedRoute.queryParams do not fire after navigating away from and returning to that page. This is particullary problematic for base pages of tabs that are cached. The problem does not occur on sub-pages because they are re-initialized i.e. onInit fires again and again (e.g. on speaker-detail in ionic-conference app).

Expected behavior: Navigation should not interfere with the queryParams subscription.

Steps to reproduce:

1. Clone ionic-conference-app
2. Add code below
3. Test with “Test” button on speakers list. Observe console log of queryParams. Navigate to speaker detail and back. Try “Test” button again and observe no console output.
4. Test same with Test button speaker detail page. Navigate from base to detail and back and to detail again - logs are fired.

Related code:

speaker-list.html

<ion-content class="outer-content">
   <!-- TEST BUTTON -->
  <ion-button (click)="test()">Test</ion-button>

  <ion-list>
...

in speaker-list.ts modify

...
export class SpeakerListPage implements OnInit {
  speakers: any[] = [];

  constructor(
    public actionSheetCtrl: ActionSheetController,
    public confData: ConferenceData,
    public inAppBrowser: InAppBrowser,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    console.log('Init');
    this.route.queryParams.subscribe(test => console.log(test));
  }

  test() {
    this.router.navigate(['./'], { queryParams: { test: Math.random() }, relativeTo: this.route });
  }
...

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (C:\Users\Ferdinand\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.1.3
   @angular/cli                  : 7.1.3
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.5, (and 8 other plugins)

System:

   NodeJS : v10.11.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

[daem0ndev]

I can confirm this issue as this was quite a blocker for us, the problem is that the OutletInjector class inside ion-router-outlet only provides the correct ActivatedRoute during initial component initialization, but this is not the correct ActivatedRoute when re-activating a component thats already in the ion-router-outlet stack. The fact of the matter is, there is no easy way to correct this issue from Ionic’s side because you cant change the injected activated route after the fact. In other words, the activated route thats injected on a component is only correct if the component is being created by the factory, NOT if we are reactivating a component thats already created, and navigating BACK to that component is actually a whole new navigation and therefor new ActivatedRoute object.

I implemented a very crude workaround to this issue because we have a tight deadline to release our app. The main gist of the solution is that I created a service that always maintains the current activated route as well as the component that is activated and exposes this via an observable, and then on my page components I use this service to get the latest (and correct) instance of ActivatedRoute as it changes over time (i.e. when navigating BACK to a component on the stack) and then you can correctly switchMap over to the queryParamMap on that new ActivatedRoute.

[mhartington]

Hey everyone. We just merged in #17888 which fixes this. Thanks for all your patience here 😄