Ionic 5 Harware Back Button only refresh the home page (without exiting the app)

Question

I am a bit new to mobile developments and in my app (Ionic 5, Angular 13, Android 9) I want to exit the app on touch of hardware back button (Best is at the home page). However, it only refresh the home page without exiting the app. I read several tutorials found on the internet including the following.

ionic - back button exit app not working in Ionic 5

But non of them seems helping me. Given below is my app.component.ts. What have I missed? Please help me. Thank you so much.

import { Component, ViewChild } from '@angular/core';
import { AlertController, IonRouterOutlet, Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Location } from '@angular/common';

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

@ViewChild(IonRouterOutlet, { static : true }) routerOutlet: IonRouterOutlet;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private location: Location,
    private alertController: AlertController

  ) {
    this.initializeApp();
  }

  backButtonEvent(){
    this.platform.backButton.subscribeWithPriority(10,()=>{
      if (!this.routerOutlet.canGoBack()){
        this.backButtonAlert();
      } else {
        this.location.back();
      }
    })
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.backButtonEvent();
    });
  }

  async backButtonAlert(){
    const alert = await this.alertController.create({
      message: "Do you want to close the app?",
      buttons: [{
        text: "Cancel",
        role: "Cancel"
      },{
        text: "Close",
        handler: ()=>{
          navigator['app'].exitApp();
        }
      }]
    });
    await alert.present();
  }

}

Answer 1

Try with these changes:

backButtonEvent(){
    this.platform.backButton.subscribeWithPriority(1, async ()=>{
        if (!this.routerOutlet.canGoBack()){
            this.backButtonAlert();
        } 
        else {
            this.location.back();
        }
    })
}

Changes: priority lowered to 1 and added async to the function.

Another option to try, if canGoBack is causing issues:

Import Router: import { Router } from '@angular/router';

Put it in constructor: private readonly router: Router

backButtonEvent(){
    this.platform.backButton.subscribeWithPriority(1, async ()=>{
    // put yourMainPage name here, the one where hardware backbutton
    // will have to exit the app
    if (this.router.url === '/yourMainPage') {
        this.backButtonAlert();
    }
    else { // if the user is on other page, he'll just go to previous
        window.history.back();
    }
}

And in backButtonAlert try both navigator['app'].exitApp(); and this.platform.exitApp(); and see if one would work.