bug: ionic-tabs inside dynamic route breaks the app.

[z0lo13]

Prerequisites

• [x] I have read the Contributing Guidelines.
• [x] I agree to follow the Code of Conduct.
• [x] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

If there is a route with 2+ tabs inside ion-tabs component, and the navigation is done for more then 2 tabs, when navigating to other route without tabs the ion-page is not being removed from DOM, which makes ionic not usable at all, since it overlays over the current page and the current page is not clickable, since it is under the ion-page that should have been removed from DOM.

Expected Behavior

ion-page containing ion-tab must be removed from dom.

Steps to Reproduce

1. Create a dynamic route (/dynamic/:id) with 3 children (TabA, TabB and TabC)
2. Navigate to "/dynamic/123/a"
3. Swithc from "/dynamic/123/a" to "/dynamic/123/b" and then to "/dynamic/123/c"
4. Navigate back to "/" you will see the tabs to be present in the bottom of "/" where they don't exist.
5. Inspect DOM and see that both ion-pages ("/" and "/dynmic/:id") is still in DOM.

Code Reproduction URL

https://stackblitz.com/edit/ojc3imxd

Ionic Info

Ionic:

   Ionic CLI : 7.2.1 (/Users/z0lo/.nvm/versions/node/v22.12.0/lib/node_modules/@ionic/cli)

Capacitor:

   Capacitor CLI      : 7.2.0
   @capacitor/android : 7.2.0
   @capacitor/core    : 7.2.0
   @capacitor/ios     : 7.2.0

Utility:

   cordova-res : 0.15.4
   native-run  : 2.0.1

System:

   NodeJS : v22.12.0 (/Users/z0lo/.nvm/versions/node/v22.12.0/bin/node)
   npm    : 10.9.0
   OS     : macOS Unknown

Additional Information

<ion-page :key="route.params.id"> Helps a little bit but not fixing the issue, at least the ion-router-outlet is being removed. However the ion-tab-bar is still not being removed.

The issue is definetely because of the dynamic route, since if tested not in a dynamic route there is no issue.

[z0lo13]

after further testing i have concluded it is not related to tabs but to ion-router-outlet.

I have no idea how to debug it furher, it just not working... it shoudl remove the nested outlet but it does not. Another weird connection is that if i switch between first two tabs it works fine and the router removed, if i switch between 1-2-3 tabs thats it it is not being removed.

[z0lo13]

What have worked for as a workaround is to navigate to first tab and then to navigate away of the route containing tabs with ion-router-outlet.

It is not something that should be accepted as solution... but it works...

const loading = await loadingController.create({
    message: 'Closing Dynamic Page',
  });
  await loading.present();
  await router.replace(`/dynamic/${route.params.id}/a`)
  await router.replace('/')

  await loading.dismiss();

[kBondarchuk]

I have this bug for years!