how to inject dependency into module.config(configFn) in angular

In Angular, we can inject $routeProvider to the config function

module.config(function ($routeProvider) {


});

I want to inject my service into it like

module.config(function ($routeProvider, myService) {


});

I am sure the service is defined properly, but it throws an exception saying that unknown myService, event when I inject like

module.config(function ($routeProvider, $http) {


});

it still says unknown $http.

Do you know why?

From Modules page, section "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. > > Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

So you can't inject your own service, or built-in services like $http into config(). Use run() instead.

I don't have enough reputation to post a comment, but wanted to add to Mark's answer.

You can register providers yourself. They are basically objects (or constructors) with a $get method. When you register a provider the standard version of it can be used like a service or factory, but a provider version can be used earlier. So a grumpy provider that is registered as

angular.module('...', [])
    .provider('grumpy', GrumpyProviderObject)

is then available in the config function as

    .config(['grumpyProvider', ..., function (grumpyProvider, ...) { ... }])

and can be injected into controllers simply as

    .controller('myController', ['grumpy', ..., function (grumpy, ...) { ... }])

The grumpy object that is injected into myController is simply the result of running the $get method on the GrumpyProviderObject. Note, the provider you register can also be a regular JavaScript constructor.

Note: as per the comment by @Problematic, that the provider initialization (the call to angular.module().provider(…) must come before the config function to be available.

You can do it like this:

(function() {
    'use strict';

    angular.module('name', name).config(config);
    // You can do this:
    config.$inject = ['$routeProvider', 'myService'];

    function config($routeProvider, myService) {
        // Or better to use this, but you need to use ng-annotate:
        /* ngInject */

    }
});

It is best practice that is described here

You can manually call angular.injector to gain access to services which don't have dependencies during the .config() block of your app. If the service you created doesn't have any dependencies which need to be traversed, then you can probably use this:

angular.module('myApp').config(function () {
    var myService = angular.injector(['ng']).get('myService');
});

This works for other simple services like $http as well:

angular.module('myApp').config(function () {
    var http = angular.injector(['ng']).get('$http');
});

Note: Usually you shouldn't need to inject services during your config phase, it's better design to create a provider that allows for configuration. The docs say this functionality is exposed for cases where 3rd party libraries need to get access to the injector of an already-running Angular app.

If you want to inject dependency (let's say from a Service) to call a function form in routes (.config) as shown below templateProvider.getTemplate('about')

.state('index.about', {  

    url: "/about",  
    templateUrl: templateProvider.getTemplate('about'),  
    controller: 'AboutCtrl',  
    controllerAs: 'about',  
    data: {pageTitle: 'About Us Page'}  

})  

You must create a Provider. Not Service nor Factory.

Here’s a real example of a Provider that generates the template path from the name:

(function () {  

    'use strict';  
    angular  

        .module('mega-app')  

        .provider('template', provider);  

      function provider(CONSTANT) {  

        // The provider must include a $get() method This $get() method  
        // will be invoked using $injector.invoke() and can therefore use  
        // dependency-injection.  
       this.$get = function () {  

            return {}  

        };  
       /**  
         * generates template path from it's name  
         *  
         * @param name  
         * @returns {string}  
         */  
       this.getTemplate = function (name) {  

            return CONSTANT.TEMPLATES_URL + name + '/' + name + '.html';  
        }  
  

        /**  
         * generates component path from it's name  
         * @param name  
         * @returns {string}  
         */  
       this.getComponent = function (name) {  

            return CONSTANT.COMPONENTS_URL + name + '.html';  
        }  

    };  
})();  

The usage of such Provider in the routes (.config) will be as follow:

(function () {  

    'use strict';  
    angular  

        .module('mega-app')  

        .config(routes);  
   function routes($stateProvider, $urlRouterProvider, templateProvider) {  
  


       $stateProvider  
            //----------------------------------------------------------------  
            // First State  
            //----------------------------------------------------------------  
            .state('index', {  

                abstract: true,  
                url: "/index",  
                templateUrl: templateProvider.getComponent('content'),  
                controller: 'IndexCtrl',  
                controllerAs: 'index',  
            })  

            //----------------------------------------------------------------  
            // State  
            //----------------------------------------------------------------  
            .state('index.home', {  

                url: "/home",  
                templateUrl: templateProvider.getTemplate('home'),  
                controller: 'HomeCtrl',  
                controllerAs: 'home',  
                data: {pageTitle: 'Home Page'}  

            })  

            //----------------------------------------------------------------  
            // State  
            //----------------------------------------------------------------  
            .state('index.about', {  

                url: "/about",  
                templateUrl: templateProvider.getTemplate('about'),  
                controller: 'AboutCtrl',  
                controllerAs: 'about',  
                data: {pageTitle: 'About Us Page'}  

            })  

        //----------------------------------------------------------------  
        // Default State  
        //----------------------------------------------------------------  
       $urlRouterProvider.otherwise('/index/home');  
    };  
})();  

VIP Note:

to inject the provider you must postfix it with xxxProvider (that name of the provider should not be postfixed, only on injection in the .config).

If it can make things easier for some of you.

Per explained in this answer, you can just append Provider to your custom service and then access the internal functions using $get().

It may not be the cleanest solution, but it does the job.

module.config(function ($routeProvider, myServiceProvider) {
 // Call a function hello() on myService.
 myServiceProvider.$get().hello();
});

You could try this:

module.config(['$routeProvider', '$http', function ($routeProvider, $http) {}]);