[Ionic v4] Multiple ion-router-outlets not working
See original GitHub issueBug Report
Ionic Info
Ionic:
ionic (Ionic CLI) : 4.1.1 (C:\Users\knuterik\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.12
@angular-devkit/core : 0.7.3
@angular-devkit/schematics : 0.7.3
@angular/cli : 6.1.3
@ionic/ng-toolkit : 1.0.6
@ionic/schematics-angular : 1.0.5
System:
NodeJS : v9.3.0 (C:\Program Files\nodejs\node.exe)
npm : 6.4.0
OS : Windows 10
Describe the Bug Navigation is stuck after navigating between two components with child routes and ion-router-outlets. This works in angular with router-outlet but not after IonicModule is imported.
Steps to Reproduce Steps to reproduce the behavior:
- Go to https://stackblitz.com/github/knutto/bug-ion-router-outlet
- Click through Tab 1 - 3 and see the content change.
- Click “Second Tabs Page”
- Click through Tab 4 - 6 and see the content change.
- Click “First Tabs Page” (navigating you back)
- The content is now stuck to the last tab you clicked.
Related Code https://stackblitz.com/github/knutto/bug-ion-router-outlet
https://github.com/knutto/bug-ion-router-outlet
Expected Behavior Navigation should still work after navigating from /first to /second
The docs states that ion-router-outlet should behave as angular’s router-outlet but it does not support having multiple/nested ion-router-outlet
Update This was supposedly fixed in f84bb76 (beta.3) and closed #14888
After this update only the first tabs/ion-router-outlet page is stuck - the second is functioning as intended.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:9
- Comments:39 (8 by maintainers)
@mhartington @manucorporat at ng-conf Deborah Kurata explained a solution how to fix this problem without named outlets and ugly url paths. Here is the YouTube video and Github repo:
https://www.youtube.com/watch?v=LaIAHOSKHCQ
https://github.com/DeborahK/MovieHunter-routing
In the comments of this YouTube video she pointed out, that named outlets are a bad pattern at the moment, especially in combination with lazy loading. It would be great, if the Ionic team implements this solution which is nothing more than just accept multiple ion-router-outlets on multiple views without named outlets. It could also be a good idea, if you use the plain Angular router-outlet and not always your hacks around. I hope this will help, because clean navigation stack (without ugly paths) is elementary for every app and even more for end users.
Kind regards, Thomas
This would be the easiest setup for tabs, but doesn’t work:
with href it also doesn’t work.
If I use this code it works:
but it looks ugly and is not the Ionic way. At the end, the whole Ionic tabs component is under the hood nothing more than just the nav and a tag. It would be a dream if the above example with Ionic tabs will work as soon as possible. With this setup, even nested tabs (multiple router-outlets) would work. A feature which the whole Ionic community has been asking for over 100 years and not to forget swipe gestures…