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();
  }



 
}
4 Likes

Thank you so mush it’s work for me

You can also try the following code snippets,

Make a change or add code like this in your app.component.ts file

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

import { Platform, IonRouterOutlet, ToastController } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  //code for exit app
  // set up hardware back button event.
  lastTimeBackPress = 0;
  timePeriodToExit = 2000;

  //code for exit app
  @ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private toastController: ToastController,
    private router: Router,
    private speechRecognition: SpeechRecognition
  ) {
    this.initializeApp();
    // Initialize BackButton Eevent.
    this.backButtonEvent();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleLightContent();
      this.splashScreen.hide();
    });
  }
  
  // active hardware back button
  backButtonEvent() {
    this.platform.backButton.subscribe(async () => {

      this.routerOutlets.forEach(async (outlet: IonRouterOutlet) => {
        if (outlet && outlet.canGoBack()) {
          outlet.pop();

        } else if (this.router.url === '/home') {
          if (new Date().getTime() - this.lastTimeBackPress < this.timePeriodToExit) {
            // this.platform.exitApp(); // Exit from app
            navigator['app'].exitApp(); // work in ionic 4

          } else {
            const toast = await this.toastController.create({
              message: 'Press back again to exit App.',
              duration: 2000,
              position: 'middle'
            });
            toast.present();
            // console.log(JSON.stringify(toast));
            this.lastTimeBackPress = new Date().getTime();
          }
        }
      });
    });
  }
}

Make a change or add code like this in your home.ts file or where you want to user exit from your app page.

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  public subscription: any;

  constructor(private platform: Platform) { }

  ionViewDidEnter() {
    this.subscription = this.platform.backButton.subscribe(() => {
      navigator['app'].exitApp();
    });
  }

  ionViewWillLeave() {
    this.subscription.unsubscribe();
  }
}

Hope it helps you.

this.platform.backButton.subscribeWithPriority()
Didn’t work for me but:

this.platform.backButton.subscribe()
Worked perfectly

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