question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Ionic v4] Multiple ion-router-outlets not working

See original GitHub issue

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:

  1. Go to https://stackblitz.com/github/knutto/bug-ion-router-outlet
  2. Click through Tab 1 - 3 and see the content change.
  3. Click “Second Tabs Page”
  4. Click through Tab 4 - 6 and see the content change.
  5. Click “First Tabs Page” (navigating you back)
  6. 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:closed
  • Created 5 years ago
  • Reactions:9
  • Comments:39 (8 by maintainers)

github_iconTop GitHub Comments

7reactions
ThomasLohmanncommented, Sep 22, 2018

@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

2reactions
ThomasLohmanncommented, Oct 3, 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…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ion-router-outlet not working on sub-pages
I've been trying to display the contents of a page on a sub ion-router-outlet but so far to no avail.
Read more >
Ionic/Angular - Multiple routes not working
I am using router-outlets to load the components on the page. When the page first loads the component loads fine, when I click...
Read more >
Announcing Ionic v6.3 - Ionic Blog
Developers will need to assign the environmentInjector property to their ion-router-outlet or ion-tabs component to support standalone ...
Read more >
Can anyone help me fix this - If I'm going to a nested route ...
Honestly don't do that. It sounds like an over-complicated setup for very little return. Having multiple nested ion-router-outlets is not ...
Read more >
Multiple Router Outlets in Angular using Named Outlets (2021)
Multiple Router Outlets in #Angular allow you to manage complex router states, allowing you to fork your router into multiple active paths ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found