需要 angularjs-dragula 包时未加载 angularjs 指令答案

【问题标题】：angularjs directive not being loaded when angularjs-dragula package is required需要 angularjs-dragula 包时未加载 angularjs 指令
【发布时间】：2019-10-04 20:28:43
【问题描述】：

我正在将我们的 .NET Framework 项目迁移到 .NET Core。以及我们之前依赖 .NET Framework 中的 BundleTable 工具的地方。我们现在正在使用 webpack。

我有一个使用包“angularjs-dragula”的指令。 webpack入口定义如下

'bundles/grouping':
[
    "./Scripts/angularjs-dragula.js",
    "./App/components/grid.directive.js",
    "./App/components/inline-edit.directive.js",
    "./App/services/grouping.service.js",
    "./App/components/grouping/grouping.directive.js"
],

我将指令初始化如下：

(function () {
  angular.module('App').requires.push(angularDragula(angular));
    angular
      .module('App')
      .directive('appCustomGrouping', appCustomGrouping);

    appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];

  function appCustomGrouping(urlService, groupingService, dragulaService) {
...

事实上，页面永远不会加载 grouping.directive。并且没有错误。除非我删除 webpack 入口点中的 dragula 文件。然后该指令将加载，但抱怨：

ReferenceError: angularDragula 未定义[了解更多]

我曾尝试依赖 webpack 来导入包，并将其从入口定义中删除。我将 angularjs-dragula 安装到我的 node_modules 中，并使用了

var angularDragula = require('angularjs-dragula');

(function () {
  angular.module('App').requires.push(angularDragula(angular));
    angular
      .module('App')
      .directive('appCustomGrouping', appCustomGrouping);

    appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];

  function appCustomGrouping(urlService, groupingService, dragulaService) {
...

但是这会导致相同的行为。

angularjs-dragula 包可以工作，因为我们在迁移到 webpack 之前就使用了它。但是现在它似乎默默地失败了，并带着指令的其余部分？

如何开始诊断此问题？

【问题讨论】：

你怎么知道指令没有加载？

标签： angularjs webpack dragula

【解决方案1】：

AngularJS wrapper for Dragula 的不同寻常之处在于它在全局范围内放置了一个名为 angularDragula 的函数。当使用angular 作为参数调用该函数时，该函数将dragula 模块注册到AngularJS。它返回一个模块名称为“dragula”的字符串。

angularDragula(angular)
angular.module("app",["dragula"])
.run(function(dragulaService) {
  console.log(dragulaService);
})

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angularjs-dragula/dist/angularjs-dragula.js"></script>

<body ng-app="app">
    <h1>Hello AngularJS!</h1>
</body>

页面从不加载 grouping.directive

如何开始诊断此问题？

我会使用开发者控制台插入断点。然后检查变量。

上面的例子用 Dragula 加载 AngularJS 并成功记录了 dragularService。

【讨论】：