缩小后无法解析$元素

时间:2017-05-01 14:58:36

标签: angularjs webpack angular-material webpack-dev-server apache-karaf

我有一个奇怪的错误,只有在karaf中运行我的web应用程序时才出现,但不会出现在webpack-dev-server上。当我打开对话框时从Karaf运行Web应用程序时,我在浏览器控制台中收到此错误

angular.js:14516 Error: [$injector:unpr] Unknown provider: nProvider <- n

http://errors.angularjs.org/1.6.3/ $注射器/ unpr?P0 = nProvider%20%3 C-%20N

该组件负责显示表格。列应该是可编辑的,所以我已经从角度材料演示中实现了一个库存对话框。见 - &gt; https://material.angularjs.org/latest/demo/dialog和带有搜索选项的多重选择 - &gt; https://material.angularjs.org/latest/demo/select

以下是代码:

    ctrl.editColumns = (event) => {
      $mdDialog.show({
        template: require('./edit-column-dialog.template.html'),
        clickOutsideToClose: true,
        scope: $scope,
        preserveScope: true,
        controller: EditColumnsDialogController
      })
    }

    function EditColumnsDialogController ($element) {
      ctrl.searchTerm = ''
      ctrl.copySelectedColumns = ctrl.selectedColumns

      // The md-select directive eats keydown events for some quick select
      // logic. Since we have a search input here, we don't need that logic.
      $element.find('input').on('keydown', (ev) => {
        ev.stopPropagation()
      })
    }

我使用$ element作为上述评论中详述的原因。我无法理解的是,这在web pack dev服务器上工作正常。 Web包的设置之间的唯一区别是:

// Add build specific plugins
if (isProd) {
  config.plugins.push(

  // Only emit files when there are no errors
  new webpack.NoEmitOnErrorsPlugin(),

  // Minify all javascript, switch loaders to minimizing mode
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true
  }),

  // Copy assets from the public folder
  // Reference: https://github.com/kevlened/copy-webpack-plugin
  new CopyWebpackPlugin([{
    from: path.join(__dirname, '/app/public')
  }])
)}

非常感谢任何答案..或建议隔离问题!

1 个答案:

答案 0 :(得分:2)

Minifiers会破坏使用Implicit Annotation的代码。相反,请使用$inject Property Annotation

  //USE $inject property annotation
  EditColumnsDialogController.$inject = ["$element"];

  function EditColumnsDialogController ($element) {
      ctrl.searchTerm = ''
      ctrl.copySelectedColumns = ctrl.selectedColumns

      // The md-select directive eats keydown events for some quick select
      // logic. Since we have a search input here, we don't need that logic.
      $element.find('input').on('keydown', (ev) => {
        ev.stopPropagation()
      })
  }

来自文档:

  

隐式注释

     

小心:如果您计划minify您的代码,您的服务名称将被重命名并破坏您的应用。

     

— AngularJS Developer Guide - Implicit Dependency Annotation