javascript 在 Yeoman 应用程序中使用 Grunt Build 进行缩小后出现 Angular“Unknown Provider”错误
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20340644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular "Unknown Provider" error after minification with Grunt Build in Yeoman app
提问by javbotero
I'm having problems with grunt build
on a Yeoman generated Angular app, using Coffee and Slim, with all libraries up-to-date. (The app was just generated a few days ago with the most recent generator.)
我在grunt build
Yeoman 生成的 Angular 应用程序上遇到了问题,使用 Coffee 和 Slim,所有库都是最新的。(该应用程序是几天前使用最新的生成器生成的。)
grunt build
and grunt server
both worked fine initially. But after a few days of development using grunt server
, I discovered that grunt build
had stopped working entirely.
grunt build
并且grunt server
最初都运行良好。但是在使用 开发几天后grunt server
,我发现它grunt build
已经完全停止工作了。
There were a few different problems that I fixed. The biggest one was that I had to abandon Slim entirely for my index file and use straight HTML, since grunt build
was inexplicably removing 80% of the index file when it published to /dist
.
我修复了一些不同的问题。最大的问题是我不得不完全放弃 Slim 来使用我的索引文件并使用直接的 HTML,因为grunt build
当它发布到/dist
.
Unfortunately, after I got almost everything resolved, I started getting this error in one of my Angular directives:
不幸的是,在我解决了几乎所有问题之后,我开始在我的 Angular 指令之一中收到此错误:
Uncaught Error: Unknown provider: aProvider <- a
未捕获的错误:未知提供者:aProvider <- a
The problem seems to be in uglify. I think it could possibly be the same problem reported here, but I'm not absolutely sure. I tried a number a number of solutions, but the only thing that has worked for me was to manually generate clean js files from my coffeescript, copy the files into /dist
, and then write the paths into dist/index.html
.
问题似乎出在丑陋上。我认为这可能与此处报告的问题相同,但我不确定。我尝试了多种解决方案,但唯一对我有用的是从我的咖啡脚本手动生成干净的 js 文件,将文件复制/dist
到dist/index.html
.
Obviously that's not optimal. I'm sure there's a neater way to do it in Grunt (probably by removing minification entirely from the build process, as that other user did in the link above), but I'm new to it and haven't yet figured out how to do that. Either way, it would be a workaround.
显然这不是最优的。我确信在 Grunt 中有一种更简洁的方法来做到这一点(可能是通过从构建过程中完全删除缩小,就像其他用户在上面的链接中所做的那样),但我是新手,还没有弄清楚如何要做到这一点。无论哪种方式,这都将是一种解决方法。
My Gruntfile is pretty basic: I've only added grunt-connect-proxy, grunt-contrib-sass, and grunt-slim to the default file. In fact, I tried to bring in a clean, newly-generated Gruntfile but it didn't build any better.
我的 Gruntfile 非常基础:我只在默认文件中添加了 grunt-connect-proxy、grunt-contrib-sass 和 grunt-slim。事实上,我试图引入一个干净的、新生成的 Gruntfile,但它并没有更好地构建。
The directive that's failing is below. The error actually comes up right in the first line of the controller, $scope.showInput = false
. What's frustrating is that everything works great in grunt server
. The moment I build though, it falls apart entirely.
失败的指令如下。错误实际上出现在控制器的第一行中$scope.showInput = false
。令人沮丧的是,在grunt server
. 然而,在我建造的那一刻,它完全崩溃了。
myModule.directive "editable", ->
controller = ($scope) ->
$scope.showInput = false
$scope.saveContent = ->
$scope.toggleContent()
$scope.save()
linker = (scope, element, attrs) ->
scope.toggleContent = ->
scope.showInput = not scope.showInput
setTimeout((-> element.find('input').focus()), 100)
return DDO =
restrict: 'E'
controller: controller
link: linker
templateUrl: "template/editable.html"
scope:
editableType: "@"
text: "="
placeholder: "@"
save: "&"
(The template isn't really important. It just has an ng-switch
that toggles using $scope.showInput
.)
(模板并不是很重要。它只是有一个ng-switch
使用 切换的$scope.showInput
。)
If anybody has any suggestions, I'd appreciate it.
如果有人有任何建议,我将不胜感激。
回答by m59
It sounds like the common issue of Angular's reliance on the name of arguments for dependency injection. Make sure when you pass dependencies that you include the dependency names as strings so that Angular will know what to inject after minification (since string values won't be changed in the minification process).
这听起来像是 Angular 依赖于依赖注入的参数名称的常见问题。确保在传递依赖项时将依赖项名称包含为字符串,以便 Angular 在缩小后知道要注入的内容(因为在缩小过程中字符串值不会更改)。
myApp.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
}])
From Angular docs: A Note on minification
来自 Angular 文档:关于缩小的说明