bug: Issues with ion-router-outlet and router-outlet

[tlaverdure]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

Navigation stops working when navigating from a tab to pages that use router-outlet.

Navigate to Tab1 > Page1 (contains router-outlet) > Page2 (contains router-outlet) and then go back to Page1 and try to switch the tab. Navigation seems to stop working at that point. It appears the tabs are tying to use a nested router-outlet instead of the outlet at the root.

Expected behavior:

Deep navigation to pages from tabs that use router-outlet without navigation failing.

Related Code Here is a repo of the issues using ion-router-outlet and router-outlet https://github.com/tlaverdure/ion-router-outlet-test

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.1.0 (/usr/local/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave

[tlaverdure]

It's also worth noting that there is a conflict when using both ion-router-outlet and router-outlet.

When switching away from a tab that contains a router-outlet and then coming back to the tab, the child routes get cleared and the url reverts to the parent route path.

[tlaverdure]

I found another issue.

Tab1 > Page 1 > Page 3 (contains router-outlet) > Back to Page 1 (navigation is broken at this point)

Here is a repo: https://github.com/tlaverdure/ion-router-outlet-test

[tlaverdure]

I at first was going to submit a feature request, but the more I tried to work around this issue the more it appear to be a bug.

Could be related to: https://github.com/ionic-team/ionic/issues/18197

[liamdebeasi]

Thanks for the issue! I was able to reproduce this. Also wanted to link a similar issue with a reproduction: https://github.com/johanvdb/ionic-4-router-issue

[tlaverdure]

You're welcome! Let me know if you need any additional info.

[DmitryEfimenko]

any progress on this issue?

[Proper-Job]

I was going to create a bug report for this as well, but it seems there are ample reports for this problem. I can confirm that the issue @tlaverdure describes here is present in @ionic/angular 5.1.1 and @ionic/angular 4.11.10.

[wiegell]

Please fix this - this is a dealbreaker!

[estebancastrosola]

Please fix this!! Same issue in my project!

[joelmeaders]

Please, for the love of all things holy can the routing issues be looked at? There are Angular / ion-router-outlet issues going back years (Ionic 4) and trying to do anything more advanced than a single router outlet is broken. The majority of the most in-depth issues relating to the router are locked and newer issues get closed because locked issues already exist.

The only way to solve some of them are to not use lazy loading, copy/paste the same "template" code all over components or just use router-outlet and lose out on features and accessibility.

[tlaverdure]

@liamdebeasi I tested this again on the latest version of Ionic. Things don't appear to be as bad but there are still some issues.

Example for Reproduction: https://stackblitz.com/edit/angular-ivy-x9ngra?file=src/app/app.component.html

1. Broken Relative Routing (See example on tab 1)

All routerLink values have to be absolute paths for them to properly route to child routes. Not really sure why this is. It appears that RouterLinkDelegate is creating the right href so maybe there's an issue with the IonRouterOutlet directive?

2. Ion Router Styling (See example on tab 1 or 2)

The docs mention using <ion-router-outlet> instead of <router-outlet> to support stacked navigation. When using a nested <ion-router-outlet> at first it appears to not work but when you inspect the source the <ion-router-outlet> component's host element is styled to be absolute positioned which doesn't work as one would expect. This can be fixed doing the following:

<ion-content>
  <div style="position: relative; height: 100%">
    <ion-router-outlet [animated]="false"></ion-router-outlet>
  </div>
</ion-content>

Can the <ion-router-outlet> host elements styling be automatically adjusted if it is nested in a parent outlet? Or even manually using a prop?

3. Switching Tabs Resets Route Path (See example on tab 2)

With <ion-router-outlet>, routing to child route appears to behave correctly but once you navigate away from the tab and come back, the url is no longer correct. For example, if you are currently at /tab-2/page-2 and click on tab-1 and then click back on tab-2, the url at this point is /tab-2. The child outlet is still on "Page 2" but the url is not correct.

This has further negative effects if you are using a redirect route for the base path (/tab-2). This will never allow you to come back to a tab and see the last child route you were on as it will always route to the redirected route instead. I've commented this out in src/app/tab-2/tab-2.module.ts:17 but you can uncomment it to see if for yourself.

{
  path: '',
  redirectTo: 'page-1',
},

I'm guessing this has something to do with IonRouterOutlet in @ionic/angular. I would dig deeper but that file is not easy to grok 😅.

Willing to help in whatever way I can. Let me know if you need anything else.

[gultyayev]

Any updates here? This is quite a nasty bug

[liamdebeasi]

Hi everyone,

We definitely hear you all on the frustrations with complex routing setups within Ionic Angular. We are focused on wrapping up Ionic 6, but one thing we would like to look at next is Ionic Angular's routing integration. There are several areas within the routing integration that could use some attention, and we think these fixes will make the experience of developing with Ionic Angular more enjoyable.

I am going to lock this thread for now, but we will update this thread when we have more to share. We appreciate your patience as we work to resolve these issues!