CODEWITHSUNDEEP
javascriptruby-on-railsangularjsherokuasset-pipeline
rodrigoalvesvieira
rodrigoalvesvieira

Reputation: 8062

Heroku breaking my Rails + Angular.js app via JS file minification

I have a brand new Rails 4.2.0 app with Angular.js on Heroku and I have the following angular.js controller:

angular.module("CarDealer.controllers",[]).controller('carsController', function ($scope, carDealerAPIservice) {
  $scope.nameFilter = null;
  $scope.carsList = [];

  carDealerAPIservice.getCars().success(function (response) {
    $scope.carsList = response;
  });
});

and in my view:

<div class="row" data-ng-controller="carsController">
  <div class="row">
    <div class="col-md-4">
      <input type="text" ng-model="nameFilter" placeholder="Find vehicle..." class="form-control", autofocus="true"/>
    </div>
  </div>

  <ul data-ng-repeat="car in carsList | filter: nameFilter">
    <li>{{ car.model_name }} - {{ car.year }} </li>
  </ul>

But when I open the page nothing renders and I have the following in my console:

Error: [$injector:unpr] Unknown provider: eProvider <- e <- carsController

Everything works fine in development mode but in production mode I find myself stuck with this problem.

What can I do to overcome this situation? I've tried disabling asset compressing and all but did not succeed.

Thanks in advance

Upvotes: 1

Views: 934

Answers (2)

lujcon
lujcon

Reputation: 586

To avoid problems with minified sources ALWAYS inject dependencies using following syntax:

controller('carsController', ['$scope', 'carDealerAPIservice', function ($scope, carDealerAPIservice) { 
//code
}]);

Upvotes: 5

user2936314
user2936314

Reputation: 1792

Angular files get messed up when minified with the asset pipeline unless you use a special array syntax to handle strings in dependency injection. The easiest way to do this in rails is to just add the ng annotate gem and then you don't have to modify your code. Another option is to turn off uglification:

# config/environments/***.rb
config.assets.js_compressor = Uglifier.new(mangle: false)

Your code works in development mode because it's not being minified.

Upvotes: 3

Related Questions