title: Ionic 3. No provider for NavController
body: <p>My question is similar to the one found <a href="https://stackoverflow.com/questions/49049762/nullinjectorerror-no-provider-for-navcontroller">here</a></p>
  
  <p>But i'm not sure if its the same scenario for him, since the error goes away sometimes when I stop the app and restart using ionic serve. The error returns back again randomly. I have noticed that when I use debugger statement in the app.component.ts constructor I can bypass the error. Any help would be appreciated. Thank you.</p>
  
  <p>Here is my code</p>
  
  <p>app.component.ts</p>
  
  <pre><code>export class MyApp {
      @ViewChild('content') nav: Nav;
  
      rootPage: any = HomePage;
  
      pages: Array&lt;{ title: string, component: any }&gt;;
  
  
      constructor(public platform: Platform,
      public statusBar: StatusBar,
      public splashScreen: SplashScreen) {
      this.initializeApp();
  
      this.pages = [
        { title: 'Dashboard', component: DashboardPage },
      ];
      debugger
    }
  
    initializeApp() {
      this.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.
        this.statusBar.styleDefault();
        this.splashScreen.hide();
      });
    }
  
    openPage(page) {
      // Reset the content nav to have just this page
      // we wouldn't want the back button to show in this scenario
      this.nav.setRoot(page.component);
    }
  }
  </code></pre>
  
  <p>app.html</p>
  
  <pre><code>&lt;ion-menu [content]="content"&gt;
    &lt;ion-header&gt;
      &lt;ion-toolbar&gt;
        &lt;ion-title&gt;Menu&lt;/ion-title&gt;
      &lt;/ion-toolbar&gt;
    &lt;/ion-header&gt;
  
    &lt;ion-content&gt;
      &lt;ion-list&gt;
        &lt;button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"&gt;
          {{p.title}}
        &lt;/button&gt;
      &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  
  &lt;/ion-menu&gt;
  &lt;ion-nav #content swipeBackEnabled="false" [root]="rootPage"&gt;&lt;/ion-nav&gt;
  </code></pre>
  
  <p>home.ts</p>
  
  <pre><code>export class HomePage {
    token: string;
    constructor(public navCtrl: NavController,
      public menuCtrl: MenuController,
      public storage: Storage) {
      setTimeout(() =&gt; {
        this.storage.get('_token').then((token) =&gt; {
          this.token = token;
          if (this.token &amp;&amp; this.token.length &gt; 0) {
            this.navCtrl.setRoot(DashboardPage)
          } else {
            this.navCtrl.setRoot(LoginPage)
          }
        }).catch((error) =&gt; {
          console.log(error);
          this.navCtrl.setRoot(LoginPage)
        });
      }, 1000)
    }
  
    ionViewWillEnter() {
      this.menuCtrl.enable(false);
    }
    ionViewWillLeave() {
      this.menuCtrl.enable(true);
    }
  
  }
  </code></pre>
  
  <p>login.ts</p>
  
  <pre><code>export class LoginPage {
    username: string;
    password: string;
  
    constructor(public navCtrl: NavController,
      public navParams: NavParams,
      public userProvider: UserProvider,
      public storage: Storage,
      public alertCtrl: AlertController,
      public menuCtrl: MenuController) {
  
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad LoginPage');
    }
  
    login() {
      console.log("Logging in...", this.username, this.password);
      var credentials = { 'email': this.username, 'password': this.password };
      this.userProvider.login(credentials).then((validResponse: any) =&gt; {
        console.log('success', validResponse);
        var data = validResponse.data;
        this.storage.set('_token', data.token);
        this.navCtrl.setRoot(DashboardPage);
      }).catch((errorResponse: any) =&gt; {
        console.log('error', errorResponse);
        var title = '';
        var subTitle = '';
        title = "Oops!"
        if (errorResponse.status == 401) {
          subTitle = "Invalid Username/Password";
        } else {
          var errorObject = errorResponse.error;
          if (errorObject.errors) {
            for (let error of errorObject.errors) {
              subTitle += error + '. ';
            }
          } else {
            subTitle = errorResponse.message;
          }
        }
        this.presentAlert(title, subTitle);
      });
    }
  
    presentAlert(title, subTitle) {
      let alert = this.alertCtrl.create({
        title: title,
        subTitle: subTitle,
        buttons: ['Ok']
      });
      alert.present();
    }
  
    ionViewWillEnter() {
      this.menuCtrl.enable(false);
    }
    ionViewWillLeave() {
      this.menuCtrl.enable(true);
    }
  
  }
  </code></pre>
  
  <p>login.html</p>
  
  <pre><code>&lt;ion-content padding&gt;
    &lt;div class="login-holder"&gt;
      &lt;ion-img class="logo" width="120" src="../../assets/imgs/logo.png"&gt;&lt;/ion-img&gt;
      &lt;br&gt;
      &lt;ion-img class="hero" width="250" src="../../assets/imgs/restaurant.png"&gt;&lt;/ion-img&gt;
      &lt;ion-input class="username" [(ngModel)]="username" type="text" placeholder="Phone or Email"&gt;&lt;/ion-input&gt;
      &lt;ion-input class="password" [(ngModel)]="password" type="password" placeholder="Password"&gt;&lt;/ion-input&gt;
      &lt;button class="login" ion-button full (click)="login()"&gt;Login&lt;/button&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>My flow is like this, HomePage is a temporary screen before going to login page,
  after a timeout I take to LoginPage or Dashboard Page, depending on if they already have a token in local storage. From Login page, I take the users to Dashboard Page.</p>
  
  <p>Since I'm new to angular and ionic, I'm not even sure if I'm doing it right. I have looked into all the similar questions in stack overflow. </p>
  
  <ul>
  <li>Most of them got solutions by having passing App module in the constructor and retrieving navcontroller from the app. But that didnt work for me. </li>
  <li>Some suggested to check on the import path so I cross verified with docs &amp; starter project it seems correct.</li>
  <li>Some suggested to remove passing nav controller in the constructor but if you check my code I havent passed in constructor in app.component.ts I have only passed in the page's constructors which is in the skeleton code generated by the ionic generate page command.</li>
  </ul>
  
  <p>Thanks again for the time.</p>