How to install a component wrapper for Angular2 (Dragula in particular)

Question

I'm fairly new with both npm and Angular2. I've followed Angular2's tutorials on creating an initial app and I already have something fairly substantial. https://angular.io/docs/ts/latest/tutorial/

I need to add drag/drop ability to my app and believe I should probably use something native to Angular rather than jquery-ui. I've found this plugin:

https://github.com/valor-software/ng2-dragula

I've followed the instructions in the README, and it appears it's been installed. It's present under node_modules and ng2-dragula": "^1.0.3 has been added to my dependencies. I then ran npm install and start.

Still, when I attempt to use the directive and provider as specified in the readme, it returns not found (both in my IDE and the console).

@Component({
  selector: 'sprint-tasks',
  inputs: ['sprintTask'],
  templateUrl: './views/sprint-tasks.html',
  directives: [Dragula],
  providers: [SprintTaskService],
  viewProviders: [DragulaService]
})

Now, I'm guessing that I either need to (1) import the component at the top of the file and/or (2) list the library in my index's load libraries section. But the documentation doesn't mention this, and I've been unable to figure out the correct endpoints. It's almost as if the documentation believes these directives should now be "innate" to the system after the npm install, but I don't know if that's a thing :)

I'm guessing/hoping this will be fairly obvious to anyone who is used to dealing with importing third-party components. Thanks for any help you can provide.

Answer 1

The usual culprit of this issue is a flag on the tsconfig.json file. In order to reference those files correctly, you should use

"moduleResolution": "node"

also you will need to import these with a module loader library like Systemjs, or something similar.

The Dragula library should come with a bundle that you can then import into the module loader. With system this should be as easy as simply including the bundle in your index.html file.

<script src="node_modules/dragula/path/to/bundle.js"></script>

or whatever the file is called.

If the library does not include a bundle, or the bundle does not work for you, then you can annotate this in your system config and system will do that for you.

System.config({
  map:{
    'dragula': 'node_modules/dragula'
  }
});

As always this may need a little tweaking for your exact needs, but should get you close. More information would be needed to further fine-tune an answer to your specific scenario.