Skip to content

bug: ionic angular does not fully support relative and auxiliary routes #18845

Open
@lincolnthree

Description

@lincolnthree

Bug Report

Ionic version:

[x] 4.x

Current behavior:
routerLink stops working after navigating to and subsequently deactivating a named/secondary outlet route.

Expected behavior:

Router Links should continue to work even after the outlet/route they refer to has been navigated to and subsequently deactivated.

Steps to reproduce:

  1. Clone sample app, cd into folder, npm i, ionic serve...
  2. Open the application http://localhost:8100
  3. Click "Metagame" on the app menu
  4. Click "Works once"
  5. Click the (X) at the top of the detail outlet to close it (or click "Metagame in the menu again)
  6. Click "Works once" --- Nothing happens --- we should re-open the detail/secondary outlet here but it does not.
  7. Click "Works every time" -- the outlet opens like it should have. But we should not need to specify fully qualified URLs to routerLink, that's horrifyingly leaky and a maintenance nightmare

Now. In app.component.html, replace <ion-router-outlet main class="app-main"></ion-router-outlet> with <router-outlet main class="app-main"></router-outlet>

Repeat steps 1-5: The outlet opens as expected.

This is a blocking bug in ion-router-outlet. The only workaround is to hardcode fully qualified router URLs in the entire application, rather than properly targeting named router outlets directly via their proper relative URL. which would immediately break everything as soon as a single route in the middle of the hierarchy is changed.

Related code:
https://github.com/TopDecked/ionic-router-outlet-bug

Other information:

This seems related to:
#16534
#18197
#18823
ionic-team/ionic-v3#713 (this should not have been moved to v3 repo...)

Ionic info:

Lincolns-MacBook-Pro-2:topdecked-named-router-bug lincoln$ ionic info

Ionic:

   Ionic CLI                     : 5.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.800.3
   @angular-devkit/schematics    : 7.3.1
   @angular/cli                  : 8.0.3
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 (update available: 0.2.8)

System:

   Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v12.3.1 (/usr/local/Cellar/node/12.3.1/bin/node)
   npm               : 6.10.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

Activity

LakshanKarunathilake

LakshanKarunathilake commented on Jul 21, 2019

@LakshanKarunathilake

yeah same here not working

pioneersingh321

pioneersingh321 commented on Jul 22, 2019

@pioneersingh321

do i think the same in ionic 4.6.2 update angular route are not working .. i just start a new project with ionic 4.6.2 side menu and build with cordova@8 and when i install in mobile .. on the first screen mean home page i press the hardware back button the home page is getting refresh and from menu if we login to list menu and press the hardward back button its going to home page . it should not have to go to home page because in [routerDirection]="'root'"

please fix the issue ....

thanks in advance

DmitryEfimenko

DmitryEfimenko commented on Mar 3, 2020

@DmitryEfimenko

It seems it's a duplicate of #18197, which is locked... so I can't +1 it.
Any progress on this? This seems like a major bug. Basically the routing isn't working...

wanting615

wanting615 commented on Mar 20, 2020

@wanting615

+1

DmitryEfimenko

DmitryEfimenko commented on Apr 2, 2020

@DmitryEfimenko

@mhartington (or anybody from Ionic @adamdbradley @brandyscarney) do you mind providing an update?

added this to the 5.4.0 milestone on Aug 31, 2020
lincolnthree

lincolnthree commented on Sep 3, 2020

@lincolnthree
Author

Milestone 💪

modified the milestones: 5.5.0, 5.5.1 on Nov 16, 2020
removed this from the 5.5.1 milestone on Nov 24, 2020

11 remaining items

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @lincolnthree@DmitryEfimenko@liamdebeasi@brandyscarney@pioneersingh321

        Issue actions

          bug: ionic angular does not fully support relative and auxiliary routes · Issue #18845 · ionic-team/ionic-framework