[4.0.0-beta.17] Angular's Location.back() has no navigation animation

[KevinKelchen]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.19
   @angular-devkit/build-angular : 0.10.7
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v10.13.0 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave

Describe the Bug
Using Angular's Location.back() has no navigation animation instead of the back navigation animation.

Steps to Reproduce
Steps to reproduce the behavior:

1. Clone this repo on your machine: https://github.com/KevinKelchen/ionic4-stack-page-reuse . It is a slightly modified version of the sidemenu Angular stater template. You will need to switch to the custom-back-button branch.
2. In the terminal, path into the repo root and run npm i.
3. Run ionic serve.
4. Open the Chrome DevTools and click the Toggle device toolbar button to simulate a mobile device. From the device dropdown choose an iOS device such as an iPhone X.
   • Choosing an iOS device will use the iOS styling mode. This issue is present in both modes; it's just that the iOS styling mode makes the navigation animation direction used more obvious than the default Material Design navigation animation.
5. Click the Menu icon and then List.
6. Click Item 1 to forward navigate to the detail screen for Item 1.
7. Click Item 2 to forward navigate to the detail screen for Item 2.
8. Click Item 3 to forward navigate to the detail screen for Item 3.
9. Click Item 4 to forward navigate to the detail screen for Item 4.
10. Notice the in-app Back button.
    • This is not an ion-back-button but is rather a similarly styled, custom app-back-button component that, when you click it, uses import { Location } from '@angular/common' and does a Location.back().
    • The rationale for using a custom Back button instead of ion-back-button is stated in IonRouterOutlet.pop() doesn't properly update the browser navigation history #15428 (see this comment) and is also mentioned in Ionic 4 - StackController Page reuse uses old Page data #16516.
11. Click the in-app Back button and watch the navigation animation. You will see as you continue to click the Back button that it uses no navigation animation even though it's using Location.back() to go back in the browser history stack.

Related Code
A sample application has been provided. See the Steps to Reproduce above.

Expected Behavior
I expected that using Angular's Location.back() to navigate back in the browser's history stack would use the back navigation animation instead of no navigation animation.

Additional Context
See the Steps to Reproduce above for the rationale for using a custom Back button and the related GitHub issues. This behavior change was introduced in Beta 17--perhaps related to fixing #16367.

FWIW, using the Android back button does seem to animate appropriately as does the ion-back-button. The browser back/forward buttons have no navigation animation but that seems appropriate given that it's in a browser context.

---

Thanks again for all that you do in making a great framework! 😀

[paulstelzer]

Related to #15181

[amitairos]

+1 can confirm this also

[KevinKelchen]

After updating to Beta 19 there is now no longer any type of animation when using Location.back(). The sample project to reproduce the issue has been updated.

[KevinKelchen]

I've worked around this by doing the following:

// Provide the back animation.
this.navController.setDirection("back", true, "back");

this.location.back();

You can also use NavController.back(). It similarly does a Location.back() with a navigation animation.

It was helpful to understand more about the role of the v4 NavController vs. the Angular router from the comments in this issue. I felt comfortable using the NavController in this case to get the back animation.

I'm leaving this issue open in case anyone really wants Location.back() by itself to have an animation. If not, it can be closed.

Thanks!

[liamdebeasi]

Thanks for the issue. This has been resolved via #28530, and a fix will be available in the upcoming major release of Ionic. We opted to target this for Ionic 8 to minimize any impact that this change may have on developers who were relying on the old behavior.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.