CODEWITHSUNDEEP
javascriptangularjsdependency-injection
Cameron Ball
Cameron Ball

Reputation: 4108

Why can't AngularJS resolve this dependency

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?

Upvotes: 0

Views: 63

Answers (3)

Jevgeni
Jevgeni

Reputation: 2574

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
    });
}])

Upvotes: 0

Radim Köhler
Radim Köhler

Reputation: 123861

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

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

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.

Upvotes: 1

Related Questions