AngularJS, resolve and unknown provider

Question

I've two routes with resolve. Goes like this:

.when('/foos', {
templateUrl: 'views/foos.html',
controller: 'FoosCtrl',
resolve: {
    foo_list: ['$q', '$route', '$timeout', '$location', 'Foos', function($q, $route, $timeout, $location, Foos) {
        // postpone the execution
        var deferred_foo = $q.defer()

        Foos.getFoos({token:session_uid}, successCb)

        function successCb(list) {
            if(list['status'] === 200) {
                deferred_foo.resolve(list)
            }
            else {
                alert('Crashcrashcrash')
                deferred_foo.reject("Something just wasn't right")
                //$location.path('maintenance')
            }
        }
        return deferred_foo.promise
        }]
    }
})
.when('/r/:type/:bar_id', {
    templateUrl: 'views/bar.html',
    controller: 'BarsCtrl',
    resolve: {
        bar: ['$q', '$route', '$timeout', '$location', 'Bars', function($q, $route, $timeout, $location, Bars) {
            // postpone the execution
            var deferred = $q.defer()

            Bars.getBar({type: bar_type}, successCb)    

            function successCb(result) {
                if(result['status'] === 200) {
                    deferred.resolve(result)    
                }
                else {
                    alert('Crashcrashcrash')
                    deferred.reject("Something just wasn't right")
                    $location.path('foos')
                }

                return deferred.promise
                }]
            }
        })

Then I've two controllers working like this:

 App.controller('FoosCtrl', ['$scope', '$location', 'Foos', 'foo_list', function($scope, $location, Foos, foo_list) {...}

 App.controller('BarsCtrl', ['$scope', '$routeParams', '$location', 'Bars', 'bar', 'sharedService', function($scope, $routeParams, $location, Bars, bar, sharedService) {...}

Could somebody explain why Bar works but Foo gives me Error: Unknown provider: foo_listProvider <- foo_list? I've tried replacing foo_list with different name in case camelCasing did something but didn't help.

Are you sure Bar works? Probably you don't get any error on Bar because Foo is failing and Bar is not even being created/defined. Have you tried to change the init order? — bmleite
– bmleite, Commented Feb 13, 2013 at 10:32
Yes. Bar is working perfectly - that's the reason why I'm so frustrated and confused about this. I did Bar section of the app few weeks back and now I wanted to apply resolve to Foo as well. — jimmy
– jimmy, Commented Feb 13, 2013 at 10:58
If you access bar inside the BarsCtrl what do you get? Does it contain anything or is just undefined? — bmleite
– bmleite, Commented Feb 13, 2013 at 16:08
bar passes along the data from getBar properly. Like I said, Bar is not the problem and seems to be working perfectly. Foo also works if I rollback to older version without resolve. It looks like some part gets lost between creating foo_list promise and initiating FooCtrl controller. — jimmy
– jimmy, Commented Feb 14, 2013 at 7:36
Your successCb in bar function is missing a closing parenthesis, so I wonder how come this doesn't throw SyntaxError on you. — Stewie
– Stewie, Commented Feb 27, 2013 at 15:23

Community · Accepted Answer · 2017-05-23 12:17:57Z

181

So, this question was surprisingly similar to my own which I just figured out with help from the folks over at the Angular IRC channel... are you, by chance, setting up your controller though ng-controller? I had:

    <div ng-controller="myCtrl">

... when it should have been removed:

    <div>

... because I was setting up the controller in the resolve on the router. That's what I was doing and it was causing this very issue. You can see more here:

https://stackoverflow.com/a/18305423/1306982

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Aug 19, 2013 at 1:55

boardlemur

2,8912 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shacker Over a year ago

So... removing ng-controller= does fix the "unknown provider" error for me... but it also causes the page to go blank and for nothing inside the controller to run (even console.log("hello");). I'm confused - if nothing in the HTML invokes the controller... then the controller is never invoked. What am I missing?

boardlemur Over a year ago

@shacker asked the question "if nothing in the HTML invokes the controller, then the controller is never invoked." Not true in my case, I was invoking the controller through the router. Take the original above example:

.when('/r/:type/:bar_id', {         templateUrl: 'views/bar.html',         controller: 'BarsCtrl',         resolve: {             // etc

The 'BarsCtrl' is being applied to the template located at 'views/bar.html'. If you do not have the controller and template here, that could be your issue...

Patrick Fowler Over a year ago

This was my problem as well. I wish ng had a controller definition precedent. As i learn more, I find that I migrate from one definition format to another, perhaps on the same view, and this is not the first time the dual-controller definition has bit me.

salek · Accepted Answer · 2013-07-15 09:59:59Z

2

foo_list <- is the js file for this being loaded in the your html page in a script tag? it just mightbe the case that when you have forgotten to include factory/service/controller and actually have forgotten to include it in a script tag in the index/app html page (or require shims)

Okay just saw your comment and extending the answer here cos its easier to do it here.

Your code where you declare the controller should read like

App.controller('FoosCtrl', 
   ['$scope', '$location', 'Foos', /* comment out foo_list here*/ 
    function($scope, $location, Foos, foo_list /* this remains */) {
  ...
}

when the route is getting changed things you mention in 'resolve' would get resolved by ui-router. But it the place where you are declaring your FoosCtrl you don't actually have a provider for it to resolve.

Give this a try i had a similar case like this last week.

edited Jul 15, 2013 at 9:59

answered Jul 15, 2013 at 0:43

salek

4444 silver badges14 bronze badges

2 Comments

Michelle Tilley Over a year ago

foo_list is supposed to be promise-resolved and injected by name due to the resolve property of the route.

Kriil Over a year ago

This will cause the unknown provider error to go away but now foo_list isn't bound to the foo_list in resolve...it's just an undefined variable.

Aides · Accepted Answer · 2016-03-09 07:22:10Z

0

Just as a heads up, I just had a similar issue which was caused by adding the resolve-variables as a dependency to the controller while not having set up the response funciton in the $stateProvider.state() yet.

Adding the resolve function fixed the missing dependency
(I still don't quite get why - I'd be glad if anyone could share his knowledge in the comments)

answered Mar 9, 2016 at 7:22

Aides

3,6935 gold badges27 silver badges41 bronze badges

4 Comments

Terry Slack Over a year ago

what is the response function in the state? Can you clarify with an example?

Aides Over a year ago

Sure. Not the response function but the resolve function. It happens when you require some variable on the controller .controller('fooCtrl', function(someRequire) { ... }); while not having a resolve on that require defined .when('...', { resolve: { notDefineSomeRequire: [...] } }). See this fiddle for demonstration and compare it to this fixed fiddle (note the added resolve on fooState)

Terry Slack Over a year ago

Strange, I have the resolve function, and it returns a promise. In my controller, the data comes in alright, but then the unknown error provider for my named parameter is thrown. IE, in your fiddle, I would get an foo_listProvider error. It's bizarre. I can see that the data is sent to the controller when I put a break point in. The code is executed, and once it leaves the controller the error is thrown by Angular.

Aides Over a year ago

In that case create a new question and feel free to link it here

Collectives™ on Stack Overflow

AngularJS, resolve and unknown provider

3 Answers 3

3 Comments

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related