No provider for NavController! Ionic

Ionic Framework ionic-v3
1

Im Used Ionic3 for my university project , Im added setting part of my app.html and im try to link (click)=“home()” but its not work for me? How to fix this, I got a this error

Error: No provider for NavController! at injectionError (http://localhost:8100/build/vendor.js:1527:90) at noProviderError (http://localhost:8100/build/vendor.js:1565:12) at ReflectiveInjector_.throwOrNull (http://localhost:8100/build/vendor.js:3007:19) at ReflectiveInjector.getByKeyDefault (http://localhost:8100/build/vendor.js:3046:25) at ReflectiveInjector.getByKey (http://localhost:8100/build/vendor.js:2978:25) at ReflectiveInjector.get (http://localhost:8100/build/vendor.js:2847:21) at resolveNgModuleDep (http://localhost:8100/build/vendor.js:9847:25) at NgModuleRef_.get (http://localhost:8100/build/vendor.js:10935:16) at resolveDep (http://localhost:8100/build/vendor.js:11438:45) at createClass (http://localhost:8100/build/vendor.js:11302:32)

app.html

<!--------------------------------------Main Navigation--------------------------->

<ion-menu id="myMenu" [content]="content" side="right" persistent="true" [class]="selectedTheme">
  <ion-header>
    <ion-toolbar>
      <ion-grid>

        <ion-row>
          <ion-col col-6>
            <div text-left style="" class="app-listname">
              Project</div>
          </ion-col>
          <ion-col  (click)="home()">
            <div class="tether-setting" style="text-align: right;font-size: 2rem; color:#a57958;">
              <ion-icon ios="ios-settings-outline" md="md-settings"></ion-icon>
            </div>

          </ion-col>
          <ion-col>
            <div class="tether-logout" style="font-size: 2rem; color:#a57958; text-indent: 0rem;  text-align: right;">
              <ion-icon ios="ios-log-out" md="md-log-out"></ion-icon>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>

    </ion-toolbar>
  </ion-header>

  <ion-content>
    <div class="ion-tm">
      <ion-list>
        <button menuClose ion-item *ngFor="let p of pages" [class.activeHighlight]="checkActive(p)" (click)="openPage(p)">
          <ion-icon [name]="p.icon" item-left></ion-icon>{{p.title}}</button>

      </ion-list>
    </div>
  </ion-content>

</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" [class]="selectedTheme"></ion-nav>
<!--------------------------------------Main Navigation--------------------------->

app.component.ts

import {Nav, Platform, MenuController,NavController} from 'ionic-angular';

  home(){
    this.navCtrl.push(HomePage);
  }
2

Hello,
maybe declaration of navCtrl is missing or in your case not nessesary.

You have in your html a ion-nav. The template normally fetch this with

@ViewChild(Nav) nav: Nav

Then you must use

this.nav.push(Homepage)

Maybe you will inject a navcontroller in constructor then you use something like

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

Maybe you you have mixed these two different approaches to access a ion-nav from html and inject navcontroller in constructor.

best regards, anna-liebt

2 Likes