In ionic 2 trying to move(navigate) from one page to another, but it is not working?

Question

I have just started learning ionic 2, so I'm trying to make new page and navigate from home page to about page.

When I try to use this.navCtrl.push('AboutPage') it shows "push property does not exist on nav controller". By running following code on console shows error "cannot read property push of undefined".

I also tried this.navCtrl.navigateforward() nothing works. i don't know what is wrong with code.

home.ts

import { Component} from '@angular/core';<br/>
import { NavController } from '@ionic/angular';<br/>
import { AboutPage } from '../about/about.page';<br/>
import { AboutPageModule } from '../about/about.module';<br/>

@Component({<br/>
  selector: 'app-home',<br/>
  templateUrl: 'home.page.html',<br/>
  styleUrls: ['home.page.scss'],<br/>
})<br/>
export class HomePage {<br/>
  nav: any;<br/>
 constructor( public navCtrl: NavController) {}<br/>
    
 next(){<br/>
this.nav.push(AboutPage);}}    <br/>

**home.html**<br/>
<ion-header [translucent]="true"><br/>
  <ion-toolbar><br/>
    <ion-title><br/>
      welcome<br/>
    </ion-title><br/>
  </ion-toolbar><br/>
</ion-header><br/>
 <ion-content> <br/>
    <ion-button (click)= "next()"> next  </ion-button></br>
  </ion-content></br>


**app.module.ts**</br>


import { NgModule } from '@angular/core';</br>
import { BrowserModule } from '@angular/platform-browser';</br>
import { RouteReuseStrategy } from '@angular/router';</br>
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';</br>
import { SplashScreen } from '@ionic-native/splash-screen/ngx';</br>
import { StatusBar } from '@ionic-native/status-bar/ngx';</br>

import { AppComponent } from './app.component';</br>
import { AppRoutingModule } from './app-routing.module';</br>

import { AboutPage } from './about/about.page';</br>


@NgModule({</br>
  declarations: [AppComponent, AboutPage ],</br>
  entryComponents: [ AboutPage ],</br>
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],</br>
  providers: [</br>
    StatusBar,</br>
    SplashScreen,</br>
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }</br>
  ],</br>
  bootstrap: [AppComponent]</br>
})</br>
export class AppModule {}</br>
`       

Answer 1

You can try this ..

this.navCtrl.goForward('some-route');

Or this may help you..
NavController doesn't work in Ionic 4