Ionic-framework: Ionic 4 | backButton disappears frequently

[Rafeni]

Ionic:

ionic (Ionic CLI) : 4.3.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.15
@angular-devkit/build-angular : 0.8.7
@angular-devkit/schematics : 0.8.7
@angular/cli : 7.0.4
@ionic/angular-toolkit : 1.1.0

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : not available
Cordova Plugins : not available

System:

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

To Ionic team

My code is

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Coupon</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="bg-image-dark">
    <ion-button>Confirm</ion-button>
</ion-content>

1. After home page, we have a page called lacation-page as a main page.
2. From here, can go coupon-page, list-page, and so on.
3. If backButton shows on coupon-page or list-page, it always working well.
4. The issue is, backButton sometimes shows but sometimes doesn't.

The very first time my coworker saw related error on terminal was "WARNING: Back Button Default Behavior will be overridden. The backbutton event will be fired!".

Sadly, didn't notice the whole message. Since then, there was no more error in console even the backButton was not showing.

---

One time, When backButton shows, I have try to copy the html and change it to this:
But same!

<ion-header>
  <ion-toolbar>
    <ion-buttons _ngcontent-c3="" slot="start" class="sc-ion-buttons-md-h sc-ion-buttons-md-s hydrated">
      <ion-back-button _ngcontent-c3="" class="sc-ion-back-button-md-h sc-ion-back-button-md-s button hydrated"
        ion-activatable=""><button type="button" class="button-native sc-ion-back-button-md"><span class="button-inner sc-ion-back-button-md">
            <ion-icon class="sc-ion-back-button-md hydrated" role="img"></ion-icon>
            <ion-ripple-effect class="sc-ion-back-button-md hydrated"></ion-ripple-effect>
          </span>
          <ion-ripple-effect class="sc-ion-back-button-md hydrated"></ion-ripple-effect>
        </button></ion-back-button>
    </ion-buttons>
    <ion-title>Coupon</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="bg-image-dark">
    <ion-button>Confirm</ion-button>
</ion-content>

Thank you

[almothafar]

I got similar issues and seems it is related to some kind of rubbish code between outlet and back button validation that Ionic do inside, I'm not sure what the problem is, but from my side, to save my time, I just removed this useless component and did re-write my own back button.

You can look at my answer in the forum here: https://forum.ionicframework.com/t/ionic-4-back-button-angular/137866/25

[danielehrhardt]

Yes i also got similar problems.

[Rafeni]

Thank you @almothafar, I've tried to follow your answer but i guess I must missing out sth so it not really working for me.

I hope Ionic team can notice this issue since we really need it......

[LaljiG]

I have just upgraded to beta 16 and the back button doesn't seem to show at all. In previous betas the disappearance was intermittent exactly as described by Rafeni on creation of this issue. Code example is identocal to what Rafeni listed and "Ionic Info" as below:

Ionic:

ionic (Ionic CLI) : 4.3.1 (C:UsersxxxxxAppDataRoamingnpmnode_modulesionic)
Ionic Framework : @ionic/angular 4.0.0-beta.16
@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 (C:Program Filesnodejsnode.exe)
npm : 6.4.1
OS : Windows 10

[LaljiG]

Just noticed that Back Button works in beta 16 is ionic NavController is used to do the routing. Previous Betas it used to intermittently work even if Angular Router was used,

[bryce13950]

Have you upgraded and checked in beta 17 yet?

[zaarheed]

The <ion-back-button> element never displays for me unless i set the property for default-href (which is not what I want). Interestingly, when running the application through ionic serve I can use the Back button on my browser just fine.

I am using the Angular Router to navigate, for example:

this.router.navigate(['my-page']);

Using v4.0.0-rc.0.

[WLun001]

I have the similar issue
The back button icon would not appear at the first load. But the back button is there, clickable and working, just the icon not showing.
After few refresh on the same page, the back button with icon somehow appear

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>page</ion-title>
  </ion-toolbar>
</ion-header>

[Rafeni]

For people still facing the same issue, here is our custom solution.

page.html

<ion-header>
  <ion-toolbar class="flex_middle">
    <ion-buttons slot="start" (click)="goBack()">
      <img class="back_arrow_costum" src="......" alt="">
    </ion-buttons>
    <ion-title>Page Title</ion-title>
  </ion-toolbar>
</ion-header>

page.ts

goBack(){
this.nav.goBack();
}

Hopes it helps, thank you!

[daraul]

Any updates on this? I'm surprised this broke in the upgrade. I'm sure the back button was more reliable in v3.

[ayouboudelaa]

This is a normal behavior of ion-back-button, when the navigation stack is empty. To keep the back button always displayed you need to specify defaultHref a URL to navigate to when there is no history.

[almothafar]

@ayouboudelaa actually it is buggy, and no it is not "a normal behavior", we have an application where it disappears where you must have it, going back using a hard button or using this.nav.goBack(); works and shows that there is a history.

[ayouboudelaa]

Are you sure that using Inonic NavController works fine when the back button doesn't ? Because looking at your solution here I see that you used Angular Router instead which is not the same at all. NavController manages the back button and keeps pages in the stack to avoid initializing every page every time, something that Angular Router doesn't. In some cases, like when the user navigates directly to a particular URL or just refreshes the page, there will be no history and the stack will be empty and as a result the back button won't know where to navigate back to, so it just disappears unless you specify defaultHref.

[almothafar]

Refreshing page and clear our history are only for web, while you develop not normal behavior when you publish the app, is when you do that, you always start from the root.

And even when you use Angular Router, ionic do have their work for the outlet, you can read the source code to see that like IonRouterOutlet and NavController, also check back-button

So NavController should work, the angular router is wrapped, so they make sure this controller works fine.

Anyway, the issue talking about the back button got removed "even" without refresh, you just go forward and see the back button disappears, I noticed this happens when you got children routes and use lazy modules. so nested routers as for example, not working well, especially if you got the component in the parent template, also in some different scenarios when you move from module to other external module does not belong to the module that you were, like from /category/1 to /product/23.

Conclusion: no it is not normal behavior as refresh the page and clear application history is not the normal behavior as well for a mobile app, the mobile app should be always started from the root.

[dfutrille]

Is there no solution for this yet?

[reset4]

Hi, I solved this by adding defaultHref="home" to ion-back-button,
example:
<ion-back-button defaultHref="home" (click)="goBack()"></ion-back-button>

goBack() { this.navCtrl.pop(); }

[dfutrille]

Hi, I solved this by adding defaultHref="home" to ion-back-button,
example:
<ion-back-button defaultHref="home" (click)="goBack()"></ion-back-button>

goBack() { this.navCtrl.pop(); }

Thanks, it works!!!

[zcd0000]

A simple solution to this problem is to don't use ion-back-button and instead use ion-button inside ion-buttons like this:

<ion-buttons slot="start">
  <ion-button (click)="previous()">
    <ion-icon name="arrow-back"></ion-icon>
  </ion-button>
</ion-buttons>

constructor( private _location: Location, ) previous() { this._location.back(); }

reference: https://stackoverflow.com/questions/55920924/ionic-4-and-tabs-back-button-never-shows

[vikasmishra21]

• [ ] Ionic 5 back-button-issue
  I select an element to view its detail on another page, on the details page i have used

<ion-header>
  <ion-toolbar>
    <ion-button slot="start">
      <ion-back-button defaultHref="/recipes"></ion-back-button>
     @</ion-button>
    <ion-title>{{Recipe.title}}</ion-title>
  </ion-toolbar>
</ion-header>

this on first go back button works perfect.

But when i stay on the details page and refresh the page as shown in screenshot, the arrow goes away, it doesn't looks good.
I am unable to find the solution and also i got an extra padding and why it is comming in div wrapped?

I am using these dependencies

"dependencies": { "@angular/common": "~9.1.6", "@angular/core": "~9.1.6", "@angular/forms": "~9.1.6", "@angular/platform-browser": "~9.1.6", "@angular/platform-browser-dynamic": "~9.1.6", "@angular/router": "~9.1.6", "@ionic-native/core": "^5.0.7", "@ionic-native/splash-screen": "^5.0.0", "@ionic-native/status-bar": "^5.0.0", "@ionic/angular": "^5.0.0", "rxjs": "~6.5.1", "tslib": "^1.10.0", "zone.js": "~0.10.2" }
@santoshyadav198613