CODEWITHSUNDEEP
angularjsangular-ui-routerangular-uistate
Dominooch
Dominooch

Reputation: 720

Unknown provider: ServiceProvider <- Service <- Controller

Been banging my head on this issue for hours now and can't seem to find the solution on SO.

I have the following:

//controller.js
(function() {
'use strict';

angular
    .module('seed-module')
    .controller('SeedPageController', SeedPageController);

SeedPageController.$inject = ['companyListPrepService', 'logger'];

function SeedPageController(companyListPrepService) {
    var vm = this;
    vm.companies = companyListPrepService;
    console.log(vm.companies.data);

}

angular
    .module('seed-module')
    .factory('companyListService', companyListService);

companyListService.$inject = ['$http', 'logger'];

function companyListService($http, logger) {
    return {
        getCompanies: getCompanies
    };


    function getCompanies() {
        return $http.get('/companies.json')
            .success(function (data) {
                return data;
        })
            .error(function (error) {
                logger.error('XHR Failed for .' + error);
        });


    }
}

And for my routes:

//seed.config.js
(function() {
'use strict';

angular
    .module('seed-module')
    .config(moduleConfig);

/* @ngInject */
function moduleConfig($translatePartialLoaderProvider, $stateProvider, triMenuProvider) {
    $translatePartialLoaderProvider.addPart('app/seed-module');

    $stateProvider
    .state('triangular.admin-default.seed-page', {
        resolve: {
        companyListPrepService : companyListPrepService
        },
        url: '/seed-module/seed-page',
        templateUrl: 'app/seed-module/seed-page.tmpl.html',
        // set the controller to load for this page
        controller: 'SeedPageController',
        controllerAs: 'vm'
    });
}

function companyListPrepService(companyListService) {
    return companyListService.getCompanies();
}
})();

My console.log(vm.companies.data); gives me the object at the end of my REST endpoint, however, i get an

Error: [$injector:unpr] Unknown provider: companyListPrepServiceProvider <- companyListPrepService <- SeedPageController.

I'm relatively new to AngularJS and have no clue where the companyListPrepServiceProvider is coming from. I don't even know where to debug this...any thoughts?

Upvotes: 2

Views: 2387

Answers (2)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

Your code is working as is. There is a working example, with its part AS IS. (it is true, that mixture of strict notation is not good, we should use explicit $inject = [...] everywhere - but it is not a problem here)

So, what could be the issue? I would say, that the controller SeedPageController is used elswhere, in some other state, which does NOT contain the resolve statement:

resolve: {
  //companyListPrepService : companyListPrepService
},

There is such broken example with the error message experienced above

Error: [$injector:unpr] Unknown provider: companyListPrepServiceProvider <- companyListPrepService <- SeedPageController

Upvotes: 3

Phil
Phil

Reputation: 164791

I'm going to guess you're minifying your code and as such, you're missing the DI annotation for your companyListPrepService function. Try adding

companyListPrepService.$inject = ['companyListService'];

to seed.config.js.

Alternatively, try just using an array annotated function

resolve: {
    companyListPrepService: ['companyListService', function(companyListService) {
        return companyListService.getCompanies().then(function(response) {
            // as mentioned in comments, stop using "success"
            return response.data;
        });
    }]
}

Upvotes: 0

Related Questions