IonRouterOutlet.pop() doesn't properly update the browser navigation history

[naveedahmed1]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (C:\Users\User\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.5
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : android 6.3.0
   Cordova Plugins       : not available

System:

   Android SDK Tools : 26.1.1 (C:\Android\sdk\)
   NodeJS            : v8.9.1 (C:\Program Files\nodejs\node.exe)
   npm               : 5.5.1

Describe the Bug When we use IonRouterOutlet.pop() to go back to previous url, it seems that it does take us to previous page but doesn't update the browser navigation history.

Steps to Reproduce For example, if we follow this path Page A > Page B > Page C and then use IonRouterOutlet.pop() in Page C to go back to Page B, it will take us to previous page i.e. Page B but now if we press Browser back button once nothing will happen, if we press it another time it will take us to Page A. If the browser history was updated properly, pressing Browser back button once should take us to Page A.

As a result,

• Navigation has unexpected behaviour
• Breaks Angular relative routes

Expected Behavior Navigation should work properly.

[KevinKelchen]

We are experiencing this issue as well--even in Beta 15.

Some important points:

• As noted by the OP, after pressing the ion-back-button it will not update the browser history stack which then messes up the browser back/forward buttons (and Android back button) and Angular's Location.back() calls if you subsequently try to use those.
• Not only does ion-back-button not update the browser history stack but it will also not use the browser history stack when navigating back but rather seems to pop to the previous matching page (based on URL matching) that is sitting in the DOM (which doesn't necessarily represent the browser history stack).
• The browser back/forward buttons and Android back button will go through the actual browser history stack. Even when pages get destroyed or re-used (if URL isn't unique), using the browser back/forward buttons and Android back button will re-create pages in the DOM and honor the browser history stack. This type of behavior is more of what I would expect.

This issue, combined with #15181, has me wondering whether we should abandon using ion-back-button and roll our own back button which uses Angular's Location.back() until these issues are resolved.

[KevinKelchen]

I have had some success by creating a custom Angular back button component that just uses Angular's Location.back() when you click it. This works around it for now.

Any updates on this issue from the Ionic team? Thanks!

[jsessink]

Ah, glad I found this. On the browser, this is affecting the subscriptions to pop states, which hinders usage of LocationStrategy.onPopState, or even simply the window.onpopstate, as both do not work in order to run things like refresh data, etc. Currently, I'm stuck with having to create a new button like above, or add a pop state subscription in Angular (if the user selects the back button in the browser), as well as a fallback method through Ionic. Albeit, platform.backButton subscription does not seem to be triggering in a browser.

[infacto]

I wonder how the soft back button (in header) works? See source code. It uses "ion-nav"? But I cannot find sourch an element in DOM. But anyway. I use IonRouterOutlet#pop() and it works in a weird way. Sometimes pop is not working event if canGoBack is true. And the K.O. is the fail navigating like in this example:

/page1 > /page2 > ionRouterOutlet.pop(): /page1 > /page3 > ionRouterOutlet.pop(): /page2 > ionRouterOutlet.pop(): /page1.

In words: I'm on main page /page1 and navigate to /page2. Then hit hard back button which just calls ionRouterOutlet.pop() which navigates correctly back to /page1. Then I navigate to /page3 and hit the hard back button again (ionRouterOutlet.pop). But instead of navigating to the expected /page1 where I came from, it goes to /page2 again. Which should not in history stack anymore. User reaction: WTF

I just wondering, what does the <ion-back-button> do? I want exactly the same behavior with the Android hard back button. But using IonRouterOutlet fails as described above, and ion-nav does not exist. Is this magic? ^^

Is this the correct issue? Otherwise I file a new one.

Update: My current workaround idea is to virtually click the ion-back-button (el.click() on hard back button). lel desperate act. Not tested yet. But it seems the only thing to act with the hard back button in the same way as the soft back button does. sigh