Unknown provider error when deploying Rails/AngularJS app to Heroku

Question

I have a Rails/AngularJS app which works fine in local development environment. However, when I deploy this app to Heroku the AngularJS doesn't work an returns this error:

Unknown provider: eProvider <- e

I did a bit of research and it seems it has something to do with the precompiling and minification of the assets, but I don't know what to do to solve this. Any ideas? Thanks!

This is how the controller looks:

function RemindersCtrl($scope, $http) {
  $http.get('/reminders.json').success(function(data) {
    $scope.reminders = data;
    console.log(data);
  });
}

And this is the code in the view:

    %section.reminders
      %div{"ng-controller" => "RemindersCtrl"}
        %ul
          %li{"ng-repeat" => "reminder in reminders"}
            .title {{reminder.title}}

Update: I changed the controller to this, but with the same result:

var RemindersCtrl = function($scope, $http) {
  $http.get('/reminders.json').success(function(data) {
    $scope.reminders = data;
    console.log(data);
  });
}
RemindersCtrl.$inject = ['$scope','$http'];

For now, I "resolved" it by not compressing the assets. This is no problem for a simple trial app, but is not an option for a real app. — John, Nov 29 '12 at 15:05
See if http://stackoverflow.com/questions/12339272/angular-js-unknown-provider helps. — Mark Rajcok, Nov 29 '12 at 18:58

score 26 · Accepted Answer · answered Dec 03 '12 at 14:50

26

According to AngularJS tutorial (http://docs.angularjs.org/tutorial/step_05) you can either add this to the controller to prevent minification problems:

function RemindersCtrl($scope, $http) {
  ...
}
RemindersCtrl.$inject = ['$scope', '$http'];

or instead of defining a function like this:

function RemindersCtrl($scope, $http) {
  ...
}

it should be done like this:

var RemindersCtrl = ['$scope', '$http', function($scope, $http) {
  ...
}];

answered Dec 03 '12 at 14:50

John

6,404
14
54
106

Make sure you apply this pattern to the directive-specific controllers too! – anonymous Oct 13 '14 at 22:35
2

How can I know which file threw this error? It is shown as if it was on application.js – Aleksandrus Dec 26 '15 at 01:32

score 5 · Answer 2 · answered Nov 28 '12 at 18:13

5

You are probably defining your controller as FooController = function($http) {}, you should define as FooController = ["$http", function($http){}]

See mroe here

answered Nov 28 '12 at 18:13

Renan Tomal Fernandes

10,978
4
48
31

Since the error is with provider, it should be on `module.config`. PS: The Array declaration style is the best for this case ;) – Renan Tomal Fernandes Nov 29 '12 at 16:24

score 5 · Answer 3 · answered Nov 09 '13 at 00:45

Angular team (and also generally speaking) recommends that we do not pollute the global scope.

.controller method,

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingCtrl', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

worked fine for me. This is documented on Angular Understanding Controllers documentation

Unknown provider error when deploying Rails/AngularJS app to Heroku

3 Answers3