AngularJS throwing “Unkown Provider”: “a seperate issue”

Reading Time: 2 minutes

AngularJSSometimes debugging stuff can take a long time but creating the solution just a second. We all know that moment where you’ve lost an hour or more finding out what is going wrong and then that “ahhhhh, ofcourse.. I feel like an idiot!!!” moment.

I experienced this with AngularJS and a controller that was giving me the big “Unknown Provider” error on a new Service that I added to my project. As nice as a feature that the error gives me by pointing me to the documentation page of Angular’s website for the unpr error I couldn’t get things to work after following the checklist.

My Karma unit-tests were doing fine, but running my controller on localhost went beserk and I couldn’t figure out why?

Then it hit me in the face like a steak during a restaurant riot: I have grouped my controllers, services, etc into separate modules and I saved all those things in separate files as well, adding them to the module for the kind of instance, ie:

  • mod_controllers.js contains the module definition with “my_controllers” as its name
    • mycool_controller.js contains a controller definition which is added  to the “my_controllers” module
    • anothercool_controller.js is added to the “my_controllers” module as well.
  • mod_services.js contains the module for all the services with “my_services” as its name
    • you get the point..
  • app.js contains the app module definition and has its dependancies set to my_controllers, my_services etc etc…

Although it’s all improving code separation and keeps your code nicely grouped and seperate in what are almost self-contained files, it also makes for one extra action that you need whenever you add something: the need to include the separate .js files to index.html!

And there you have it: I defined all the goodies correctly and could run my unit-tests because I use wildcards in my karma.conf.js file to dynamically include both source files and specs and that was all good. By missing out the include to my_cool_new_service.js file it was nowhere to be found in my app module and the controller was freaking out because it was missing something that I setup as dependancy…

#hoursoflifedownthedrain

Ow well, it will be added to the #onelessonnottobeforgottenanymore list and in the worst case I’ll find myself looking at this post during a future Google session and hit myself in the face once more.