Ionic 2 + Facebook (Cannot find 'facebookConnectPlugin')


#1

I am creating an application using Ionic 2 that will make some calls to Facebook API. I followed the steps from documentation and installed the cordova plugin cordova-plugin-facebook4.

Now I’m trying to authenticate the user, but without success. My login page:

import {Page} from 'ionic-framework/ionic';


@Page({
  templateUrl: 'build/pages/page1/page1.html',
})
export class Page1 {
  login() {
    facebookConnectPlugin.login(
      ['email'],
      response => {
        console.log(response);
      },
      error => {
        console.log(error);
      }
    );
  }
}

When I run the application with:

ionic serve

I get the following error in the terminal:

When I click on the login button I get the following error in the console:

And when I try to build the application to run on a real device I get the following error in the console:

I think I have to import the plugin to be able to use, but how?


#2

Have you try this on actual mobile device (or an emulator)?
By adding plugin through command ionic plugin add [plugin-name] it should available globally. I recently on work with bluetooth serial plugin and I am able to call the plugin using bluetoothSerial variable.

Since cordova plugin is meant for actual mobile device, most of them won’t work on regular browser I think (thus command ionic serve will fail any plugin).

just my 2 cents


#3

How can I try this on a real device if when I run ionic run android the build fails? The error on the last image.


#4

Sorry I missed last part on your post :sweat_smile:

Can you reiterate your step? From what I see, I think the problem is not ionic CLI, but Cordova CLI or even Android build.

here’s what I currently use (ionic info output)

Your system information:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS:
Node Version: v5.3.0

And my step for comparison

  1. ionic start BTSample --v2
  2. ionic plugin add cordova-plugin-bluetooth-serial and then edit source code as necessary
  3. ionic platform add android
    note: if you already add android platform before adding plugin, it is better to remove it first and re-adding it
  4. ionic build android

#5

My ionic info:

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: 1.8.5
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.4.0
Xcode version: Xcode 7.2.1 Build version 7C1002

My steps:

  1. ionic start facebookApp --v2
  2. ionic plugin add cordova-plugin-facebook4 --save --variable APP_ID=“123456789” --variable APP_NAME=“myApplication”
  3. Create a button calling facebookConnectPlugin.login()
  4. ionic platform add android
  5. ionic run android

#6

@ibnclaudius have you tried to build android before prior to ionic? try checking your Android SDK first and download necessary SDK.

also, I found out that adding some plugin might cause crash like on this bug
but some user experience this also because of incomplete SDK

Cheers


#8

@ibnclaudius did you work this out? I’m having the same problem…


#9

Hello you could solve this problem facebook ?


#10

Sorry for the wait, in my case was the incomplete SDK. I just installed everything under Extras section.

And to solve the ‘Cannot find name facebookConnectPlugin’ error just declare in your typescript file.

declare const facebookConnectPlugin: any;


#11

How did you install everything?


#12

With Android SDK Manager.


#13

Ohhh the Android SDK gotcha. Okay, I’ll give that a go right now.

Thanks!


#14

Do you know what you were specifically missing? Also did you use this for ios as well?


#15

Hey, which TS file would this go in? I tried placing it in my page.ts file above the constructor.


#16

Got it working. Make sure your ionic cli and lib are updated!