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

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

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

[ThomasOliver545]

+1 Issue also occurs in our project