javascript - 在 Yeoman 应用程序中使用 Grunt Build 缩小后出现 Angular "Unknown Provider"错误

标签 javascript angularjs gruntjs yeoman uglifyjs

我在 Yeoman 生成的 Angular 应用程序上使用 grunt build 时遇到问题,使用 Coffee 和 Slim,所有库都是最新的。 (该应用程序是几天前使用最新的生成器生成的。)

grunt buildgrunt server 最初都运行良好。但是在使用 grunt server 开发了几天之后,我发现 grunt build 已经完全停止工作了。

我修复了几个不同的问题。最大的一个是我不得不完全放弃 Slim 来使用我的索引文件并直接使用 HTML,因为 grunt build 在发布到 /dist.

不幸的是,在我几乎解决了所有问题之后,我开始在我的 Angular 指令之一中收到此错误:

未捕获错误:未知提供者:aProvider <- a

问题似乎出在 uglify 上。我认为这可能与报告的问题相同 here ,但我不确定。我尝试了很多解决方案,但唯一对我有用的是从我的 coffeescript 手动生成干净的 js 文件,将文件复制到 /dist,然后将路径写入 dist/index.html.

显然这不是最优的。我确信在 Grunt 中有一种更简洁的方法(可能是通过从构建过程中完全删除缩小,就像其他用户在上面的链接中所做的那样),但我是新手,还没有弄清楚如何要做到这一点。无论哪种方式,这都是一种解决方法。

我的 Gruntfile 非常基础:我只在默认文件中添加了 grunt-connect-proxy、grunt-contrib-sass 和 grunt-slim。事实上,我尝试引入一个干净的、新生成的 Gruntfile,但它并没有构建得更好。

失败的指令如下。该错误实际上出现在 Controller 的第一行 $scope.showInput = false。令人沮丧的是,在 grunt 服务器 中一切都运行良好。不过,在我构建的那一刻,它就完全崩溃了。

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: "&"

(模板并不是很重要。它只是有一个使用 $scope.showInput 切换的 ng-switch。)

如果有人有任何建议,我将不胜感激。

最佳答案

这听起来像是 Angular 依赖参数名称进行依赖注入(inject)的常见问题。确保在传递依赖项时将依赖项名称包含为字符串,以便 Angular 知道在缩小后要注入(inject)什么(因为字符串值在缩小过程中不会更改)。

myApp.controller('myCtrl', ['$scope', '$http', function($scope, $http) {

}])

来自 Angular 文档: A Note on minification

关于javascript - 在 Yeoman 应用程序中使用 Grunt Build 缩小后出现 Angular "Unknown Provider"错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20340644/

相关文章:

JavaScript/NodeJS - 添加 promise 作为扩展方法

javascript - 如何在 react 路由器中链接到具有不同参数的当前页面?

angularjs - 将 cordova 插件 paypal 与 ionic 集成

javascript - Angular UI 导航栏崩溃不起作用

twitter-bootstrap-3 - 如何使用 Grunt 构建 Twitter Bootstrap 3

javascript - 拆分 Gruntfile

javascript - 为什么这些 JavaScript 对象列表属性返回错误值?

javascript - jQuery 一个函数没有按预期工作

javascript - AngularJS 服务单元测试在 toEqual 上失败

node.js - 在 OS X 上安装 Grunt