Ionic 4 back button not working

The hardware back button on and Android device doesn’t have its default behaviour. Going to a page and then pressing the back button doesn’t do anything.

Steps to Reproduce

  1. Go to any page
  2. Press the hardware back button
  3. Doesn’t go back

here is ionic info

Ionic:

Ionic CLI : 6.1.0 (C:\Users\saad.saeed\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.0.1
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.1.2

Capacitor:

Capacitor CLI : 1.5.0
@capacitor/core : 1.5.0

Cordova:

Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : not available
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

cordova-res : not installed
native-run : not installed

System:

Android SDK Tools : 26.1.1 (C:\Users\saad.saeed\AppData\Local\Android\android-sdk)
NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

it woud be useful if you share a portion of the HTML or method (ts file) that navigate from one route to the other.

AFAIK a page doesn’t have a stack, so no back navigation is available because there is nothing to navigate to, unless you want to exit the app.

I am also facing the same problem. Did you find any solution?

I am also facing the same issue.Considering a basic page hardware back button does nothing.

1 Like

No did’t find anything

2 Likes

I have the same problem btw.

1 Like

@shepard77 @Ibeqk @distante @MeerDev @Harish18

please try this example its work for me

import { Component, OnInit, QueryList, ViewChildren } from '@angular/core';

import { Platform, AlertController, IonRouterOutlet } from '@ionic/angular';
import { Router} from '@angular/router';
import {Location} from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {

  @ViewChildren(IonRouterOutlet) routerOutlets: QueryList < IonRouterOutlet > ;

  lastTimeBackPress = 0;
  timePeriodToExit = 2000;

  

  constructor(
    private platform: Platform,
    private alertController: AlertController,
    private router: Router,
    private location: Location
  ) {
    this.backButtonEvent();
  }


  backButtonEvent() {
    this.platform.backButton.subscribeWithPriority(0, () => {
      this.routerOutlets.forEach(async(outlet: IonRouterOutlet) => {
        if (this.router.url != '/home') {
          // await this.router.navigate(['/']);
          await this.location.back();
        } else if (this.router.url === '/home') {
          if (new Date().getTime() - this.lastTimeBackPress >= this.timePeriodToExit) {
            this.lastTimeBackPress = new Date().getTime();
            this.presentAlertConfirm();
          } else {
            navigator['app'].exitApp();
          }
        }
      });
    });
  }

  async presentAlertConfirm() {
    const alert = await this.alertController.create({
      // header: 'Confirm!',
      message: 'Are you sure you want to exit the app?',
      buttons: [{
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
        handler: (blah) => {}
      }, {
        text: 'Close App',
        handler: () => {
          navigator['app'].exitApp();
        }
      }]
    });
  
    await alert.present();
  }



 
}
1 Like