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.

[TommiCodes]

+1
Issue also occurs in our project

[celliott181]

+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?