Heroku 通过 JS 文件缩小破坏了我的 Rails + Angular.js 应用程序

Question

我在 Heroku 上有一个带有 Angular.js 的全新 Rails 4.2.0 应用程序，我有以下 angular.js 控制器：

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

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

在我看来：

<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>

但是当我打开页面时没有任何渲染，我的控制台中有以下内容：

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

在开发模式下一切正常，但在生产模式下我发现自己遇到了这个问题。

我该怎么做才能克服这种情况？我试过禁用资产压缩，但都没有成功。

提前致谢

Answer 1

Angular 文件在使用资产管道缩小时会变得混乱，除非您使用特殊的数组语法来处理依赖项注入中的字符串。在 rails 中执行此操作的最简单方法是仅添加 ng annotate gem，然后您无需修改代码。另一种选择是关闭丑化：

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

您的代码在开发模式下工作，因为它没有被缩小。

Answer 2

为避免缩小源出现问题，始终使用以下语法注入依赖项：

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

Heroku 通过 JS 文件缩小破坏了我的 Rails + Angular.js 应用程序

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

javascript

ruby-on-rails

heroku

asset-pipeline

angularjs