Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ion-back-button does not work correctly together with angular router navigate option "replaceUrl" (V4) #15181

Closed
kkbear1985 opened this issue Aug 15, 2018 · 24 comments

Comments

@kkbear1985
Copy link

commented Aug 15, 2018

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.0.1 
   Ionic Framework            : @ionic/angular 4.0.0-beta.2
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.4

Cordova:

   cordova (Cordova CLI) : 7.0.1
   Cordova Platforms     : none

System:

   Android SDK Tools : 26.0.2
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.2.0
   OS                : Windows 7

Environment:

   ANDROID_HOME : D:\Android\sdk

Describe the Bug
ion-back-button does not work correctly together with angular router replaceUrl option

Steps to Reproduce
if i navigate from "/home" to "/login" and then navigate to "/pageC" by setting:
this.router.navigate(["/pageC"], {replaceUrl:true});

the browser back button correctly take me back to "/home" instead of "/login "
but ion-back-button still take me back to "/login"

Related Code
If you are able to illustrate the bug with an example, please provide a sample application via an online code collaborator such as StackBlitz, or GitHub.

Expected Behavior
ion-back-button should take me back to "/home" instead of "/login " while the angular router option replaceUrl is set to "true"

Additional Context
List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

@ionitron-bot ionitron-bot bot added the triage label Aug 15, 2018

@daem0ndev

This comment has been minimized.

Copy link
Contributor

commented Sep 15, 2018

I am also experiencing this same issue. In doing further investigation, I believe the issue is that when doing a router.navigate with replaceUrl: true, it is not updating the url / fullPath within the StackController of the ion router outlet.

In my scenario my page has child routing, and on enter it sets a default child route programatically. So for example navigating to /home will automatically do a relative navigation to /home/child using replaceUrl: true. Now from here if I navigate to /another-page the back button takes me to /home instead of /home/child which is very similar to the op's issue.

Is there any way I can force the stack in ion router outlet to update the url of the current view?

@KevinKelchen

This comment has been minimized.

Copy link

commented Oct 29, 2018

I am experiencing the same issue as well. 🙂

It likewise happens with the { skipLocationChange: true } setting where the browser back button honors it while the ion-back-button does not.

@KevinKelchen

This comment has been minimized.

Copy link

commented Nov 26, 2018

I have had some success by migrating to the Angular router (not too hard coming from the new NavController that lightly wraps the Angular router and looking at the NavController's methods in order to know what Angular router calls to replace them with). I've also created a custom Angular back button component that just uses Angular's Location.back() when you click it. That's how I'm getting around this issue for now.

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

@naveedahmed1

This comment has been minimized.

Copy link

commented Jan 13, 2019

Any update on this?

In my case on login page after successful login, I redirect user to dashboard:

this.router.navigateByUrl('/dashboard', { replaceUrl: true });

I assume that pressing hardware back button from dashboard, shouldn't take the user to the Login page since I am passing replaceUrl: true. But it doesn't work and pressing back button takes back to login page.

@daem0ndev

This comment has been minimized.

Copy link
Contributor

commented Jan 13, 2019

@naveedahmed1 we are also experiencing this similar issue too! Even worse, we are actually using the root navigation direction when navigating to our home page after the login page, which should reset the navigation stack, but the hardware back button still takes the user to the login page, looks like replaceUrl also does not fix that problem.

@naveedahmed1

This comment has been minimized.

Copy link

commented Jan 13, 2019

Yes you are right, I also tried navCtrl.navigateRoot but it doesn't work either.

@qiluo

This comment has been minimized.

Copy link

commented Jan 29, 2019

Exact problem on my side. ion-back-button ignored replaceUrl:true completely.

I'm on 4.0.0 final

@adsonrocha

This comment has been minimized.

Copy link

commented Jan 30, 2019

Same issue here...

@ryaa

This comment has been minimized.

Copy link

commented Jan 30, 2019

The problem is reproducible on the most recently release 4.0.0.

@robingenz

This comment has been minimized.

Copy link

commented Jan 30, 2019

+1

@adsonrocha

This comment has been minimized.

Copy link

commented Jan 31, 2019

@paulstelzer any news on this? This is critical to a good UX and my team is waiting to launch the app.

@ryaa

This comment has been minimized.

Copy link

commented Feb 1, 2019

This is absolutely required to be fixed. Right now I have to add custom ion-button to handle all the back navigation as a temporary workaround.

@JerryBels

This comment has been minimized.

Copy link

commented Feb 3, 2019

+1

@kkbear1985

This comment has been minimized.

Copy link
Author

commented Feb 4, 2019

I believe you can replace state manually in the callback of exit event with location.replacestate , just check this stackoverflow https://stackoverflow.com/questions/38891002/angular-2-replace-history-instead-of-pushing

But anyway, the way I deal with this is just simply do not use backbutton , it is bugged

@adsonrocha

This comment has been minimized.

Copy link

commented Feb 8, 2019

The way I've overcome this issue:

  1. Created a custom directive:
import {Directive, HostListener} from '@angular/core';
import {Location} from '@angular/common';

@Directive({
  selector: '[app-location-back]'
})
export class LocationBackDirective {
  constructor(private location: Location) { }

  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    this.location.back();
  }
}
  1. Used the directive's selector as a property on my ion-button:
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button app-location-back fill="clear">
         <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>...</ion-title>    
  </ion-toolbar>
</ion-header>
@JerryBels

This comment has been minimized.

Copy link

commented Feb 9, 2019

The way I've overcome this issue:

  1. Created a custom directive:
import {Directive, HostListener} from '@angular/core';
import {Location} from '@angular/common';

@Directive({
  selector: '[app-location-back]'
})
export class LocationBackDirective {
  constructor(private location: Location) { }

  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    this.location.back();
  }
}
  1. Used the directive's selector as a property on my ion-button:
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button app-location-back fill="clear">
         <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>...</ion-title>    
  </ion-toolbar>
</ion-header>

Nice ! I would add this.navCtlr.setDirection('back'); to the directive in order to properly animate it also :)

@Jesteban1125

This comment has been minimized.

Copy link

commented Mar 6, 2019

I suggest another alternative

Create a new class (CustomNavController) that extends from NavController

import { Optional } from '@angular/core';
import { UrlTree, Router } from '@angular/router';
import { Location } from '@angular/common';
import { NavController, Platform } from '@ionic/angular';
import { NavigationOptions } from '@ionic/angular/dist/providers/nav-controller';

export class CustomNavController extends NavController {
  constructor(
    platform: Platform,
    private _location: Location,
    @Optional() private _router?: Router,
  ) {
    super(platform, _location, _router);
  }

  navigateBack(url: string | UrlTree | any[], options: NavigationOptions = {}): Promise<boolean> {
    this.setDirection('back', options.animated, options.animationDirection);
    return new Promise((resolve, reject) => {
      this._location.back();
      resolve();
    });
  }
}

Add the CustomNavController class as your NavController to your providers (main module)

{ provide: NavController, useClass: CustomNavController }

Example:

@NgModule({
    ...
  providers: [
    ...
    { provide: NavController, useClass: CustomNavController }
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}
@naveedahmed1

This comment has been minimized.

Copy link

commented Mar 6, 2019

Should we expect a permanent fix from Ionic team anytime soon?

@manucorporat @paulstelzer I think reliable and robust routing should have higher priority.

@liamdebeasi liamdebeasi added this to Backlog 🤖 in Ionic Core via automation Mar 26, 2019

@liamdebeasi liamdebeasi moved this from Backlog 🤖 to In progress 🤺 in Ionic Core Mar 26, 2019

@liamdebeasi liamdebeasi self-assigned this Mar 26, 2019

@liamdebeasi liamdebeasi moved this from In progress 🤺 to Needs review 🤔 in Ionic Core Mar 26, 2019

Ionic Core automation moved this from Needs review 🤔 to Done 🎉 Mar 29, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Mar 29, 2019

Hi there,

This issue has been resolved by #17879. I have pushed a nightly build of Ionic, and it would be great if someone could test and provide some feedback. (npm i @ionic/core@dev @ionic/angular@dev)

We appreciate your patience as we worked to fix this issue!

@KevinKelchen

This comment has been minimized.

Copy link

commented Apr 3, 2019

I've tried it out for myself and replaceUrl seems to be working! 🙂

At the same time, as I mentioned in my comment above, { skipLocationChange: true } similarly doesn't work with the ion-back-button.

I thought it was similar enough of an issue that fixing replaceUrl may have also fixed skipLocationChange but that didn't end up being the case. Therefore, perhaps it should be considered a separate issue.

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 4, 2019

@KevinKelchen,

Ah yes thank you for the reminder! Would you be able to create an issue for it? I think it's worth tracking that separately.

Thanks!

@naveedahmed1

This comment has been minimized.

Copy link

commented Apr 7, 2019

I think the issue has been fixed now, I have tested it on device and it works without any issue.

But now I am having another issue. In my case when user is on Dashboard, pressing device back button should exit the app, but it doesn't, it stays on the dashboard page and does't nothing, even despite of pressing the hardware back button multiple times.

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 9, 2019

Hi @naveedahmed1,

This is a known issue. You can follow the Back Button Issue Thread for more info.

Thanks!

@ionitron-bot

This comment has been minimized.

Copy link

commented May 9, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 9, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.