I am trying to use native FB login in ionic 2 project using cordova-plugin-facebook4. I am testing my app on an emulator which does not have a Facebook app installed. I have also installed cordova in-app browser plugin.But when I run the app I get an error
Uncaught (in promise): TypeError: Cannot read property 'apply' of undefined:Cannot read property of undefined at callCordovaPlugin.
My implementation was inspired from https://ionicthemes.com/tutorials/about/ionic2-facebook-login I have added declare const facebookConnectPlugin: any;' to my declarations.d.ts file Still its not working? Help me out .
This the code snippet of my home.ts.
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Facebook } from '@ionic-native/facebook';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
FB_APP_ID: number = xxxxxxxxxxxx;
constructor(public navCtrl: NavController, private fb: Facebook) {
this.fb.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"];
this.fb.login(permissions).then(function(response) {
let userId = response.authResponse.userID;
let params = new Array();
//Getting name and gender properties
this.fb.api("/" + userId + "/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
alert(JSON.stringify(user));
})
}, function(error) {
alert(JSON.stringify(error));
});
}
}
contents of package.json
{
"name": "Filanthro",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.0.0",
"@angular/compiler": "4.0.0",
"@angular/compiler-cli": "4.0.0",
"@angular/core": "4.0.0",
"@angular/forms": "4.0.0",
"@angular/http": "4.0.0",
"@angular/platform-browser": "4.0.0",
"@angular/platform-browser-dynamic": "4.0.0",
"@ionic-native/core": "3.4.2",
"@ionic-native/facebook": "^3.5.0",
"@ionic-native/in-app-browser": "^3.5.0",
"@ionic-native/splash-screen": "3.4.2",
"@ionic-native/status-bar": "3.4.2",
"@ionic/storage": "2.0.1",
"ionic-angular": "3.0.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.0",
"typescript": "~2.2.1"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-device",
"cordova-plugin-statusbar",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "FaB: An Ionic project"
}
contents of app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { Facebook } from '@ionic-native/facebook';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
Facebook,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}