Ion-nav push method not working in Ionic 4

I am using Ionic v4 and using router navigation for all page navigation/routing.

However, I have a peculiar case requirement where I wish to push new components on to the stack without affecting the app overall router (Ionic 4 document - ionicframework.com/docs/api/nav). I am using a slide-in menu (split-pane) that needs to have its own page stack.

My currentPage html (current-page.page.html) has a button component -

<ion-button (click)="goToNextPage()">Next Page</ion-button>

My currentPage script file (current-page.page.ts) has the following code -

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';
import { NextPage } from '../next-page/next-page.page';

@Component({
  selector: 'current-page',
  templateUrl: './current-page.page.html',
  styleUrls: ['./current-page.page.scss'],
})
export class CurrentPage implements OnInit {

  constructor(public navCtrl: NavController, public navParams: NavParams) { }

  goToNextPage () {
    this.navCtrl.push('NextPage');
  }

  ngOnInit() {
  }

}

However, I get the format error as Property 'push' does not exist on type 'NavController'

Not sure how to use the push method properly. Any help will be appreciated.

Navigation in ionic 4 is now different… it uses angular routing now… check this: ionic 4 page navigtion

you have to remove NavController from your ts file and you have to use

 this.router.navigate(['path'])

(you can find your path from your app.routing.module or tabs.router.module)

instead of NavCtrl.push()

Hi do you have any solution?
We migrating v3 to v4 and using tabs with router, but also want to be able to push and pop components to navigation stack within the tabs. Because those logic is to complex to rewrite in angular router way.
I found this ion-nav, but there is no documentation how to use it, or how to combine it with angular router.


Only if I add the tag inside the tab component then I’m abble to push components, but the ion nav is between the parent tabs page header and footer.