angularjs directive not being loaded when angularjs-dragula package is required

Question

I am in the process of migrating our .NET Framework project over to .NET Core. And where we previously relied on the BundleTable tools in .NET Framework. We are now using webpack.

I have a directive that uses a package 'angularjs-dragula'. The webpack entry definition is as follows

'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"
],

I initialize the directive as follows:

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

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

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

As it is, the page never loads grouping.directive. And there are no errors. Unless i remove the dragula file in the webpack entrypoint. The directive will then load, but complain:

ReferenceError: angularDragula is not defined[Learn More]

I have tried relying on webpack to import the package, and removed it from the entry definition. I installed angularjs-dragula into my node_modules, and used

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) {
...

However this results in the same behavior.

The angularjs-dragula package works, since we were using it before the move to webpack. However now it seems to be silently failing, and taking the rest of the directive with it?

How can I begin to diagnose this issue?

How do you know the directive doesn't load? – georgeawg May 17 '19 at 17:32 — georgeawg, May 17 '19 at 17:32

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

The AngularJS wrapper for Dragula is unusual in that it places on global scope a function named angularDragula. That function registers the dragula module with AngularJS when the function is invoked with angular as an argument. It returns a string with the module name "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>

the page never loads grouping.directive

How can I begin to diagnose this issue?

I would use the Developer Console to insert breakpoints. Then examine variables.

The above example loads AngularJS with Dragula and successfully logs the dragularService.

angularjs directive not being loaded when angularjs-dragula package is required

1 Answers1