Unknown provider: ServiceProvider <- Service <- Controller

Question

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?

Could it be you're missing the `$inject` array for your `companyListPrepService` function? — Phil, Dec 14 '15 at 05:09
You shouldn't be using the `$http` `success` and `error` methods any more, they have been deprecated. — Phil, Dec 14 '15 at 05:13

score 3 · Accepted Answer · answered Dec 14 '15 at 06:44

3

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

answered Dec 14 '15 at 06:44

Radim Köhler

122,561
47
239
335

Looked through the code and didn't find any other cases where `SeedPageController` is used elsewhere, unfortunately. – Dominooch Dec 14 '15 at 07:22
The good is, that you have my plunker. Check there, that your code is working there. Play with ... and it should show you where is the issue at the end. As just proven, your code is working ;) Hope it'll help a bit... – Radim Köhler Dec 14 '15 at 07:23
What about `ng-controller`? – Phil Dec 14 '15 at 08:55

Phil · Answer 2 · 2015-12-14T06:25:42.100

0

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;
        });
    }]
}

edited Dec 14 '15 at 06:25

answered Dec 14 '15 at 05:11

Phil

157,677
23
242
245

where in seed.config.js? I've tried putting it inside `moduleConfig()`, `companyListPrepService()` and outside `moduleConfig()`. Still getting the same error. – Dominooch Dec 14 '15 at 05:50
@Dominooch in the same scope as the `companyListPrepService` function – Phil Dec 14 '15 at 06:03
still get the same error. `companyListPrepService.$inject = ['companyListService']; function companyListPrepService(companyListService) {...}` – Dominooch Dec 14 '15 at 06:16
@Dominooch I'm not sure then but I've added some more to my answer – Phil Dec 14 '15 at 06:25

Unknown provider: ServiceProvider <- Service <- Controller

2 Answers2