缩小后无法解析 $element

Question

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

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

http://errors.angularjs.org/1.6.3/$injector/unpr?p0=nProvider%20%3C-%20n

该组件负责显示一个table。这些列应该是 editable，所以我从 angular material 演示中实现了一个股票对话框。请参阅 -> https://material.angularjs.org/latest/demo/dialog and a multi select with the option to search -> 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 开发服务器上运行良好。 webpack 设置之间的唯一区别是：

// 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')
  }])
)}

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

Answer 1

Minifiers 破坏了使用 Implicit Annotation. Instead, use $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()
      })
  }

来自文档：

Implicit Annotation

Careful: If you plan to minify your code, your service names will get renamed and break your app.

— AngularJS Developer Guide - Implicit Dependency Annotation

缩小后无法解析 $element

Can't resolve $element after minification

apache-karaf

angularjs

webpack

angular-material

webpack-dev-server

Implicit Annotation