Uncaught (in promise): TypeError: Cannot read property 'apply' of undefined in ionic 2 app

Question

I'm trying to do native facebook login and I get this error

Uncaught (in promise): TypeError: Cannot read property 'apply' of undefined

I show you all my project code. just saying it let me to connect to facebook successfully but it shows me these errors.

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav } from 'ionic-angular';
import { StatusBar, Splashscreen, NativeStorage } from 'ionic-native';

import { LoginPage } from '../pages/login/login';
import { UserPage } from '../pages/user/user';

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {

  @ViewChild(Nav) nav: Nav;
  rootPage: any;

  constructor(platform: Platform) {
    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( function (data) {
        // user is previously logged and we have his data
        // we will let him access the app
        env.nav.push(UserPage);
        Splashscreen.hide();
      }, function (error) {
        //we don't have the user data so we will ask him to log in
        env.nav.push(LoginPage);
        Splashscreen.hide();
      });

      StatusBar.styleDefault();
    });
  }
}








/*import { Component,ViewChild } from '@angular/core';
import { Platform,Nav, LoadingController} from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

//import pages
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { SignupPage } from '../pages/signup/signup';
import { TabsPage } from '../pages/tabs/tabs';
import { AboutPage } from '../pages/about/about';
import {StudentsPage} from '../pages/students/students';



//import plugins
import firebase from 'firebase';
//import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
   public rootPage:any;
   //ref firebase
  public semesters:any;
  public userProfile: any;
  //user variables
  public currentUser: any;
  public id_user:any;
  public reg_boolean:any;
  public department:any;
  public year:any;
  public semester:any;
  public semesterdetails:any;

  constructor(platform: Platform, public loadingCtrl: LoadingController) {
    firebase.initializeApp({
    apiKey: "AIzaSyDOpRshkjuy_tGXSzw34RFHXmAFelyAUt0",
    authDomain: "haversami.firebaseapp.com",
    databaseURL: "https://haversami.firebaseio.com",
    storageBucket: "haversami.appspot.com",
    messagingSenderId: "704224601349"
    });

    //get user details
   // this.currentUser = firebase.auth().currentUser;//to uncomment
    this.userProfile = firebase.database().ref('/users');
    this.semesters = firebase.database().ref('/Semesters/sem');

    // this.id_user=this.af.auth.getAuth().uid; // to uncomment
    this.currentUser='1qfcMAQnglX9jsW5GdLpPko1HqE2';

      this.getUserProfile().on('value', (data) => {
      this.userProfile = data.val();
      this.reg_boolean = this.userProfile.reg_boolean;
      this.department=this.userProfile.depName;
      this.year=this.userProfile.year;

      console.log("enter:"+this.department+this.year);
      console.log(this.reg_boolean);
    });

      this.getSemester().on('value', (data) => {
      this.semesterdetails = data.val();
      this.semester = this.semesterdetails.sem_id;   
      console.log(this.semester);
    });

    //check if user connected
     firebase.auth().onAuthStateChanged((user) => {
       var that=this;
       console.log("#1"+user);
      if (user) {
        if(this.reg_boolean==true){
          console.log("adirush");  
           this.nav.setRoot(TabsPage,{
           dep:this.department,year:this.year,semester:this.semester

        })
          //this.rootPage=TabsPage;
          this.rootPage=TabsPage;
        }
        else{
        this.rootPage = SignupPage;
        }
        console.log("I'm here! HomePage");
      } else {
        this.rootPage = LoginPage;
        console.log("I'm here! LoginPage");
      }
    });

    let loader = this.loadingCtrl.create();
    loader.present();
   this.listenToUserStatusUpdate(loader);
   /*
    let fireBaseUser = firebase.auth().currentUser;
    console.log(fireBaseUser);
   if (fireBaseUser) {
        if(this.reg_boolean=="true"){
          console.log("adirush");  
           this.nav.setRoot(TabsPage,{
           dep:this.department,year:this.year,semester:this.semester

        })
          this.rootPage=TabsPage;
        }
        else{
        this.rootPage = SignupPage;
        }
        console.log("I'm here! HomePage");
      } else {
        this.rootPage = LoginPage;
        console.log("I'm here! LoginPage");
      }

    //this.rootPage = fireBaseUser ? SignupPage : LoginPage;

    platform.ready().then(() => {
      // 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();
    });
  }
  listenToUserStatusUpdate(loader: any) {
    firebase.auth().onAuthStateChanged((user) => {
      if(loader)
       loader.dismiss();
      console.log("The User:", user);
      if (user) {
          if(this.reg_boolean=="true"){
          console.log("adirush");  
           this.nav.setRoot(TabsPage,{
           dep:this.department,year:this.year,semester:this.semester

        })
          this.rootPage=TabsPage;
        }
        else{
        this.nav.setRoot(SignupPage);
        }
      } else {
        this.nav.setRoot(LoginPage);
      }
    });
  }


   getUserProfile(): any {
    //return this.userProfile.child(this.currentUser.uid); to uncomment
    return this.userProfile.child(this.currentUser); 
  }
  getSemester():any{
    return this.semesters.child("0");
  }


}
*/

LoginPage.ts

import { Component } from '@angular/core';
import { Facebook, NativeStorage } from 'ionic-native';
import { NavController } from 'ionic-angular';
import { UserPage } from '../user/user';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
  FB_APP_ID: number = 1816752771906363;

  constructor(public navCtrl: NavController) {
    Facebook.browserInit(this.FB_APP_ID, "v2.8");
  }

  doFbLogin(){
    let permissions = new Array<string>();
    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<string>();

      //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(UserPage);
        }, function (error) {
          console.log(error);
        })
      })
    }, function(error){
      console.log(error);
    });
  }
}

UserPage.ts

    import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Facebook, NativeStorage } from 'ionic-native';
import { LoginPage } from '../login/login';

@Component({
  selector: 'page-user',
  templateUrl: 'user.html'
})

export class UserPage {

  user: any;
  userReady: boolean = false;

  constructor(public navCtrl: NavController) {}

  ionViewCanEnter(){
    let env = this;
    NativeStorage.getItem('user')
    .then(function (data){
      env.user = {
        name: data.name,
        gender: data.gender,
        picture: data.picture
      };
        env.userReady = true;
    }, function(error){
      console.log(error);
    });
  }

  doFbLogout(){
    var nav = this.navCtrl;
    Facebook.logout()
    .then(function(response) {
      //user logged out so we will remove him from the NativeStorage
      NativeStorage.remove('user');
      nav.push(LoginPage);
    }, function(error){
      console.log(error);
    });
  }
}

Answer 1

I found the answer

export class LoginPage {
    FB_APP_ID: number = 1816752771906363;

    constructor(public navCtrl: NavController) {
        Facebook.browserInit(this.FB_APP_ID, "v2.8");
    }
}

Remove

`FB_APP_ID: number = 1816752771906363;`

and

`Facebook.browserInit(this.FB_APP_ID, "v2.8");`

And it will work perfectly.

Answer 2

It seems you are using the Facebook cordova plugin and you didn't add it by the command. Try this:

ionic plugin add cordova-plugin-facebook4 

Check this: https://ionicframework.com/docs/v2/native/facebook/

Answer 3

Add:

declare const facebookConnectPlugin: any;

to the declarations.d.ts file. It worked for me.

Reference: Please follow the discussion here