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

Catweazle101 · January 3, 2018, 7:30pm

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

reedrichards · January 3, 2018, 7:46pm

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

reedrichards · January 3, 2018, 7:56pm

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

p.s.:

Catweazle101 · January 3, 2018, 8:17pm

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

reedrichards · January 3, 2018, 8:40pm

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

Catweazle101 · January 3, 2018, 9:11pm

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?

reedrichards · January 3, 2018, 9:13pm

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

reedrichards · January 3, 2018, 9:20pm

Maybe try to remove/add the platform again?

ionic cordova platform remove ios
ionic cordova platform add ios

Catweazle101 · January 3, 2018, 9:23pm

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.

reedrichards · January 3, 2018, 9:32pm

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

Catweazle101 · January 4, 2018, 5:32am

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.

reedrichards · January 4, 2018, 7:21am

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.

Catweazle101 · January 4, 2018, 7:20pm

Hi @reedrichards

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

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

With simulator you meant the xcode-emulator?
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.
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
I would like to avoid this trap in future with other native-plugins

Regards,
Oliver

reedrichards · January 4, 2018, 7:40pm

@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

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
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

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

dismipaul · January 7, 2019, 4:32pm

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…

Topic		Replies	Views
Facebook plugin not installed ionic-v3	3	1538	July 19, 2021
Facebook plugin_not_installed error ionic-v3	3	3300	April 29, 2017
Ionic 3 facebook native install issue ionic-v3	2	432	July 19, 2021
Facebook Native Authentication help needed plugin_not_installed error Ionic Native	3	1054	July 3, 2017
Ionic Facebook api - not working Ionic Native	0	1371	July 17, 2017

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

Related topics