TypeError: Cannot read property 'canGoBack' of undefined

Issue

I'm trying to use IonRouterOutlet on app.component and here is the code

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
  ) {
    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() {
    console.log('back button event');
   

    this.platform.backButton.subscribeWithPriority(10, () => {
      if (!this.routerOutlet.canGoBack()) {
         console.log('cannot');
      }
    });
  }

  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();
  }
}

But every time the back button is pressed event-triggered but routerOutlet throws an undefined error when trying to access canGoBack().

TypeError: Cannot read property 'canGoBack' of undefined

Any help?

Solution

It didn't work inside the app.component, But it only works inside other components.

May be because app.component is the root component of an Angular app. Correct me if im wrong and explain further if someone knows why.

Answered By - pl-jay