Ionic 2 + Facebook (Cannot find 'facebookConnectPlugin')

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:

image

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?

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

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.

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

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

@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

1 Like

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

1 Like

Hello you could solve this problem facebook ?

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;

1 Like

How did you install everything?

With Android SDK Manager.

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

Thanks!

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

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

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