No provider for NavController! Ionic 3

Question

I'm Using Ionic3 for my university project , I had added setting parts of my app.html and trying to link (click)="home()" but it's not working for me.

I got following 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 {Component, ViewChild} from '@angular/core';
import {Nav, Platform,NavController} from 'ionic-angular';
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';

import {HomePage} from '../pages/home/home';

import {SettingsPage} from "../pages/settings/settings";
import {HelpPage} from "../pages/help/help";

import {UserloginslidePage} from "../pages/userloginslide/userloginslide";
import {SettingsProvider} from "../providers/settings/settings";
import {ModalPage} from "../pages/modal/modal";
@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  @ViewChild(Nav) nav: Nav;
  rootPage: any = UserloginPage;
  selectedTheme: String;  //Themeoption
  activepage: any;
  pages: Array<{ title: string, component: any, icon: string }>;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private settings: SettingsProvider,private navCtrl: NavController) {
    this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);  //Themeoption

    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });


    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();
    });


    this.pages = [

      {title: 'Dashboard', component: HomePage, icon: "ios-home-outline"},

      {title: 'Settings', component: SettingsPage, icon: "ios-settings-outline"},
      {title: 'Help', component: HelpPage, icon: "ios-help-circle-outline"},
      {title: '  User loginslide ', component:UserloginslidePage, icon: "ios-contact-outline"},


    ];

    this.activepage = this.pages[0];
  }


  //Themeoption
  openPage(page) {


    this.nav.setRoot(page.component);
    this.activepage = page;

  }
  checkActive(page) {
    return page == this.activepage;
  }

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

Answer 1

As per Ionic v3 docs:

You can't inject NavController because any components that are navigation controllers are children of the root component so they aren't available to be injected.

You will need to remove the NavController from the constructor, as it cannot be injected, and trying to do so will result in the error you're facing.

Instead you should have an <ion-nav> component on your app template, and get its instance on the AppComponent's code-behind by using the @ViewChild directive.

Answer 2

I have resolved this problem in ionic 3 by following code.

import {App} from 'ionic-angular';

constructor(public app: App){}

login() { 
    this.app.getActiveNav().push(XxxPage);
}

Answer 3

Well, why do you try to import NavController? You have @ViewChild(Nav) nav: Nav; you can use it.

You must remove NavController from injecting in your constructor

Replace your line

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private settings: SettingsProvider,private navCtrl: NavController) {

with

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private settings: SettingsProvider) {

Then replace the line

 this.navCtrl.push(HomePage);

with

 this.nav.push(HomePage);

Answer 4

Try using getActiveNav()

Like this,

import {App} from 'ionic-angular';

constructor(public app: App){}

login() { 
    this.app.getActiveNav().setRoot(Home); 
}