Android BackButton issues


I’m having a weird issue. I’ve taken over an Ionic app which I will continue developing and fixing bugs. One bug I have is preventing the app from just closing down when clicking the backbutton.

I’ve tried and I didn’t get it to work. Although, with the same code, I tried making fresh Ionic project, made the same thing, and then it worked.

All the || || in the if the statements were just for testing. I would appreciate if you had any idea why thisi is happening. On a very tight schedule right now.

import { Component } from '@angular/core';
import { Platform,Events, App, AlertController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Network } from '@ionic-native/network';
import { NetworkProvider } from '../providers/network/network';
import { LoginPage } from '../pages/login/login';

  templateUrl: 'app.html'
export class MyApp {

  private debug: boolean

  rootPage:any = LoginPage;

    platform: Platform, 
    statusBar: StatusBar, 
    splashScreen: SplashScreen, 
    public events: Events,
    public network: Network,
    public networkProvider: NetworkProvider,
    app: App,
    private alertCtrl: AlertController

      this.debug = true

      platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.

        // Offline event'network:offline', () => {
            alert('network:offline ==> ';    

        // Online event'network:online', () => {
            alert('network:online ==> ';        

      platform.registerBackButtonAction(() => {
        let nav = app.getActiveNavs()[0];
        let activeView = nav.getActive();            
        if(this.debug === true){
          console.log('APP.COMPONENT.TS: registerBackButtonActivity(): avtiveView: ',

        if( === "HomePage" || === "GroupPage" || === "LoginPage" || === "MyApp") {
            if (nav.canGoBack()){ //Can we go back?
            } else {
                const alert = this.alertCtrl.create({
                    title: 'App termination',
                    message: 'Do you want to close the app?',
                    buttons: [{
                        text: 'Cancel',
                        role: 'cancel',
                        handler: () => {
                            console.log('Application exit prevented!');
                        text: 'Close App',
                        handler: () => {
                            platform.exitApp(); // Close this application


Spontaneously I would say that you could not rely on page name while using lazy loading, you might found I think some other post about this on the forum

Alright, will check it out :slight_smile:

But in that case, why did it work in my fresh project where I didn’t do anything else with pagehandling, it just worked out of the box?

A fresh v3 project comes without lazy loading I guess

Here I’m assuming you are using lazy loading in the project where it doesn’t work, right?

Yeah, the workflow is rootPage: LoginPage. User is logging in, pushing “GroupPage” which is a tabspage.

You could maybe give a try with

const activeView: ViewController = this.navController.getActive();

and then have a look in activeView if you see something to identify the page (like the instance)

Hope it could help

Alright, cool, will give it a try. I did make it for each and every page to get the name, and it says correctly “LoginPage”, “HomePage” and so on, but will try your way.

1 Like

Ok so just to test I did what you wrote and yes, I get data, but it’s the same data I saw before. What I did now though was add an else to the backbuttonAction, just to print an alert. And it’s not even going in there, the problem must be somewhere else. It’s not hooking the backbutton if you understand what I mean?

I also tried setting an alert before any code executes and nothing even happens. So yeah, the app doesn’t bind to this function at all which is weird since it is doing it with the exact same code, at the same place in a fresh project. Ripping my hair off :stuck_out_tongue:

Ionic v3 right? Not v4 right?

Here’s a (working) copy/paste of my Ionic v3 app:

private overrideHardwareBackAction() {
    this.platform.ready().then(() => {
        this.unregisterCustomBackActionFunction = this.platform.registerBackButtonAction(() => {
            let activeView: ViewController = this.navController.getActive();

            if (activeView != null && ((<any> activeView).instance instanceof MyPage)) {
            } else {

look the same as, except maybe the platform ready

P.S.: Yes I know, instance of is ugly, I removed it when I migrated to v4 :wink:

Yikes, actually, 4.11 wrong forum? >.>

Will test it. Thanks!

That’s change everything!


wait 4.11?

I don’t speak about the ionic cli I mean ionic angular

could you display your ionic version plz

Ahh, 3.9.2, sorry (Post must be at least 20 characters, ignore this)


so the code I displayed above works in v3 for me

It’s so weird. I tried making a simple function as an alert. It’s not hooking to that either. I mean, in the fresh one, just a simple registerbackbutton…alert… works. Same code doesn’t work in my project. I can’t see anywhere in the code where they override the backbutton anywhere else. Could anything in the config file or any import collide with it?

mmmh to be honest I don’t know I don’t know your project

have you try to only call this.unregisterCustomBackActionFunction when the platform is ready?

Will try! Is that a global functions or something? From where is it called?