Ion-nav push method not working in Ionic 4

#1

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.

#2

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

#3

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