Ionic 2: Facebook Login -> Error: No Provider in NavController (TypeScript)

I've been working on the facebook login for my ionic 2 app (used this tutorial: https://ionicthemes.com/tutorials/about/ionic2-facebook-login)

But now i get a weird error:

RunTimeError Error in :0:0 caused by: No provider for NavController

app.component.ts:

    import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { NativeStorage } from '@ionic-native/native-storage';


import { TabsPage } from '../pages/tabs/tabs';
import { WelcomePage } from '../pages/welcome/welcome';
import { DetailPage } from '../pages/detail/detail';


@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    rootPage: any = WelcomePage;

    constructor(NativeStorage: NativeStorage, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        platform.ready().then(() => {
            // Here we will check if the user is already logged in
            // because we don't want to ask users to log in each time they open the app
            let env = this;
            NativeStorage.getItem('user')
                .then((data) => {
                    // user is previously logged and we have his data
                    // we will let him access the app
                    this.rootPage = DetailPage;
                    splashScreen.hide();
                }, (error) => {
                    //we don't have the user data so we will ask him to log in
                    this.rootPage = WelcomePage;
                    splashScreen.hide();
                });

            statusBar.styleDefault();
        });
    }
}

welcome.ts:

import { Component } from '@angular/core';
import { Facebook, NativeStorage } from 'ionic-native';
import { NavController } from 'ionic-angular';
import { DetailPage } from '../detail/detail';
import { ViewChild } from '@angular/core';

@Component({
    selector: 'page-welcome',
    templateUrl: 'welcome.html'
})
export class WelcomePage {
    rootPage: any = WelcomePage;
    @ViewChild('navRoot') navCtrl: NavController;
    FB_APP_ID: number = 123456789;

    constructor() {
        Facebook.browserInit(this.FB_APP_ID, "v2.8");
    }

    doFbLogin() {
        let permissions = new Array();
        let nav = this.navCtrl;
        //the permissions your facebook app needs from the user
        permissions = ["public_profile"];


        Facebook.login(permissions)
            .then(function (response) {
                let userId = response.authResponse.userID;
                let params = new Array();

                //Getting name and gender properties
                Facebook.api("/me?fields=name,gender", params)
                    .then(function (user) {
                        user.picture = "https://graph.facebook.com/" + userId + "/picture?type=large";
                        //now we have the users info, let's save it in the NativeStorage
                        NativeStorage.setItem('user',
                            {
                                name: user.name,
                                gender: user.gender,
                                picture: user.picture
                            })
                            .then(function () {
                                nav.push(DetailPage);
                            }, function (error) {
                                console.log(error);
                            })
                    })
            }, function (error) {
                console.log(error);
            });
    }
}

You cannot import NavController in app.component.ts or the root app page.

OPTION 1:

Try to get it using ViewChild

Give element id to root-nav

<ion-nav #navRoot [root]="rootPage"></ion-nav>

In component:

import {ViewChild} from '@angular/core';

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    rootPage: any = WelcomePage;
    @ViewChild('navRoot') navCtrl:NavController;

    constructor(nativeStorage: NativeStorage, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { //remove navcontroller injected
        platform.ready().then(() => {
            // Here we will check if the user is already logged in
            // because we don't want to ask users to log in each time they open the app
            let env = this;
            //...

OPTION 2:

From your app.component.ts code, you dont actually need to import NavController at all if your html template only contains,

<ion-nav  [root]="rootPage"></ion-nav>

Simply set the required page to rootPage.

nativeStorage.getItem('user')
                .then( (data) => {
                    // user is previously logged and we have his data
                    // we will let him access the app
                    this.rootPage = DetailPage;
                    splashScreen.hide();
                }, (error) => {
                    //we don't have the user data so we will ask him to log in
                   this.rootPage = WelcomePage;
                    splashScreen.hide();
                });

Side Note: Better to use ()=>{} arrow functions for callbacks instead of saving context in second variable.