Weird behavior with tabs and router navigation

Ionic Framework Ionic Angular
1

Hi guys !

I’ve seen a weird behavior with ionic tabs, Router and ActivatedRoute lately on one of our customers project. I’ve created a very simplified use case that you can find here : GitHub - leo-jnesis/ionic-tabs-destroy: Example of a weird behavior with Angular Ionic tabs and router/activatedRoute

You can see the app has 3 tabs :

  • In tab2 you get a random ID, and you can navigate to tab3 by clicking a button in the page
    • it will redirect you to tab3, passing this ID in the params
  • In tab3 we get the passed ID, set it as a page variable and display a button to go back to tab2 passing it the same ID
  • I also added logs on when the page gets destroyed in the ngOnDestroy() functions

There are 2 branches in the repo :

  • branch master:

    • if you run the project, go to tab2, click on the button to go to tab3, then click on the button to go back to tab2, you will see that tab2 gets destroyed, and recreated (from the logs)
    • if you then do the same thing over and over (going to tab3 by clicking the button in the page, then back to tab2 etc…), you will see that neither tab2 nor tab3 are destroyed

  • branch no-param-subscribing:

    • if you run the project, and do the same steps as with the master branch, you will see that each time you go or go back to the different tabs using the buttons, they get destroyed, not just the first time…

The only difference between the 2 branches is that on the 2nd one, I commented out the code where I subscribe to the ActivatedRoute paramMap

Here are 2 screen recordings of the behavior on each branch:
https://drive.google.com/drive/folders/14ylXmBWDqOeMW8oH2ALKnRogNqrvgG6J?usp=sharing

I’m really confused on what’s happening here. I’m not sure if it’s a bug, or not.

If some of you have any idea what’s going on here I would love to hear from you :smiley:

Thanks !