express-minify会导致角度误差

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

这是一个"预先缩小",试图确保所有服务都以最安全的方式注入.你可以在这里阅读有关缩小问题的更多信息:http://docs.angularjs.org/tutorial/step_05 (在关于缩小的注释下)

简而言之,Angular的依赖注入期望服务具有特定的名称(例如$ scope).但是缩小器会更改这些名称以使它们更短,从而导致依赖注入失败(导致您看到的错误 - 这是一个放大问题,因为错误说它无法找到服务"e" ."e"正是缩小结果的缩写名称)

因此,正如文档描述的那样,您可以使用如下样式,其中提供程序在字符串中指定(可以安全地缩小),然后在数组中的位置而不是名称中注入关联的变量参数.

  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) { ... }]);