Ionic: How to use nav controller in app.component.ts - ionic-framework

Question

I am trying to develop an app in ionic 5. I added side menus in app.component.html along with ion-router-outlet. Now I want to navigate from side menus to my pages. I tried using router.navigate(['path']).
It navigates correctly, but the ion-back-button is not working on the navigated page.
These are my dependencies and version:
"dependencies": {
"#angular/common": "~10.0.0",
"#angular/core": "~10.0.0",
"#angular/forms": "~10.0.0",
"#angular/platform-browser": "~10.0.0",
"#angular/platform-browser-dynamic": "~10.0.0",
"#angular/router": "~10.0.0",
"#ionic-native/core": "^5.0.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^5.0.0",
"cordova-android": "8.1.0",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
}
my app.component.html
<ion-menu *ngIf="isSideDrawerAllowed()" side="start" menuId="first" contentId="main">
<ion-header>
<ion-toolbar translucent>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<!-- <ion-item (click)="navigateTo('/about-us')"> -->
<ion-item [routerLink]="['/about-us']">
<ion-icon name="mail" slot="start"></ion-icon>
<ion-label>About me</ion-label>
</ion-item>
<ion-item (click)="navigateTo('/schedule')">
<ion-icon name="paper-plane" slot="start"></ion-icon>
<ion-label>Schedule</ion-label>
</ion-item>
<ion-item (click)="navigateTo('/news')">
<ion-icon name="heart" slot="start"></ion-icon>
<ion-label>News</ion-label>
</ion-item>
<ion-item (click)="navigateTo('/gallary')">
<ion-icon name="archive" slot="start"></ion-icon>
<ion-label>Gallary</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main"></ion-router-outlet>
app.component.ts
import { Component, OnInit, QueryList, ViewChildren } from '#angular/core';
import { Platform, AlertController, IonRouterOutlet, ToastController, NavController } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { Router, RouterModule } from "#angular/router";
import { Location } from '#angular/common';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
#ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet>;
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private alertController: AlertController,
private toastController: ToastController,
private router: Router,
private location: Location
) {
this.initializeApp();
}
initializeApp() {
console.log('initializeApp')
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
isSideDrawerAllowed() {
let allowedRoutes = ["/", "/home"]
return allowedRoutes.includes(this.router.url)
}
navigateTo(url) {
this.router.navigateByUrl(url)
}
}
Please help me.

Answer 1

You don't need router or allowed routes. Your routes should already be set-up in app-routing.module.ts. Since you are not calling the ionic nav controller your URLs are not being added to the stack and so the back function does not work. navController knows about routes set-up in your routing modules.
Do this:
import { Component, OnInit } from '#angular/core';
import { Platform, NavController } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private navController: NavController
) {
this.initializeApp();
}
initializeApp() {
console.log('initializeApp')
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
navigateTo(url) {
this.navController.navigateForward(url);
}
}

Answer 2

NavController is deprecated as of Ionic 4, try using ion-nav (Nav).