Question

我正在将我们的.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之前就使用过它。但是现在它似乎在无声地失败了，并且将指令的其余部分都带走了？

如何开始诊断此问题？

Answer 1

AngularJS wrapper for Dragula与众不同之处在于，它在全局范围内放置了一个名为angularDragula的函数。以dragula作为参数调用该函数时，该函数向AngularJS注册angular模块。它返回一个模块名称为“ 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。

需要angularjs-dragula软件包时未加载angularjs指令

1 个答案: