angularjs - express-minify 导致 Angular 错误

Question

这是我的 index.html:

<script src="/app/bower_components/angular/angular.js"></script>
<script src="/app/bower_components/angular-route/angular-route.js"></script> 
<script src="/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="/app/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/app/bower_components/angular-sanitize/angular-sanitize.js"></script>

在我的快速配置中，我有:

app.use(minify());
app.use('/app', express["static"](path.resolve('app')));
app.use('/public', express["static"](path.resolve('public')));

如果我缩小，我的 AngularJS 代码会出错:

 Failed to instantiate module appApp due to: [$injector:unpr] Unknown provider: e

如果我不缩小，一切都很好。我做错了什么？

Answer 1

首先尝试在您的代码上运行 ngmin ( https://github.com/btford/ngmin)。

这是一个“预压缩器”，试图确保您的所有服务都以最小安全的方式注入(inject)。您可以在此处阅读有关缩小问题的更多信息:http://docs.angularjs.org/tutorial/step_05 (在关于缩小的说明下)

简而言之，Angular 的依赖注入(inject)期望服务具有特定的名称(例如 $scope)。但是缩小器更改了这些名称以使其更短，这会导致依赖注入(inject)(导致您看到的错误 - 这是一个放大问题的重要提示，错误表明它无法找到服务“e” . "e"正是缩小导致的那种缩写名称)

因此，如文档所述，您可以使用类似以下的样式，其中提供程序在字符串中指定(可以安全地进行缩小)，然后注入(inject)到数组中位置上的关联变量参数中，而不是按名称注入(inject)。

  phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);

您可以手动执行此操作，但 ngmin 是一种自动处理所有这些的简单方法，正如 ngmin 的文档所描述的那样，转换:

 angular.module('whatever').controller('MyCtrl', function ($scope, $http) { ... });

进入最小安全区:

 angular.module('whatever').controller('MyCtrl', ['$scope', '$http', function ($scope, $http) { ... }]);