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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 18:16:12  来源:igfitidea点击:

Angular "Unknown Provider" error after minification with Grunt Build in Yeoman app

javascriptangularjsgruntjsyeomanuglifyjs

提问by javbotero

I'm having problems with grunt buildon 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 buildYeoman 生成的 Angular 应用程序上遇到了问题,使用 Coffee 和 Slim,所有库都是最新的。(该应用程序是几天前使用最新的生成器生成的。)

grunt buildand grunt serverboth worked fine initially. But after a few days of development using grunt server, I discovered that grunt buildhad 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 buildwas 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 文件,将文件复制/distdist/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-switchthat 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 文档:关于缩小的说明