Ionic-framework: bug: Navigation stops working for nested ion-router-outlet

[GregOnNet]

Bug Report

Ionic version:
[x] 4.3.1

Current behaviour:

Using child-routes stops working using nested ion-router-outlets.
Issues that could be related: #17638, #17825.

1st

If links and ion-router-outlet are placed inside ion-content links are not clickable.

<!-- No interaction possible -->
<ion-content>
  <a routerLink="app-one">App One</a>
  <a routerLink="app-two">App Two</a>
  <ion-router-outlet></ion-router-outlet>
</ion-content>

If links are placed outside ion-content they are clickable.

<!-- Interaction possible -->
<a routerLink="app-one">App One</a>
<a routerLink="app-two">App Two</a>

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

2nd

Only the first navigation to a child route works.
After this, the view is not updated anymore.

Expected behaviour:

• A click on a link should navigate to the corresponding component configured in the routing module.

Steps to reproduce:

• git clone https://github.com/GregOnNet/ionic-4-jest-setup.git
• cd ionic-4-jest-setup.git
• git checkout routing
• npm install
• ionic serve
• Visit http://localhost:8100/tabs/tab2
• Click on _App One_
• Click on _App Two_
• Note that navigation stops working

Related code:

• https://github.com/GregOnNet/ionic-4-jest-setup/tree/routing
• ⚠️ You need to checkout branch routing

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/Users/gregor/.config/yarn/global/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.3.1
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v10.15.3 (/Users/gregor/.nvm/versions/node/v10.15.3/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave

[Syleron]

any progress with this?

This is a blocking bug to my project

[REPTILEHAUS]

Hitting similar issue +1

[almothafar]

Got some annoying issue, nested ion-router-outlet is not working with correct behavior of back button as it only reads the first navigation on the main, not the sub, not sure if this related to this.

[MarcSchmer]

+1
It is a blocking issue for our project as well.

[ThomasKi93]

+1
Issue also occurs in our project

[gelliott181]

+1
After dealing with multiple issues using ion-router-outlet across multiple releases we have decided to strip all use of the ionic router outlet in favor of the default angular outlet.

This came with some minor styling adjustment for the ion-app and loaded page components, but compared to the issues we faced using the outlet (ActivatedRoutes not having observable properties, lifecycle hooks not properly firing, nested views not navigating) it was a no brainer. The loss of cached pages is regrettable, but it also negated one of our most frequent sources of bugs.

[nelson6e65]

I have similar issue. ActivatedRoute is not giving me the parent value (it's always null) when use ion-router-outlet in a child view.

Only using router-outlet I'm able to get this.route.parent (ActivatedRoute), but animations, etc, are lost. 😢

[nelson6e65]

Is there a Ionic alternative for ActivatedRoute?

[youuri]

This is a major issue. I've stuck more than a week to finally spot the origin of my bugs. So If you have an ionic v4 app with:

• Lazy Loading components / routes
• multiples ion-router-outlet in your code

You will probably get some bugs when changing parent routes / menu / side-pane.

How could i know that the problem is related to ion-router-outlet?

I've check with a chrome://inspect to DOM of my app, i could see that during a parent swap navigation the old DOM for the page is stored and hide with z-index: n-1 where n is 101 for the current view.

So i could have dom like this, with first navigation to main page B.

<ion-router-outlet>
  <main-page-a style="z-index: 100"></main-page-a>
  <main-page-b class="can-go-back" style="z-index: 101></main-page-b>
</ion-router-outlet>

If i navigated back to main page A the bug will occurred a do:

<ion-router-outlet>
  <main-page-a style="z-index: 100"></main-page-a>
  <main-page-b style="z-index: 100></main-page-b>
  <main-page-a class="can-go-back" style="z-index: 101></main-page-b>
</ion-router-outlet>

And now the hell begins, cause with side-pane/menu, you will have bugged related to the fact that multiple dom instance are present for them.

workaround: Actually, i only have 2 <ion-router-outlet> so i decide to switch one of them to the original Angular one: <router-outlet>

That's not the best ... but i hope ionic team will fix this shit.