How to install component shell for Angular2 (in particular, Dragula)

Question

I am new to both npm and Angular2. I followed Angular2 tutorials on building the source application, and I already have something pretty substantial. https://angular.io/docs/ts/latest/tutorial/

I need to add drag and drop capabilities to my application and I believe that I should probably use something native to Angular and not jquery-ui. I found this plugin:

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

I followed the instructions in README and it looks like it was installed. It is present in node_modules and ng2-dragula ":" ^ 1.0.3 has been added to my dependencies. Then I ran npm install and ran.

However, when I try to use the directive and the provider as indicated in readme, it does not return (both in my IDE and in the console).

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

Now I assume that I need to (1) import the component at the top of the file and / or (2) list the library in my index loading libraries section. But this is not mentioned in the documentation, and I could not determine the correct endpoints. It’s almost as if the documentation thought that these directives should now be “native” to the system after installing npm, but I don’t know if that :)

I suppose / hope that this will be obvious enough for anyone who is used to dealing with importing third-party components. Thanks for any help you can provide.

Answer 1

A common culprit in this problem is a flag in the tsconfig.json file. To reference these files correctly, you must use

 "moduleResolution": "node" 

you will also need to import them using a module loader library such as Systemjs or something similar.

The Dragula library should come with a package that can then be imported into the module loader. With a system, it should be as simple as just including a package in your index.html file.

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

or regardless of which file is being called.

If the library does not contain a package, or the package does not work for you, you can annotate it in your system configuration, and the system will do it for you.

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

As always, this may require a little adjustment for your specific needs, but you must close you. To further customize the response to a specific scenario, additional information is required.