Why can't AngularJS resolve this dependency

Question

MyApp.js:

'use strict';

angular.module('MyApp', [
    'ngRoute',
    'MyApp.components.hello',
    'MyApp.pages.index',
    'MyApp.pages.upload'
]).

config(['$routeProvider', 'HelloService', function($routeProvider, HelloService) {
    $routeProvider.
    when('/',
    {
        templateUrl: 'pages/index/index.html',
        controller: 'IndexController'
    }).
    when('/upload',
    {
        templateUrl: 'pages/upload/upload.html',
        controller: 'UploadController' 
    }).
    otherwise({redirectTo: '/'});

    HelloService.init({
        facebook : ID_HERE
    });
}]);

hello-service.js:

'use strict';

angular.module("MyApp.components.hello", []).

factory("HelloService", function()
{
    return window.hello; //assume hello has been loaded
});

When I try to run it, I get the error Error: [$injector:unpr] Unknown provider: HelloService. Why? HelloService is clearly defined in MyApp.components.hello, which is included as a dependency of the main application. So why can't it find HelloService?

As others have stated, you cannot configure a factory/service inside of the config block. If you want to configure your service, create a provider instead. This might be a helpful link: http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory/25092033#25092033 — Michael Kang, Sep 30 '14 at 06:20

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

Check this article:

Understanding Dependency Injection by josepot

and this section

Configuring Providers

You may be wondering why anyone would bother to set up a full-fledged provider with the provide method if factory, value, etc. are so much easier. The answer is that providers allow a lot of configuration. We've already mentioned that when you create a service via the provider (or any of the shortcuts Angular gives you), you create a new provider that defines how that service is constructed. What I didn't mention is that these providers can be injected into config sections of your application so you can interact with them!

First, Angular runs your application in two-phases--the config and run phases. The config phase, as we've seen, is where you can set up any providers as necessary. This is also where directives, controllers, filters, and the like get set up. The run phase, as you might guess, is where Angular actually compiles your DOM and starts up your app.

So, where is the issue?

We can ask JUST for Providers to be injected into .config()
BUT - they are used in .config() just to be configured, not to be used

score 1 · Answer 2 · answered Sep 30 '14 at 05:56

1

I don't think you can inject a service to config block.

Module Loading & Dependencies

Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.

answered Sep 30 '14 at 05:56

Arun P Johny

384,651
66
527
531

Thank you! I had no idea, I just naively put that stuff in .config because that seemed to be the applicable place. After moving it in to .run it resolves properly. – Cameron Ball Sep 30 '14 at 06:00

score 0 · Answer 3 · answered Sep 30 '14 at 06:02

Config is too early stage to star working with services, providers and factories. Try moving that HelloService initialization part to run, like that:

.run(['HelloService', function(HelloService) {
    HelloService.init({
        facebook : ID_HERE
    });
}])

Why can't AngularJS resolve this dependency

3 Answers3

Understanding Dependency Injection by josepot

Configuring Providers