title: No provider for NavController! Ionic 3
body: <p>I'm Using <code>Ionic3</code> for my university project , I had added setting parts of my <code>app.html</code> and trying to link <code>(click)="home()"</code> but it's not working for me.</p>
  
  <p>I got following error </p>
  
  <blockquote>
    <p>Error: No provider for NavController!
        at injectionError (<a href="http://localhost:8100/build/vendor.js:1527:90" rel="noreferrer">http://localhost:8100/build/vendor.js:1527:90</a>)
        at noProviderError (<a href="http://localhost:8100/build/vendor.js:1565:12" rel="noreferrer">http://localhost:8100/build/vendor.js:1565:12</a>)
        at ReflectiveInjector_.<em>throwOrNull (<a href="http://localhost:8100/build/vendor.js:3007:19" rel="noreferrer">http://localhost:8100/build/vendor.js:3007:19</a>)
        at ReflectiveInjector</em>.<em>getByKeyDefault (<a href="http://localhost:8100/build/vendor.js:3046:25" rel="noreferrer">http://localhost:8100/build/vendor.js:3046:25</a>)
        at ReflectiveInjector</em>.<em>getByKey (<a href="http://localhost:8100/build/vendor.js:2978:25" rel="noreferrer">http://localhost:8100/build/vendor.js:2978:25</a>)
        at ReflectiveInjector</em>.get (<a href="http://localhost:8100/build/vendor.js:2847:21" rel="noreferrer">http://localhost:8100/build/vendor.js:2847:21</a>)
        at resolveNgModuleDep (<a href="http://localhost:8100/build/vendor.js:9847:25" rel="noreferrer">http://localhost:8100/build/vendor.js:9847:25</a>)
        at NgModuleRef_.get (<a href="http://localhost:8100/build/vendor.js:10935:16" rel="noreferrer">http://localhost:8100/build/vendor.js:10935:16</a>)
        at resolveDep (<a href="http://localhost:8100/build/vendor.js:11438:45" rel="noreferrer">http://localhost:8100/build/vendor.js:11438:45</a>)
        at createClass (<a href="http://localhost:8100/build/vendor.js:11302:32" rel="noreferrer">http://localhost:8100/build/vendor.js:11302:32</a>)</p>
  </blockquote>
  
  <p>app.html</p>
  
  <pre><code>&lt;!--------------------------------------Main Navigation---------------------------&gt;
  
  &lt;ion-menu id="myMenu" [content]="content" side="right" persistent="true" [class]="selectedTheme"&gt;
    &lt;ion-header&gt;
      &lt;ion-toolbar&gt;
        &lt;ion-grid&gt;
  
          &lt;ion-row&gt;
            &lt;ion-col col-6&gt;
              &lt;div text-left style="" class="app-listname"&gt;
                Project&lt;/div&gt;
            &lt;/ion-col&gt;
            &lt;ion-col  (click)="home()"&gt;
              &lt;div class="tether-setting" style="text-align: right;font-size: 2rem; color:#a57958;"&gt;
                &lt;ion-icon ios="ios-settings-outline" md="md-settings"&gt;&lt;/ion-icon&gt;
              &lt;/div&gt;
  
            &lt;/ion-col&gt;
            &lt;ion-col&gt;
              &lt;div class="tether-logout" style="font-size: 2rem; color:#a57958; text-indent: 0rem;  text-align: right;"&gt;
                &lt;ion-icon ios="ios-log-out" md="md-log-out"&gt;&lt;/ion-icon&gt;
              &lt;/div&gt;
            &lt;/ion-col&gt;
          &lt;/ion-row&gt;
        &lt;/ion-grid&gt;
  
      &lt;/ion-toolbar&gt;
    &lt;/ion-header&gt;
  
    &lt;ion-content&gt;
      &lt;div class="ion-tm"&gt;
        &lt;ion-list&gt;
          &lt;button menuClose ion-item *ngFor="let p of pages" [class.activeHighlight]="checkActive(p)" (click)="openPage(p)"&gt;
            &lt;ion-icon [name]="p.icon" item-left&gt;&lt;/ion-icon&gt;{{p.title}}&lt;/button&gt;
  
        &lt;/ion-list&gt;
      &lt;/div&gt;
    &lt;/ion-content&gt;
  
  &lt;/ion-menu&gt;
  &lt;ion-nav [root]="rootPage" #content swipeBackEnabled="false" [class]="selectedTheme"&gt;&lt;/ion-nav&gt;
  &lt;!--------------------------------------Main Navigation---------------------------&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>   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&lt;{ title: string, component: any, icon: string }&gt;;
  
    constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private settings: SettingsProvider,private navCtrl: NavController) {
      this.settings.getActiveTheme().subscribe(val =&gt; this.selectedTheme = val);  //Themeoption
  
      platform.ready().then(() =&gt; {
        statusBar.styleDefault();
        splashScreen.hide();
      });
  
  
      platform.ready().then(() =&gt; {
        // 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);
    }
  }
  </code></pre>