$routeProvider resolve is not getting object from promise

Question

I am having trouble trying to get an array of objects from a promise. I have two issues. First, when the GetAccounts() gets called in the AccountService, it returns 2 objects. In the resolve, when I check the variable result, it doesn't have the 2 objects. Second, when the controller gets instantiated, it gives me this error: accounts is not defined. Can anyone tell me what I am doing wrong? Thanks in advance.

AccountService.js

app.factory('AccountService', ['$http', function ($http) {
    return {
        GetAccounts: function () {
            return $http.get('api/Account/GetAccounts')
            .then(function success(response) {
                return response.data;
            }, function error(response) {
                return console.log("Oops!");
            });
        }
    };
}]);

AdminController.js

app.component('admin', {
    templateUrl: 'Content/app/components/admin/Admin.html',
    bindings: {
        accounts: '<'
    },
    controller: function () {
        this.accounts = accounts;
    }
})

route.js

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/admin', {
        template: '<admin accounts="$resolve.GetAccounts"></admin>',
        resolve: {
            GetAccounts: ['AccountService', function (AccountService) {
                var result = AccountService.GetAccounts();

                return result;
            }]
        }
    })
}]);

Possible duplicate of [Issue with ngRoute injecting resolve services into component controller](http://stackoverflow.com/questions/43242296/issue-with-ngroute-injecting-resolve-services-into-component-controller). — georgeawg, Apr 06 '17 at 02:57
Be aware that the `GetAccounts` function is **converting** the rejected promise to a successful promise. See [Angular execution order with $q](http://stackoverflow.com/questions/34324153/angular-execution-order-with-q/34326388#34326388) – georgeawg — georgeawg, Apr 06 '17 at 03:00
yes I have create the API that's why I am able to get the 2 objects @floor — Ron T, Apr 06 '17 at 03:33
@georgeawg yes that was my other post from my work account but for some reason, I am not able to get the objects. The only difference with my other post is that I used webpack and this one I am not — Ron T, Apr 06 '17 at 03:34

score 1 · Accepted Answer · answered Apr 06 '17 at 02:58

Make the following changes to get it works.

AdminController.js

app.component('admin', {
    templateUrl: 'Content/app/components/admin/Admin.html',
    bindings: {
        accounts: '<'
    }    })

route.js

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/admin', {
        template: 'template.html',
        resolve: {
            GetAccounts: ['AccountService', function (AccountService) {
                var result = AccountService.GetAccounts();

                return result;
            }]
        },
        controller:['$scope','GetAccounts',function($scope, GetAccounts){
           $scope.accounts = GetAccounts;
        }]
    })
}]);

template.html

<div>
<admin accounts="accounts"></admin>
</div>

$routeProvider resolve is not getting object from promise

1 Answers1