ionic 4 navigateRoot() showing hardware back-button

Question

I have a login page that will navigate the user to the home page when authentication is successful, to do this I use the navigateRoot() method from the angular router.

But when I do this, the hardware back-button still works and allows me to go back to the home page.

Am I doing something wrong, or is this a bug? Here is how the code used to navigate:

if (user) {
    this.buttonDisabled = false;
    this.loggingIn = false;
    this.navCtrl.navigateRoot('/home');
}

This is how my routes are defined:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './pages/home/home.module#HomePageModule',
  },
  {
    path: 'list',
    loadChildren: './pages/list/list.module#ListPageModule'
  },
  {
    path: 'login',
    loadChildren: './pages/login/login.module#LoginPageModule'
  },
  { path: 'task', loadChildren: './pages/task/task.module#TaskPageModule' },
  { path: 'door', loadChildren: './pages/door/door.module#DoorPageModule' },
  { path: 'work', loadChildren: './pages/work/work.module#WorkPageModule' },
  { path: 'address-search', loadChildren: './modals/address-search/address-search.module#AddressSearchPageModule' },
  { path: 'parts-list', loadChildren: './modals/parts-list/parts-list.module#PartsListPageModule' }
];

Environment info:

Ionic:

   ionic (Ionic CLI)             : 4.2.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @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) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 13 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.0
   NodeJS     : v12.9.0 (/usr/local/Cellar/node/12.9.0/bin/node)
   npm        : 6.11.2
   OS         : macOS
   Xcode      : Xcode 10.3 Build version 10G8

I hope I'm not the only one with this issue, it's driving me nuts.

Thanks in advance

Answer 1

I ran into this issue exactly as you described. In my app.component.html file, I was missing the <ion-app> wrapper around the <ion-router-outlet>. I put that in and it fixed it.

Answer 2

On your Home page Handle Hardware Back button like this to Close the Application:

E.g

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

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

Edit: If this will not work do like this:

this.platform.backButton.subscribeWithPriority(1, () => {
        //on or the other will work depending on hardware
        navigator['app'].exitApp();
 });

This will Close your application on home page.