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 - I am using a slide-in menu (split-pane) that needs to have its own page stack.

My currentPage html ( has a button component -

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

My currentPage script file ( has the following code -

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

  selector: 'current-page',
  templateUrl: './',
  styleUrls: ['./'],
export class CurrentPage implements OnInit {

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

  goToNextPage () {

  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


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

instead of NavCtrl.push()