IONIC 4: ion-router-outlet jumps past specified url

I am using ion-router-outlet for navigation in my Ionic 4 app and it appears when using navigateByUrl it keeps past pages open as shown here (app-start [first page] and app-join-start [second page]):


This wouldn’t be a problem except after enough pages are loaded the functions on hidden pages are triggered which causes navigation to navigate to the correct page and then jump to another page. So for example if navigating from another page back to app-start it would load app-start and then load app-join-start right afterwards. The functions that seem to be navigating to the wrong next pages are called in the constructors of the hidden pages.

I am using “@angular/core”: “^7.2.2” and @ionic/angular": “^4.6.0”

Thank you so much!

IMHO, this is where the problem lies. Constructors have one job: get the object they’re responsible for constructing into a sane starting state. They should not be doing anything that affects state outside of that object, which definitely includes instigating navigation.

If you have a situation where certain constraints have to be met before a page can be navigated to or from (such as redirecting to login if an authorization token has expired), I would suggest looking at route guards.

Thank you so much. I will test out route guards.

My only concern is that some Observables are triggered on the “hidden” pages of the stack and output errors to the console even though those pages are currently not viewable. Should route guards help with this?

I’m not sure I understand what you mean by “triggered” below:

Broadly speaking, there tend to be two kinds of Observables in an Ionic app:

  • emit in response to user actions
  • emit in response to external changes (such as network going up or down)

If by “trigger” you mean “emit values”, then type 2 Observables can’t be “triggered” by hidden pages (or any sort of pages, for that matter). It would also be weird for user interaction with a “hidden” page to cause a type 1 Observable to emit, because the user can’t interact with a “hidden” page. So I’m confused.

Hi, I was able to fix it slightly with your suggestion but now part of the problem still remains.
The route automatically jumps back to the page it was just on.

So it goes from “Page 1” to “Page 2” and then back to “Page 1.” Looking in the console under ion-router-outlet the “Page 2” shows very briefly and then disappears/is deleted.