-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
Comments
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 Is there any way I can force the stack in ion router outlet to update the url of the current view? |
I am experiencing the same issue as well. 🙂 It likewise happens with the |
I have had some success by migrating to the Angular router (not too hard coming from the new Any updates on this issue from the Ionic team? Thanks! |
Any update on this? In my case on login page after successful login, I redirect user to dashboard:
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. |
@naveedahmed1 we are also experiencing this similar issue too! Even worse, we are actually using the |
Yes you are right, I also tried |
Exact problem on my side. ion-back-button ignored I'm on 4.0.0 final |
Same issue here... |
The problem is reproducible on the most recently release 4.0.0. |
+1 |
@paulstelzer any news on this? This is critical to a good UX and my team is waiting to launch the app. |
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. |
+1 |
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 |
The way I've overcome this issue:
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();
}
}
<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 |
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 {} |
Should we expect a permanent fix from Ionic team anytime soon? @manucorporat @paulstelzer I think reliable and robust routing should have higher priority. |
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. ( We appreciate your patience as we worked to fix this issue! |
I've tried it out for myself and At the same time, as I mentioned in my comment above, I thought it was similar enough of an issue that fixing |
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! |
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. |
Hi @naveedahmed1, This is a known issue. You can follow the Back Button Issue Thread for more info. Thanks! |
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. |
Bug Report
Ionic Info
Run
ionic info
from a terminal/cmd prompt and paste the output below.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.
The text was updated successfully, but these errors were encountered: