Injecting Dependencies in config() modules - AngularJS

Question

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?

Answer 1

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

... 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'); }); 

Answer 2

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