Injecting Dependencies in config() modules - AngularJS

Currently in app.js i have the following routes:

var gm = angular.module('gm', ['gm.services','gm.directives','gm.filters','gm.controllers','ngSanitize']);

gm.config(['$routeProvider', 'Path', function($routeProvider, Path) {

	$routeProvider.when('/login', { 
		templateUrl: Path.view('application/authentication/login.html'), 
		controller: 'authController' 
	});

	$routeProvider.when('/dashboard', { 
		templateUrl: Path.view('application/dashboard/index.html'), 
		controller: 'dashboardController' 
	});	

	$routeProvider.otherwise({ 
		redirectTo: '/login'
	});

}]);

I'm trying to inject the Path dependency as you can see. Although i get an error saying it can't find this provider. I think this is because config module providers are executed first before anything else. below is my Path provider definition in "services.js"

gm.factory("Path", function() {
  return {
    view: function(path) {
      return 'app/views/' + path; 
    },
    css: function(path) {
      return 'app/views/' + path; 
    },
    font: function(path) {
      return 'app/views/' + path; 
    },
    img: function(path) {
      return 'app/views/' + path; 
    },
    js: function(path) {
      return 'app/views/' + path; 
    },
    vendor: function(path) {
      return 'app/views/' + path; 
    },
    base: function(path) {
      return '/' + path; 
    }
  }
}); 

how can i inject this provider into a config module?

1. angular.config only accepts Providers
2. every service, factory etc are instances of Provider

So to inject a service in config you just need to call the Provider of the service by adding 'Provider' to it's name.

angular.module('myApp')
  .service('FooService', function(){
    //...etc
  })
  .config(function(FooServiceProvider){
    //...etc
  });

According to the angularjs Provider [documentation][1] [1]: https://docs.angularjs.org/guide/providers

>... if you define a Factory recipe, an empty Provider type with the $get method set to your factory function is automatically created under the hood.

So if you have a factory (or service) such as:

.factory('myConfig', function(){
  return {
    hello: function(msg){
      console.log('hello ' + msg)
    }
  }
})

You first need to invoke your factory using the $get method before accessing the returned object:

.config(function(myConfigProvider){
   myConfigProvider
     .$get()
     .hello('world');
});

In .config you can only use providers (e.g. $routeProvider). in .run you can only use instances of services (e.g. $route). You have a factory, not a provider. See this snippet with the three ways of creating this: Service, Factory and Provider They also mention this in the angular docs https://docs.angularjs.org/guide/services

You should use constant for that, because it's the only thing you can inject in the config phase other than providers.

angular.module("yourModule").constant("paths", {
  base: function(){ ... }
});

This discussion helped me when I was trying to figure out the same thing, basically

$routeProvider.when('/', {
				templateUrl:'views/main.html',
				controller:'MainController',
				resolve: {
					recentPosts: ['$q', 'backendService', function($q, backendService){
						var deferred = $q.defer();
						backendService.getRecentPosts().then(
							function(data) {
								var result = data.result;
								deferred.resolve(result);
							},
							function(error) {
								deferred.reject(error);
							}
						);
						return deferred.promise;
					}]
				}
			})