Error: $injector:unpr Unknown Provider - Unknown provider: Api

Question

I've set up a separate module to contain an api service, and I'm trying to inject it into my routing configuration. But I get the above error. Here's the relevant code:

/***********
* app module
************/

(function(){

    'use strict';

    angular
        .module('app', [

            /***************
            * Vendor modules
            ****************/
            'ui.router',
            'ngCookies',
            'ngSanitize',

            /***************
            * Custom modules
            ****************/
            'app.auth',
            'app.debates',
            'app.api'

        ]);
})();

/***********
* api module
************/

(function(){

    'use strict';

    angular
        .module('app.api', []);

})();


/************
* api service
************/

(function(){

    'use strict';

    angular
        .module('app.api')
        .constant('API_BASE_URL', 'http://localhost:8000/api/')
        .service('Api', Api);

        Api.$inject = ['$http', 'API_BASE_URL'];

        function Api($http, API_BASE_URL){

            var service = {
                getDebates:             getDebates
            };

            return service;


            /* ********************************
            *  Method: getDebates
            ******************************** */
            function getDebates() {

                var request = {
                    method: 'GET',
                    url:    API_BASE_URL + 'debates',
                    headers: {
                        'Content-Type':     'application/json',
                        'Accept':           'application/json'
                    }
                };

                return $http(request);
            }

        } // function Api
})();

Then in my route configuration on the main app module, I'm pulling in the Api service in order to use it in the resolve methods of each state:

(function(){

    'use strict';

    angular
        .module('app')
        .config(routes);

        routes.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider', 'Api'];

        function routes($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider, Api) {

I'm sure there's something simple I've missed, but I can't find it.

Is there actually a service called `Api` in the `app.api` module? It's not shown above. **Edit:** also noticed this is in a `config` section -- you can only use `providers` in config, as it runs prior to the app bootstrapping phase. Is `api` a `service`, `factory`, or `provider`? — Tom, Mar 25 '15 at 15:11
[This](http://stackoverflow.com/a/21650337/3199927) answer might be what you're looking for — Tom, Mar 25 '15 at 15:15

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Angular config sections can only take providers and constants (in your case, you are using a service.

From the Angular Docs

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.

You can convert your service to a provider see here or inject your service some other way.

Error: $injector:unpr Unknown Provider - Unknown provider: Api

1 Answers1