facebookConnectPlugin is not defined (ngCordova, Ionic app) - angularjs

Question

I'm trying to add native fb connect to my ionic app.
I'm using:
- Ionic
- ngCordova
- http://ngcordova.com/docs/plugins/facebook/
This is my code:
angular.module('starter.controllers', ['ngCordova'])
.config(function($cordovaFacebookProvider) {
var appID = 123456789;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
})
Which leads to this error >
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
ReferenceError: facebookConnectPlugin is not defined
at browserInit (http://localhost:8100/lib/ngCordova/dist/ng-cordova.js:1576:7)
at http://localhost:8100/js/controllers.js:6:30
at Object.invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11994:17)
at runInvokeQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11900:35)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11909:11
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:11907:40
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8147:20)
at loadModules (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11890:5)
Tried a couple of things but without any positive result:
- When I build it and run it on my device the app displays a blank screen
Tried the normal cordova js code:
Changed $cordovaFacebookProvider to $cordovaFacebook (based on this thread:
forum.ionicframework.com/t/unknown-provider-cordovaprovider/13305/3
And this is a another related thread, but doesn't help me thought..
forum.ionicframework.com/t/does-ng-crodova-has-facebook-login/9163
I already have a prototype working with the fb auth in the in-app-browser. But I really want to have a native fb connect functionality.

Answer 1

i found a way to resolve this issue.
Thanks to this thread : https://github.com/driftyco/ng-cordova/issues/446
and this tutorial : https://github.com/Wizcorp/phonegap-facebook-plugin/blob/master/platforms/browser/README.md
1st step : Don't forget the <div id="fb-root"></div> after ur body.
2nd step : I added facebookConnectPlugin to my bower dependencies
See my bower.json :
"dependencies": {
"angular-google-maps": "~2.0.13",
"google-map": "~0.4.1",
"facebook-connect-plugin": "https://cdn.rawgit.com/Wizcorp/phonegap-facebook-plugin/master/facebookConnectPlugin.js"
}
See my app.config + code to init:
app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $animateProvider, $httpProvider, $cordovaFacebookProvider) {
var appID = 597135743751760;
var version = "v2.0"; // or leave blank and default is v2.0
$cordovaFacebookProvider.browserInit(appID, version);
$cordovaFacebookProvider call facebookConnectPlugin()
3th step : After changing this dependencies, don't forget to call bower update from ur CLI.
4th step : Include the new facebookblablabla.js in your index.html.
it can be
<script src='bower_components/facebook-connect-plugin/index.js'></script>
for me it was
<script src='lib/facebook-connect-plugin/index.js'></script>
5th step : add in the Valid OAuth redirect URIs field at your Facebook App :
http://static.ak.facebook.com/connect/xd_arbiter/
Hope it works for you :) !

Answer 2

My answer is not providing a solution for your issue but an advice.
Why using facebook Cordova when you can use HelloJS?
faceBook Cordova is platform dependant, much slower as it runs cordova true node.js and not evolutive.
HelloJS permits to integer various Oauth2 authentication very easily including, facebook / google / twitter / instagram ...
Without to tell that the compilation for facebook cordova is very tricky with the facebook key app. On HelloJS, this is only a parameter that you can easily change.

Answer 3

I don't know if someone still stuck with this thing then please follow the method mentioned my #Alexy and then edit the 'lib/facebook-connect-plugin/index.js' file line from :
if(cordova.platformId === 'browser')
to
if(!window.cordova || (window.cordova && window.cordova.platformId === 'browser'))
Hope this Helps :)