Configuration is not 3rd party module friendly

[csquillen]

Using 3rd party modules such as angular2-moment, ng2-dragula, or ng2-bootstrap has been elusive for me to say the least (and many others apparently). Is "module": "system" the best default configuration in tsconfig.json? A couple of key contributors to the above projects seem to be surprised by this.

Can someone here please try to integrate ng2-dragula with an Angular-CLI generated application? And post the System.config() if they get it working? Drag and drop is what I need most right now with my Angular 2 app, so any help will be greatly appreciated.

Thanks!

[jkuri]

Hi @cquillen2003!
Yes, currently the installation of 3rd party modules is not quite user friendly. It is in plan that this will be achievable running single command.

Right now, I will do the following:

• copy https://github.com/valor-software/ng2-dragula/blob/master/src/app/providers/dragula.provider.ts into src/app/libs/providers
• copy https://github.com/valor-software/ng2-dragula/blob/master/src/app/directives/dragula.directive.ts into src/app/libs/directives
• copy https://github.com/bevacqua/dragula/blob/master/dist/dragula.min.js into src/assets/js/
• include <script src="assets/js/dragula.min.js"></script> into src/index.html
• copy https://github.com/bevacqua/dragula/blob/master/dist/dragula.min.css into src/assets/css/
• include that css into src/index.html too

That should be it, I think. If you need any further help please let me know.

[csquillen]

Hi @jkuri! Thanks for getting back to me. I'll give this a try and let you know.

In the future, will the single command you mentioned be an npm install command?

[jkuri]

It'll be ng install, running npm install in the background and then linking all the stuff together. For more info please see this.

[csquillen]

After following your instructions above and adding the following to my component:

import {Dragula} from '../../libs/directives/dragula.directive';
import {DragulaService} from '../../libs/providers/dragula.provider';

@component({
....
directives: [Dragula],
viewProviders: [DragulaService]
})

I get the following error:

angular2-polyfills.js:322 Error: XHR error (404 Not Found) loading http://localhost:4200/dragula
Error loading http://localhost:4200/dragula as "dragula" from http://localhost:4200/app/libs/directives/dragula.directive.js
at error (http://localhost:4200/vendor/systemjs/dist/system.src.js:1026:16)

[jkuri]

I forgot about typings, in the root dir run typings install dragula --save --ambient and let me know if it works.

[jkuri]

I tested this and it works for me. If you have any further questions feel free to reopen.

[csquillen]

@jkuri I don't have the permissions to reopen this, but I am still having the same problem. Please see the 404 error above. In fact, I just tried again with a fresh, newly generated project and I get the same exact error. The error appears when you add the Dragula directive to a component.

Did you try to actually include the Dragula directive or service in a component via directives: [] and viewProviders: []? Please let me know.

[jkuri]

@cquillen2003 I created a repo for you with a full working example: https://github.com/jkuri/ng2-dragula-demo. Please let me know when you got it working so I can delete this repo. Thanks.

[csquillen]

Thanks @jkuri. I'll take a look when I get the chance. I forked your sample repo, so you can go ahead and delete it.

For now, I've gone with angular/angular2-seed. It was much easier to use 3rd party libs with it. Also, I don't like the idea of ng install because I like the more standardized method of npm install with a postinstall hook. Seems simpler and less Angular-CLI specific.

[neilhem]

I tried to use dragula based on this example: https://github.com/jkuri/ng2-dragula-demo, there is no errors until you actually use directive in view. I am getting TypeError: dragula is not a function.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}