Facebook plugin is not installed (warning and error nach plugin installation)

After I added the native facebook plugin ‘cordova-plugin-facebook4’ I receive following warning and error:

20:21:03]  console.warn: Native: tried calling Facebook.login, but the Facebook plugin is not installed.
[20:21:03]  console.warn: Install the Facebook plugin: 'ionic cordova plugin add cordova-plugin-facebook4'
[20:21:03]  console.error: plugin_not_installed

The same issue seems 1 month ago already reported, but still no solution.

https://forum.ionicframework.com/t/facebook-plugin-not-installed/113140

Does anybody know something to this?

Thanks for tips.

Oliver

When you installed the plugin, did you provide all the variables to the installation cmd respectively APP_ID and APP_NAME?

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"

Which cordova-android are you using? The plugin isn’t yet ready with cordova-android >= 7.0.0

Also, did you add Facebook to the providers in your app.module.ts?

p.s.:

Yes, I added the variables and the variables are set within the config.xml

    <plugin name="cordova-plugin-facebook4" spec="^1.9.1">
        <variable name="APP_ID" value="......." />
        <variable name="APP_NAME" value="....." />
    </plugin>
</widget>

my ionic info:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.3.0 ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2
    Node              : v8.9.1
    npm               : 5.6.0
    OS                : macOS High Sierra
    Xcode             : Xcode 9.2 Build version 9C40b

Environment Variables:

    ANDROID_HOME : /Users/oliverwaterkamp/Library/Android/sdk

Misc:

    backend : pro

AND yes I also added the facebook plugin to the providers in app.module.ts

I don’t see any difference between my code and that one from the stackoverflow-example:
https://stackoverflow.com/questions/45135627/ionic3-cordova-plugin-facebook4-facebook-install-issues-errors

Could you also reproduce the problem in a fresh blank project?

What ionic-native version (core and Facebook) are you using?

Sorry don’t have any other ideas right now

I created a new blank-app and I have the same issue there.

Can it be, that there is also a policy problem with this *.plist file like with the native-camera plugin?
Which happens only on ios?

Nope. I use both camera and Facebook plugins, could confirm it doesn’t need an edit-config tag.

Maybe try to remove/add the platform again?

ionic cordova platform remove ios
ionic cordova platform add ios

To use the camera I had to do this:
https://forum.ionicframework.com/t/nativ-camera-crash-by-opening-on-iphone-device/116318/9?u=catweazle101

I thought, maybe there could be a similar issue.

Nope, I don’t think so like I said, at least I don’t.

There I have added the Facebook plugin to the blank test app https://github.com/peterpeterparker/my-basket-button

I did

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"
npm install --save @ionic-native/facebook

then

added Facebook to the providers of app.module.ts

then added a method in home.ts

callFb() {
this.fb.login(['public_profile', 'user_friends', 'email'])
  .then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
  .catch(e => console.log('Error logging into Facebook', e));
}

and a button in home.html

<button ion-button (click)="callFb()">Test FB</button>

then build

ionic cordova build ios --prod

opened the project in xcode
ran/simulated the platform
clicked the button

=> no error respectively doesn’t face the error you posted

would you like to try to clone the project and do the same?

in case it doesn’t work the problem is then somewhere around cordova or npm or node version or something I guess

1 Like

good morning @reedrichards

Big thank you for your effort and helping me out.
I will clone this project tonight, and will test the same what you did.

P.S
Until now I did not test the application via XCode.
I used the ionic DevApp.

My bad, I should have ask that earlier. I think that the Facebook plugin only work on simulated or real devices.

ionic serve/devapp → not ok
ionic build/run or xcode simulator or run on a real device → ok

I guess that the first thing you could try even before cloning the repo.

Hi @reedrichards

After I tested it on the real ios-device the facebook dialog appeared :slight_smile:
Also on the emulator the dialog appeared.

At least as an ionic beginner I have following questions to you :wink:

  1. With simulator you meant the xcode-emulator?
  2. I thought on the DevApp we can run or test all native device component features.
    Why does it not work on DevApp? Even my native camera does work on DevApp.
    I thought the navtive-facebook component has to be a native plugIn because the plugin needs
    to talk to the native facebook app on the device.
  3. How do I recognize, whether a native-plugin runs NOT on DevApp, and only on Emulator/Device?
    How did you know it? Self-experience?

Because it’s nowhere mentioned, that the facebook-plugin does not run on DevApp :wink:
I would like to avoid this trap in future with other native-plugins :slight_smile:

Regards,
Oliver

@Catweazle101 cool to hear it worked out! sorry for not having thought about asking you how you tested it in the first place, we would have spare time :wink:

  1. With xcode-simulator I mean opening your platform with Xcode and running the app in a simulated device respectively not on a real device. But I don’t think it’s like a thing to call that like this, just my bad english

  2. Actually I didn’t know that the camera work in DevApp, I don’t use it that much I have to say, I probably should.

According the doc:

The Ionic DevApp supports the same set of common native plugins as Ionic View. Please check this list to see which plugins are supported out of the box. If an Ionic Native plugin you need isn’t functioning correctly or isn’t available, let us know! https://ionicframework.com/docs/pro/view.html#plugin-support

=> Facebook plugin isn’t in the list

  1. See 2.

Hope that answered your questions and have fun building your login with the Facebook plugin

P.S.: If you have time, could you update the linked post and linked GitHub issue about the solution/reason of the problem? Some other people might face the same issue

This worked for me!! Use platform.ready() function before using the object of the imported class.

constructor(public qrScanner: QRScanner) {

                // solve the problem - "plugin not installed".
                platform.ready().then(()=>{
                  this.qrscanner();
                })

}

Hope this helps…