bug: angular outer tabs receive tab button click events for nested tabs

[EinfachHans]

Prequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

I have the following page setup:

- Base Page (Ion Tabs)
  - Page 1 (Ion Tabs)
    - Page 1.1
    - Page 1.2
    - Page 1.3
  - Page 2
  - Page 3

The i use nested tabs. This works in general, but i get an error when i change on of the inner tabs:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '...'

I debugged a bit and found that the select() function of the IonTabs is called two times, one for each Tabs, i can see that on the outlet.

Expected Behavior

The IonTabs should only executed the select method for Tabs belongs to this.

Steps to Reproduce

See page structure above

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[EinfachHans]

Here is a Repo: https://github.com/EinfachHans/ionic-nested-tabs-bug

Switching the outer tabs (bottom) not cause the error to be shown in console

Switching the inner tabs (top under outer tab 1) cause the error in the console to be shown

[liamdebeasi]

I get the following error when trying to run your app:

[ng] ./src/app/tab1/tab1-routing.module.ts:12:36-70 - Error: Module not found: Error: Can't resolve './subtab1/subtab1.module' in '/Users/liamdebeasi/Ionic/ionic-nested-tabs-bug/src/app/tab1'
[ng] ./src/app/tab1/tab1-routing.module.ts:16:36-70 - Error: Module not found: Error: Can't resolve './subtab2/subtab2.module' in '/Users/liamdebeasi/Ionic/ionic-nested-tabs-bug/src/app/tab1'
[ng] ./src/app/tab1/tab1-routing.module.ts:20:36-70 - Error: Module not found: Error: Can't resolve './subtab3/subtab3.module' in '/Users/liamdebeasi/Ionic/ionic-nested-tabs-bug/src/app/tab1'
[ng] Error: src/app/tab1/tab1-routing.module.ts:12:36 - error TS2307: Cannot find module './subtab1/subtab1.module' or its corresponding type declarations.
[ng] 12         loadChildren: () => import('./subtab1/subtab1.module').then(m => m.Subtab1PageModule)
[ng]                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error: src/app/tab1/tab1-routing.module.ts:16:36 - error TS2307: Cannot find module './subtab2/subtab2.module' or its corresponding type declarations.
[ng] 16         loadChildren: () => import('./subtab2/subtab2.module').then(m => m.Subtab2PageModule)
[ng]                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error: src/app/tab1/tab1-routing.module.ts:20:36 - error TS2307: Cannot find module './subtab3/subtab3.module' or its corresponding type declarations.
[ng] 20         loadChildren: () => import('./subtab3/subtab3.module').then(m => m.Subtab3PageModule)
[ng]   

[EinfachHans]

Damn sorry i forget to add these pages, updated pushed

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected]

[EinfachHans]

Yes, the Error disappears! 🎉

[liamdebeasi]

Thanks for the issue. This has been resolved via #23902, and a fix will be available in an upcoming release of Ionic Framework.

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