ionic-framework: [Ionic v4] Multiple ion-router-outlets not working

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

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.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 9
Comments: 39 (8 by maintainers)

Most upvoted comments

@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

ThomasLohmann on Sep 22, 2018

@mhartington I’ve tried a lot of things, but for the life of me I can’t get it to work with relative paths. In your example all paths are absolute. For me it’s not about multiple outlets but just about plain old relative navigation. I made a simple example:

the green buttons keep working, but they’re absolute hrefs
a relative href never seems to work
using routerLink instead of href seems to work only once for each page (this is the big WHY!?)

https://github.com/jurgen-reconcept/bug-ion-router-outlet

P.S. I realize now that this is off topic from the original issue. Still appreciate the help!

jurgen-reconcept on Sep 13, 2018

@idanzapp actually I refactored my application in order to not use multiple nested ion-router-outlet and… the same problem occurs… now I don’t even have anymore “router-outlet destroyed” logged in the console… this is weird as f***.

I’m going to create a well documented issue with an example video on this repo that groups all the outlet related issues too like this.

giacomocerquone on Oct 15, 2018

This would be the easiest setup for tabs, but doesn’t work:

<ion-tabs tabbarPlacement="top">
  <ion-tab label="Tab1" routerLink="/tab1"></ion-tab>
  <ion-tab label="Tab2" routerLink="/tab2"></ion-tab>
  <ion-tab label="Tab3" routerLink="/tab3"></ion-tab>
</ion-tabs>

<ion-content>
  <ion-router-outlet></ion-router-outlet>
</ion-content>

with href it also doesn’t work.

If I use this code it works:

<nav>
  <a routerLink="/tab1">Tab1</a>
  <a routerLink="/tab2">Tab2</a>
  <a routerLink="/tab3">Tab3</a>
</nav>

<ion-content>
  <ion-router-outlet></ion-router-outlet>
</ion-content>

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…

ThomasLohmann on Oct 3, 2018

Could you please explain why the routing works the first time (before going back)?

doender on Sep 13, 2018

@mhartington My demo repo doesn’t use multiple outlets but still has a similar issue (not being able to navigate back after to an already visited page): https://github.com/doender/routingError

doender on Sep 13, 2018

Yes, forgot to update it.

Ive tested it with beta.5

The test repo uses beta.3

ghost on Aug 29, 2018