UI router Unknown provider for injecting service into child state resolve

Question

Got Unknown provider when injecting service into the child state resolve function. But if defined a resolve in the parent state, it just works. Below there are some sample codes:

I defined a service module

angular.module('services', [])
  .factory('myService', function() {
    // my service here
  })

and initialize the app

var app = angular.module('app', ['services', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, 

    $urlRouterProvider) {
      $stateProvider.state('wizard', {
        url: '/wizard',
        abstract: true
      })
      .state('wizard.step1', {
        url: '/step1',
        templateUrl: ... ,
        resolve: {
          name: function(myService) {
            // do something with mySerice
          }
        },
        controller: function(name) {
          // controller codes here
        }
      })
    }]);

I got the error Unknown provider complaining about myService in the wizard.step1 resolve. But if I add a random resolve in the parent state, like

$stateProvider.state('wizard', {
            url: '/wizard',
            abstract: true,
            resolve: {
              a: function() { return 1; }
            }
          })

then it works without error. Wonder what happens here?

I can't see what's wrong. If you create a fiddle that shows the problem, I'll give it a try. — eekboom, Oct 01 '14 at 07:47
Agree with @StephenFriedrich, this looks fine. I put it in a plunk: http://plnkr.co/edit/McZ97tJIuSIQnwRkDb8c?p=preview — Chris T, Oct 01 '14 at 17:52
Could it be that you left an ng-controller in the partial HTML file? If so, angular will try to instantiate the controller upon loading the view, at which point 'name' will not exist, so you get the error. See my answer to this one: http://stackoverflow.com/questions/27023887/angularfire-0-9-resolve-with-ui-router — andyhasit, Jan 16 '15 at 01:06

Mathieu Bertin · Answer 1 · 2014-10-01T08:02:31.170

2

In your controller you have to inject your service MyService, so define something like this

  .state('wizard.step1', {
    url: '/step1',
    templateUrl: ... ,
    resolve: {
      name: ['myService', function(myService) {
        // do something with mySerice
      }]
    },
    controller: ['name', function(name) {
      // controller codes here
    }]
  })

edited Oct 01 '14 at 08:02

answered Oct 01 '14 at 07:38

Mathieu Bertin

1,634
11
11

Sorry i haven't understand that the problem was in the resolve so i modify the code. You have to inject your service in the resolved function and in your controller you have to inject the resolve attributes (eg: "name") – Mathieu Bertin Oct 01 '14 at 07:58
Works great at AngularJS 1.7.6 – Thiago Pereira Jan 25 '19 at 17:28

benek · Answer 2 · 2017-09-14T08:24:27.900

1

You have to inject your service in your config function :

var app = angular.module('app', ['services', 'ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', 'myService',
          function($stateProvider, $urlRouterProvider, myService) {
...

Another way is to embed your resolve code in a service and assign directly the service :

app.config(['$stateProvider', '$urlRouterProvider' ,'mySuperService',function($stateProvider, 

    $urlRouterProvider, mySuperService) {
    ...
    resolve: {
     name: mySuperService()
    }


.constant('mySuperService', function() {

   var serv= function(){
      // your code
   }
   return serv;
}

edited Sep 14 '17 at 08:24

answered Oct 01 '14 at 09:09

benek

2,088
2
26
38

1

Service can't be injected into config, only providers. http://stackoverflow.com/questions/15937267/inject-service-in-app-config – Yujun Wu Oct 01 '14 at 16:47
Sure. That's why I used a "constant" that defines a function in my example. This is actually how I am doing in current app. But you are right that's not possible with a "factory" or a "service". – benek Oct 02 '14 at 10:28

UI router Unknown provider for injecting service into child state resolve

2 Answers2