ES6: No provider for NavController! (MyApp -> NavController)

Short description of the problem:

NavController not injecting in the latest beta.

What behavior are you expecting?

NavController to inject in the constructor method

Steps to reproduce:

ionic start ExampleProject blank --v2
cd ExampleProject
ionic platform add android
ionic platform add ios

In the app/app.js file add the following code:

import {App, Platform, NavController, Alert} from 'ionic-framework/ionic';
import {Inject} from 'angular2/core';
import {HomePage} from './pages/home/home';


@App({
    template: '<ion-nav [root]="rootPage"></ion-nav>',
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
    constructor(@Inject(Platform) platform, @Inject(NavController) navController) {
        this.rootPage = HomePage;

        platform.ready().then(() => {

        });
    }
}

Ionic Version: 2.x

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
ios-deploy version: Not installed
ios-sim version: 5.0.6 
OS: Mac OS X El Capitan
Node Version: v0.12.7
Xcode version: Xcode 7.2.1 Build version 7C1002 

[tlancina]

This is intended behavior, as weird as it seems at first. Nav here is a child of MyApp, (specifically a ViewChild, because it’s in MyApp’s template), which means there is no NavController injector available to MyApp.

You can use @ViewChild to access Nav specifically (which extends NavController):

import {App, Platform, NavController, Alert} from 'ionic-framework/ionic';
import {Inject, ViewChild} from 'angular2/core';
import {HomePage} from './pages/home/home';
import {SomeOtherPage} from './pages/someotherpage/someotherpage';

@App({
    template: '<ion-nav [root]="rootPage"></ion-nav>',
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
    @ViewChild(Nav) nav;

    constructor(@Inject(Platform) platform) {
        this.rootPage = HomePage;

        platform.ready().then(() => {

        });
    }

    ngAfterViewInit(){
      //this.nav is now defined
      setTimeout(() => {
        this.nav.push(SomeOtherPage);
      }, 2000);
    }
}

I’m not sure if there’s a more Javascript-y way to use ViewChild, as I’m pretty sure the above is TypeScript, but all of the starters use the TypeScript compiler so it will work just fine either way (for more discussion on that see: #5493).

Going to close this as it’s not a bug, but please feel free to comment if you have any other questions/issues, thanks!

[kamil-kielczewski]

Here is solution to get nav controller in any provider

import {Injectable} from '@angular/core';
import {NavController, App} from "ionic-angular/index";
import { LoginPage } from "../../pages/login/login";
 
@Injectable()
export class ExampleProvider {
 
    private navCtrl: NavController;
 
    constructor(private app:App) {
        this.navCtrl = app.getActiveNav();
    }

    //...

    // example usage
    private Logout() {
        //...
        this.navCtrl.setRoot(LoginPage);
        this.navCtrl.popToRoot;
    }
}

I use this approach to detect unauthorized response from server in myAuthHttp which is Http wrapper (this wraper is used in all app instead standard Http and allow to send PUT/GET/POST/DELETE request with authentication token which expires after some time). But better solution will be to raise some ‘event’ from this provider and UI should detect it and go to login page - but how to do it?