Greetings, I am currently working on integrating Facebook with my Angular JS web application. To achieve this, I have employed the ngFacebook service in Angular JS. However, upon running my application, I encountered an error:
"Uncaught Error: [$injector:modulerr] Failed to instantiate module tveWebApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngFacebook due to:
Error: [$injector:nomod] Module 'ngFacebook' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument".
I installed the ngFacebook service using the command "bower install ng-facebook".
Below is the snippet of my code:
angular.module('tveWebApp', ['ngFacebook'
]).config(['$facebookProvider', function($facebookProvider){
$facebookProvider.setAppId('709438295835304');
$facebookProvider.setPermissions("email,user_likes");
$facebookProvider.setVersion("v2.3");
}]).run(['$rootScope',
function($rootScope) {
(function(){
if (document.getElementById('facebook-jssdk')) {return;}
var firstScriptElement = document.getElementsByTagName('script')[0];
var facebookJS = document.createElement('script');
facebookJS.id = 'facebook-jssdk';
facebookJS.src = '//connect.facebook.net/en_US/all.js';
firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement);
}());
}]);
My controller implementation:
$scope.isLoggedIn = false;
$scope.login = function() {
$facebook.login().then(function() {
refresh();
});
}
function refresh() {
$facebook.api("/me").then(
function(response) {
$scope.welcomeMsg = "Welcome " + response.name;
$scope.isLoggedIn = true;
},
function(err) {
$scope.welcomeMsg = "Please log in";
});
}
refresh();
My view setup:
<button type="button" ng-click="login()" ng-hide="isLoggedIn" class="btn btn-default navbar-btn">
Login
</button>
<div id="fb-root">
If anyone has insights on how I can resolve this issue, your assistance would be greatly appreciated. Thank you.