this.navCtrl.push is not function


#1

I am learning Ionic framework. But it seems not to be very friendly to me. I am getting
this.navCtrl.push is not function Error. My app.component.ts code is below
It looks like NavController is not properly included that is why I am not able to access it’s methods. But while Importing it should Show Error , if something is not right there. It is not letting me to use push and setRoot etc.

//package.json
 "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/pro": "1.0.16",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  }

// src/app/app.component.ts
import { NavController } from 'ionic-angular';
import { Register } from '../pages/register/register';
//I HAVE NOT INCLUDED ALL IMPORTS
@Component({
  templateUrl: '../pages/login/login.html'
})
export class MyApp {
  @ViewChild('myNav') nav: NavController
  rootPage = Login;
  register = Register;

   //nav = '';
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen , private http: Http, private _global: AppGlobals, public navCtrl: NavController) {
   //this.navCtrl.setRoot(Register); // THIS IS NOT WORKING 
    //nav = this.navCtrl;
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  gotoregister(event) {  
    this.navCtrl.push(Register).then(
      response => {
        console.log('Response ' + response);
      },
      error => {
        console.log('Error: ' + error);
      }
    ).catch(exception => {
      console.log('Exception ' + exception);
    });
    //this.navCtrl.push(Register);   // I TRIED THIS ALSO
     //this.nav.push(Register); // I TRIED THIS ALSO
   // NO SUCCESS
  }
  }

#2

I don’t think you want to inject it also in your constructor; having two references seems unusual.

You’ve already “got” the controller via your @ViewChild('myNav') nav: NavController so you just do this.nav.setRoot(...) throughout.


#3

I did as you suggested but outout did not change. Is any other way to create link ?


#4

Your package.json is not relevant here. Your calling a nonexistent NavController is what matters. Impossible to help you unless you post the code related to gotoregister.