bug: Android hardware back button stops working after redirecting navigation

Bug Report

Ionic version: [x] 4.x

Current behavior:

I have an Ionic 4 application where I have a service where I intercept the Angular routers NavigationStart events as follows…

 export class AppRoutingService {
      private currentNavigationForward: RoutingPartsModel;
      private rootNavigation: string;


      constructor(
        private navCtrl: NavController,
        private router: Router,
        private logger: Logger
      ) {
        // Monitor NavigationStart so we can look for a back button and redirect to home
        // page if need be
        this.router.events.pipe(
          filter(e => e instanceof NavigationStart))
          .subscribe((ev: NavigationStart) => {
            this.handlePageRouting(ev)
          });
      }

I want to do this as I have an application wide side menu with shortcuts to each of my feature pages. If a user goes to a feature page from this menu, then I want the back button to then goto the Home page, and NOT the previous feature page where it may have navigated from.

I do this my keeping track of each route forward, and then in the handlePageRouting I have the following code

if (this.currentNavigationForward.params.fromSideMenu) {
            this.currentNavigationForward = undefined;
            this.navigateRoot = undefined;
            this.logger.debug('handlePageRouting - Navigating to home');
            this.router.navigateByUrl(Constants.vals.pageRoutePaths.home);
          }

This all seems to work fine, however, I find that as soon (or soon after) I have had an instance where the above code executes the this.router.navigateByUrl(Constants.vals.pageRoutePaths.home), the Android hardware button stops working. If I go to another feature page from the home page, the hardware back button does nothing. It does not cause a NavigationStart event, nor is the following subscription called when on my home page.

this.backButtonSubscription = this.platform.backButton.subscribe(() => {   
            this.backButtonSubscription.unsubscribe();
            this.logger.info('Home exiting app via back button');
            navigator['app'].exitApp();
          });

However, the toolbar back button does still work, it is only the hardware buttons that stops working, and never recovers until I exit the app, and restart.

Expected behavior: I would like the hardware button to keep working after I have had to intercept and do the redirect to the Home page

Steps to reproduce: Run the sample application on an Android device From the Home page, first show the hardware back button works by using a button to go to either feature 1 or feature 2, and then the back button returns to Home page.

Even if we go to feature1, and then feature 2 via the button on feature 1, the hardware back button will return down the stack as expected. Also, back button from home will exit the app due to the Home page subscription this.platform.backButton.subscribe().

Now, to recreate the issue, go to feature1 via the Home page button, but now drag the side menu open, and goto feature 2.

Use hardware backbutton, and the this.router.navigateByUrl('/home'); in AppRoutingService will return us to the Home page (as we want).

From now on, the hardware back button will not work. We will not see console.log('handlePageRouting'); being logged any more

Related code: A sample application via GitHub Sample app to demonstrate this is at https://github.com/pjc2007/backbuttonprob.git

–>

Other information: Reported this exact thing on Stack Overflow https://stackoverflow.com/questions/56112539/ionic-4-android-hardware-back-button-stops-working-after-intercepting-navigation

Ionic info: Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\Latitudeuser\AppData\Roaming\nvm\v10.15.0\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 4 other plugins)
System:

   Android SDK Tools : 26.1.1 (C:\Android\android-sdk)
   NodeJS            : v10.15.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

[Gamaroff]

Getting the same problem. The only thing that works is:

document.addEventListener('backbutton', () => {}, false);

[pjc2007]

@moh4sa - I never got a work around for it, I had to disable some of my app functionality for Android. I haven’t tried Ionic 5 yet as I can’t use v5 as it is broken for Windows (Tabs) - which I have to support as well.