ionique 2: Facebook Connexion -> Erreur: Aucun fournisseur dans NavController (TypeScipt)

Question

Je travaille sur le login facebook pour mon ionique 2 app (utilisé ce tutoriel: https://ionicthemes.com/tutorials/about/ionic2-facebook-login)

Mais maintenant, je reçois un erreur bizarre:

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

Quelqu'un a-t-il une idée pour résoudre ce problème? Merci beaucoup!

Answer 1

Vous ne pouvez pas importer NavController dans app.component.ts ou sur la page de l'application racine.

OPTION 1:

Essayez de vous en utilisant ViewChild

Donnez id élément root-nav

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

Dans le composant:

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:

À partir de votre code app.component.ts, vous ne fait besoin d'importer NavController du tout si votre modèle html ne contient que,

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

définir simplement la page requise pour 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: Il vaut mieux utiliser les fonctions ()=>{} fléchées pour callbacks au lieu de sauvegarde de contexte dans la deuxième variable.