IonRouterOutlet doesn't work inside app.component

I’m using Ionic v5 and Angular v10,

And i’m trying to bind hardware back button event inside app.component . But every time when i try to access routerOutlet it returns undefined error.

[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 { FcmService } from "@core/services/fcm-service/fcm.service";
import { AuthenticationService } from "@core/services/authenticatiion-service/authentication.service";
import { Location } from "@angular/common";
import { Plugins } from "@capacitor/core";

const { App } = Plugins;

@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 fcmService: FcmService,
    private authService: AuthenticationService,
    private alertController: AlertController,
    private location: Location,
    private routerOutletShit: IonRouterOutlet
  ) {
    this.authService.checkToken();
    this.initializeApp();
    this.backButtonEvent();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.authService.changeRoutes();
      this.fcmService.initPush();
    });
  }

  backButtonEvent() {
    

    this.platform.backButton.subscribeWithPriority(10, () => {
      if (!this.routerOutlet.canGoBack()) {
        alert("event triggered !");
      }
    });
  }

  async presentAlertConfirm() {
    const alert = await this.alertController.create({
      cssClass: "my-custom-class",
      header: "Confirm",
      message: "Are you sure you want to exit ?",
      backdropDismiss: false,
      buttons: [
        {
          text: "Cancel",
          role: "cancel",
          cssClass: "secondary",
        },
        {
          text: "Logout",
          handler: () => {
            this.authService.logout();
            App.exitApp();
          },
        },
      ],
    });

    await alert.present();
  }
}

And hardware back button event is triggering but returns error on routerOutlet .

Any help ?

1 post - 1 participant

Read full topic