AngularJS error: Unknown provider: app.configProvider <- app.config

Problem

I'm trying to implement the code from https://github.com/Ciul/angular-facebook or more specifically the code from http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview

I included the Javascript code from http://rawgithub.com/Ciul/angular-facebook/master/lib/angular-facebook.js and script.js

In script.js, I replaced:

angular.module('CiulApp', ['facebook'])

with

angular.module('app', ['facebook'])

because I already have a module called 'app' and it is the one for the entire site:

<html data-ng-app="app">

However, I get the following error in the browser console:

Error: Unknown provider: app.configProvider <- app.config

at Error ()

at http://localhost:8888/bower_components/angular-complete/angular.js:2652:15

...

...

I cannot figure out why I'm getting this error.

I do have a module called 'app.config' in my app.js file:

angular.module('app.config', []).value('app.config', { ....   })

However, I don't think my app.config module is the source of the problem because I've changed the name of it and I still get same error. (I did not get any errors before I tried to implement http://plnkr.co/edit/dDAmvdCibv46ULfgKCd3?p=preview)

Can anyone help?

Problem courtesy of: Curt

Solution

So, are there more than 1 line like this in your code now:

angular.module('app', [...

?

One for initializing the module, another one for handling Facebook auth? If yes, try this:

Locate the 1st occurrence of the code (that is, where you declare the module) and put all dependency declarations there:

angular.module('app', ['facebook', 'other dependencies...'])

Then, locate the other line, where you are dealing with the FB auth, and replace it with:

angular.module('app').doYourStuff(

This way you will declare the module only once, and when you want to alter it, you'll get the already initialized version instead of creating another module over and over.

Solution courtesy of: m1kael

Discussion

It would be easier if you would provide jsFiddle/plunker of the non-working code. Anyway it seems that you are initializing your 'app.config' module with itself

angular.module('app.config', []).value('app.config', { ....   }) 

and because your are not giving enough information I'm guessing that your trying to inject your 'app.config' somewhere in your code?

If you want to configure you 'app' you should do in this way

angular.module('myModule',[]).value('foo'{bar:'abc'})

angular.module('app',['myModule']).config(function($routeProvider){

     $routeProvider.when('/',{templateUrl: 'partials/phone-list.html', controller:'SomeCtrl')

 }).run(function($foo){
     alert($foo.bar)
   })

Also checkout the documentation how to use modules. AngularJS : module

Discussion courtesy of: Mikael P

This recipe can be found in it's original form on Stack Over Flow.