NullInjectorError: No provider for NavController

Ionic Framework ionic-v3
1

I’ve read countless forum posts but I can’t figure out what am missing in my code which gives me the error.

"ERROR Error: “Uncaught (in promise): Error: StaticInjectorError(AppModule)[Content -> NavController]: StaticInjectorError(Platform: core)[Content -> NavController]: NullInjectorError: No provider for NavController!”

Here is my code – am trying to navigate away from the login page after a successful authentication but on getting to the navCtrl.push(‘pagename’) / navCtrl.setRoot(‘Pagename’) error occurs. Pages are lazyloaded.

import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public storage: Storage,
    public loadingCtrl: LoadingController,
    public formBuilder: FormBuilder,
    public WPService: WpServiceProvider,
    public authHandler: AuthServiceProvider
  ) {

    this.isLoggedIn = authHandler.isLoggedIn();
    this.isLoggedIn.subscribe((data) => {
      console.log(data);
    });

  }

doLogin(value) {
    let loading = this.loadingCtrl.create();
    loading.present();
    this.authHandler.doLogin(value.username, value.password).then((result) => {
      if (result) {
        console.log(this);
        this.navCtrl.push("HomePage");
        loading.dismiss();

      }
      else{
        throw new Error('Login Failed...');
      }
    }, (err) => {
      console.error(err);
      loading.dismiss();
      // Error log
    });
  }

The rest of the code to navigate away to other pages works…

doRegister() {
    this.navCtrl.push("RegisterPage");
  }

The result of console.log(this) inside doLogin()

{…}
​
WPService: Object { http: {…}, wposts: 1, url: "http://localhost:8100/index.php/wp-json/wp/v2/", … }
​
authHandler: Object { localStorage: {…}, http: {…}, Config: {…}, … }
​
formBuilder: Object {  }
​
isLoggedIn: Object { _isScalar: false, source: {…}, operator: {…} }
​
loadingCtrl: {…}
​​
_app: Object { _disTime: 0, _scrollTime: 0, _title: "Login", … }
​​
config: Object { _c: {…}, _s: {}, _modes: {…}, … }
​​
<prototype>: Object { create: create()
, … }
​
login_form: Object { pristine: false, touched: true, status: "VALID", … }
​
navCtrl: Object { _config: {…}, _elementRef: {…}, _renderer: {…}, … }
​
navParams: Object { data: {} }
​
storage: Object { _driver: "asyncStorage", _dbPromise: {…} }
​
userData: Object { token: "", user_email: "", user_nicename: "", … }
​
<prototype>: Object { ionViewWillLoad: ionViewWillLoad(), doLogin: doLogin(), goHome: goHome(), … }
2

Hi @alexmigwi :wave:

Have you checked this section from the Ionic 3 docs? Maybe it can help: https://ionicframework.com/docs/v3/troubleshooting/#no-provider-for-paramtype-myclass---paramtype

Best,
Rodrigo

3

The NavController is already imported into the ts file for the page and other functions that navigate away from the login page in the same ts file work as expected…

4

For those who come along…I had by mistake imported NavController into a provider loaded in the page I was trying to navigate to.

2 Likes