content: Angular "Exiting the App" example exits from pages nested under ion-tabs #4804

URL

https://ionicframework.com/docs/developing/hardware-back-button#exiting-the-app

Issue Description

The Angular examples under "Exiting the App" query the root IonRouterOutlet with @ViewChild and exit when canGoBack() is false. In an app that uses ion-tabs, pages inside a tab are stacked in the tab's own outlet, so the root outlet's stack only ever holds the tabs page and canGoBack() is always false. On a page such as /tabs/home/detail, pressing the hardware back button exits the app instead of going back to /tabs/home.

Measured on @ionic/angular 9.0.9:

NavController.pop() walks from the active outlet up through its parents, so its result is the reliable signal. Suggested replacement for both Angular tabs (import from @ionic/angular/lazy for the modules example):

import { Component, inject } from '@angular/core';
import { NavController, Platform } from '@ionic/angular';
import { App } from '@capacitor/app';

@Component({ ... })
export class AppComponent {
  private platform = inject(Platform);
  private navCtrl = inject(NavController);

  constructor() {
    this.platform.backButton.subscribeWithPriority(1, async () => {
      const popped = await this.navCtrl.pop();
      if (!popped) {
        App.exitApp();
      }
    });
  }
}

Priority 1 runs before the built-in navigation handler (priority 0) and after menus and overlays (99 and 100), so it takes over the back navigation itself. The sentence about querying IonRouterOutlet with @ViewChild would need to change with it.

Both docs/developing/hardware-back-button.mdx and versioned_docs/version-v8/developing/hardware-back-button.mdx carry the same example.

Reported in ionic-team/ionic-framework#31598.