Angular error: [$injector:unpr] Unknown provider: lineChartProvider <- lineChart <- MainController

Question

Not Sure why but my controller wont recognize the service. I have checked enerything what am I missing here. I have included the services file in HTML. It recognizes other services but not just this one

(function() {
  'use strict';

  angular
    .module('pollyvotes')
    .service('lineChart', lineChart);

    /** @ngInject */
    function lineChart($scope, $http){
      var promise = null;
      return function(){
        if (promise){
          return promise
        } else {
          promise = $http.jsonp('')
          .success(function(data){
            $scope.predictions = data;
         })
          .error( function(data){
            $scope.data = "Request failed";
          })

          return promise;
        }

      }

Controller

(function() {
  'use strict';

  angular
    .module('pollyvotes')
    .controller('MainController', MainController);

  /** @ngInject */
  function MainController($scope, $timeout, lineChart) {

    $scope.photos = [   {id: 'chart-1', name: 'something here',src: "assets/images/300x600.png", href: "https://www.google.de/?gws_rd=ssl", discription: "say something about the chart here"},
                        {id: 'chart-2', name: 'another picture', src: "assets/images/300x600.png", href: "https://www.google.de/?gws_rd=ssl", discription: "say something about the chart here"},
                        {id: 'chart-3', name: 'another picture', src: "assets/images/300x600.png", href: "https://www.google.de/?gws_rd=ssl", discription: "say something about the chart here"},
                        {id: 'chart-4', name: 'another picture', src: "assets/images/300x600.png", href: "https://www.google.de/?gws_rd=ssl", discription: "say something about the chart here"}
                    ];

  }

})();

and declaring module

(function() {
  'use strict';

  angular
    .module('pollyvotes', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize',
                           'ngMessages', 'ngAria', 'ngResource', 'ui.router',
                           'ui.bootstrap',  'akoenig.deckgrid', 'smoothScroll',
                           'ngToast', 'picardy.fontawesome']);

})();

just to be clear, did you declare the 'pollyvotes' module somewhere else ? I mean do you have somewhere ```javascript angular.module('pollyvotes', []); ``` to define the module. — BuriB, Jan 22 '16 at 13:23
I assume you forgot that bit in the question `})();` and it exists in your code? — koox00, Jan 22 '16 at 13:35

score 1 · Accepted Answer · edited May 23 '17 at 12:31

You are injecting $scope to your service.

That's what the documentation says about this error: https://docs.angularjs.org/error/$injector/unpr

Attempting to inject a scope object into anything that's not a controller or a directive, for example a service, will also throw an Unknown provider: $scopeProvider <- $scope error.

There is a good answer how to avoid this here: Injecting $scope into an angular service function()

Angular error: [$injector:unpr] Unknown provider: lineChartProvider <- lineChart <- MainController

1 Answers1