Configuring ng2-dragula for system.js seed

[thomasbee]

I fail to figure out how to configure ng2-dragula with the system.js seed https://github.com/mgechev/angular2-seed
I understand there is a similar ticket but clearly describing the solution for this widespread seed would be nice I think.

Versions used:
npm 3.3.12
node v5.1.0
MacOS 10.11.1
Chrome 48
Visual Studio Code Editor

Steps
npm install dragula@3.6.3 ng2-dragula@1.1.0 --save
Then, in a component, when I do
import { Dragula, DragulaService} from 'ng2-dragula/ng2-dragula';
Note the full import path above. Is this correct or incorrect?

I get a runtime error where the browser tries to load dragula.js from
http://localhost:5555/node_modules/dragula.js
where obviously, the directory name is missing.

Questions

• How do I configure the seed to load the file from the correct directory?
• Certainly I should configure the seed somehow to know where to find the actual ng2-dragula, i.e. somehow refer to directory nodes_modules/ng2-dragula/bundles
  I tried such configs in the seed's config.ts file's section DEV_NPM_DEPENDENCIES but didn't find a solution

[NathanWalker]

Good idea @thomasbee, I will try to post instructions Monday/Tuesday 👍

[thomasbee]

An update on this one:
I tried mapping like this:
`

<script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' }, semantic: { format: 'global' } }, map: { jquery: 'node_modules/jquery/dist/jquery.min.js', "ng2-dragula": 'node_modules/ng2-dragula/ng2-dragula.js' } }); ` and importing like this ` import {Dragula, DragulaService} from 'ng2-dragula'; ` although Visual Studio Code reports an error (it is happier if I import from 'ng2-dragula/ng2-dragula'). Anyway, now the ng2-dragula file is loaded, but I get the subsequent errors GET http://localhost:3000/node_modules/ng2-dragula/src/app/directives/dragula.directive 404 (Not Found) GET http://localhost:3000/node_modules/ng2-dragula/src/app/providers/dragula.provider 404 (Not Found)

[yaroslavya]

Same error, while getting the dragula.directive and dragula.provider. I use the angular template from https://github.com/preboot/angular2-webpack, same you are using. Just npm install ng2-dragula and try to add it to the component via import. The symptoms are identical to @thomasbee.

[NathanWalker]

Good to know consistent error across different loaders... I will update the lib if need be based upon what I find tonight or tomorrow.

[egavard]

@thomasbee Did you try to use systemJS defaultJSExtension parameter ?

defaultJSExtensions: true

[thomasbee]

@dy0nysos Surely it has something to do with the missing extension, but when I add

defaultJSExtensions: true

to my system.js then the entire angular will no longer load, with many errors like

GET http://localhost:3000/angular2/core.js 404 (Not Found)
GET http://localhost:3000/angular2/platform/browser.js 404 (Not Found)
GET http://localhost:3000/angular2/http.js 404 (Not Found)
GET http://localhost:3000/angular2/router.js 404 (Not Found)

and so on.

[thomasbee]

Here is my system.js config that works except for ng2-dragula (I understand eventually I also need to map dragula, but I am not there yet)

        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                },
                semantic: {
                    format: 'global'
                }
            },
            map: {
                jquery: 'node_modules/jquery/dist/jquery.min.js',
                semantic: 'app/semantic/dist/semantic.min.js',
                toastr: 'node_modules/toastr/package/build/toastr.min.js',
                'ng2-dragula': 'node_modules/ng2-dragula/ng2-dragula.js'
            }
      });

[NathanWalker]

@thomasbee @yaroslavya
I have added instructions on how to add to both seeds you mentioned here:
https://github.com/valor-software/ng2-dragula/wiki

And also I fixed the peerDependencies warnings when installing with 1.1.2, so go ahead and update to that version.
Cheers!

ps: reopen if you still have trouble, however I verified both instructions on both seeds and everything works perfectly.

[matantsu]

I'm not working with any of those seeds (just followed the 5min quickstart) and I'm having the same problems, it's not finding dragula.directive.d.ts. I'm not sure I understand the solution, it seems that the problem is not solved.

[NathanWalker]

@matantsu what seed are you using, and if not using a seed, provide link to your repo or provide details on if using system.js/webpack?
You would need to provide more information for anyone to help you.

Additionally, if you still have trouble, your issue is likely related to the build setup you are using and therefore, is not a bug with the lib itself.

[matantsu]

I did exactly what the 5 min quick-start says (https://angular.io/docs/ts/latest/quickstart.html).
It may not be an actual bug, but anyway this library is problematic to integrate.

I eventually resolved it by:
<script src="node_modules/ng2-dragula/bundles/ng2-dragula.js"></script>

System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            },
            map:{
                'dragula':'node_modules/dragula/dist/dragula.min.js'
            }
        });

and importing like: import {Dragula,DragulaService} from "ng2-dragula";

which is problematic because my IDE (webstorm 11) does't recognize it and marks it an awful red.
using import {Dragula,DragulaService} from "ng2-dragula/ng2-dragula"; reverts right back to the problem above.

I do not understand how the hell it works but it does ...

[NathanWalker]

So:

1. You're using system.js.
2. Your config is wrong.

As I mention in the wiki regarding angular2-seed which also uses system.js, your config needs to be similar as follows:

System.config({
  defaultJSExtensions: true,
  paths: {
    'dragula': `node_modules/dragula/dist/dragula.min`,
    '*': `node_modules/*`
  },
  packages: {
    angular2: { defaultExtension: false },
    rxjs: { defaultExtension: false }
  }
});

Then you would use:

import {Dragula,DragulaService} from "ng2-dragula/ng2-dragula";

System.js config can be complicated to get right.
I highly suggest you use one of the seeds mentioned... I'm not sure why you wouldn't since they are widely supported and instructions on how to do things is provided for both.

Saying the library is problematic to integrate is saying all libraries all problematic to install.
The library is consistent with other 3rd party libraries.

This is an issue of understanding system.js.

[thomasbee]

@NathanWalker Thanks a lot Nathan for the effort, I can confirm that your solution works for me in both seeds. However, much like @matantsu I am also trying to survive without a seed using John Papa's Tour of Heroes project, i.e. https://github.com/johnpapa/angular2-tour-of-heroes

I tried adapting my system.js according to your description, i.e. it looks like this now

   <script>
       System.config({
            defaultJSExtensions: true,
            paths: {
                'app/*'           : 'app/main',
                'jquery'          : 'node_modules/jquery/dist/jquery.min.js',
                'toastr'          : 'node_modules/toastr/package/build/toastr.min.js',
                'semantic-ui-tab' : 'node_modules/semantic-ui-tab/tab.min.js',
                'dragula'         : 'node_modules/dragula/dist/dragula.min.js',
                '*'               : 'node_modules/*'
            },
            packages: {
                app: { format: 'register' },
                angular2: { defaultExtension: false },
                rxjs:     { defaultExtension: false }
            }
       });
    </script>

This results in the following error:

**Error: require is not a function**
Error loading http://localhost:3000/app/main.js
    at execute (http://localhost:3000/node_modules/ng2-dragula/src/app/providers/dragula.provider.js:21:23)
    at ensureEvaluated (http://localhost:3000/node_modules/systemjs/dist/system.src.js:3212:26)

Obviously this relates to the code snippet

  dragula = require('dragula');

I compared the system.js seed and my naked project for hours now, but to no avail. Would you have any idea where this is coming from?

Basically, it would be nice to also describe how integrating ng2-dragula would work for John Papa's seed.

I would appreciate if you re-open the issue (I cannot)

[thomasbee]

@NathanWalker @matantsu
I finally figured out what the problem is, I hope this is helpful for others to avoid going through this nightmare:
For whatever reason, even the system.js based seed uses commonjs as output format. So in other words, the system.js mappings presented above are perfectly fine, the only thing that you need to ensure in your tsconfig.json, to put

     "module": "commonjs",

as opposed to the official google example. Not sure I understand why it works now, but at least it does. Thanks a lot to @NathanWalker for the investigation.

[NathanWalker]

@thomasbee Yes this is a critical detail. Thanks for pointing that out.
This causes a lot of confusion to many people.
I'm not sure why the Tour of Hero's example is using 'register' as an example as I don't see that used a lot other places at moment. At any rate, yes.... tsconfig.json needs "module": "commonjs"

[mwijnands]

@NathanWalker First of all I appreciate the work you're putting into this library.

I have to agree that this library is problematic to install if I compare it to other libraries. If you take for example ng2-uploader (https://github.com/jkuri/ng2-uploader) install instructions, that just works seamlessly. Just include the script in the html OR add mappings to your systemjs config, and it just works. You can import their UPLOAD_DIRECTIVES in .ts files and it works (even in Visual Studio).

There is no need to add paths to the systemjs config. You don't have to add mappings. Just adding the script to the html works.

I really suggest taking a look at how they pulled that off so more people can integrate ng2-dragula easily. I am saying this as an angular noob. I'm seeing libraries that work seamlessly after just adding a script to the html, and I'm seeing libraries that take a lot of configuration (which makes using multiple tools conflict, for example gulp typescript + tsc + visual studio typescript). Wouldn't it be great if they were all so easy to integrate as ng2-uploader?

[mwijnands]

The issue may be that the ng2-dragula.js that I add to the html, is not in a ng2-dragula subfolder (gulp copying it to another folder, not in node_modules)... which makes import {Dragula,DragulaService} from "ng2-dragula/ng2-dragula"; maybe not work. And if it is mapped, then all kinds of IDE's don't understand it anymore.

Because ng2-uploader.js is also not in a ng2-uploader subfolder but that has to be importerted like import {UPLOAD_DIRECTIVES} from 'ng2-uploader'. So that might be it. I'll try that later.

Although if this is the case, I don't understand why import {Component} from 'angular2/core' just works and it doesn't matter if I put angular2 scripts in an angular2 subfolder or not. I have done both previously.

[zcsongor]

I have this problem as well - but with webpack. Trying to add an alias for dragula, but it does not want to work:

resolve: {
    root: __dirname,
    alias: {
        dragula: path.resolve(__dirname, 'node_modules', 'dragula', 'dist', 'dragula.js')
    }
    extensions: ['', '.ts', '.js', '.json']    
  }

I got:

node_modules/ng2-dragula/src/app/directives/dragula.directive.ts(10,26): error T
S2307: Cannot find module 'dragula'.
node_modules/ng2-dragula/src/app/providers/dragula.provider.ts(1,26): error TS23
07: Cannot find module 'dragula'.

What am I missing? thanks!

[zcsongor]

Got it right with the help of:
#100 (comment)

[kevinaditya]

Hey @zcsongor I have added the typings for dragula, but still showing cannot find module dragula. Can you guide me what else did you do to install this dragula?

Im working with visual studio2015

Steps that I have done:

1. added "dragula": "^3.6.8" to package.json
2. added ('node_modules/dragula/dist/dragula.js') to gulp so my dragula.js under wwwroot/libs/dragula.js
3. copied dragula.directive.ts and dragula.provider.ts and put them under scripts
4. installed dragula typings

but still erroring. do I have do add path on index.html?

[zcsongor]

@kevinaditya I've added to my SystemJS config as well.

[kevinaditya]

@zcsongor umm sorry what did you add to systemjs?

[zcsongor]

The path, like this (I'm using the angular2-seed btw):

const SYSTEM_CONFIG_DEV = {
  defaultJSExtensions: true,
  paths: {
   ...,
    'dragula': `${APP_BASE}node_modules/dragula/dist/dragula.min.js`,
   ...
  },
...
};

[thomfromnorth]

By using the configuration '5 Min Quickstart',
it still returns issues, it does not find dragula.provider and dragula.directive...

[thomfromnorth]

I prefer to stop, unbelievable how complex it is to make it to run, even by following steps to configure it.

[ntsekouras]

My working settings are:
I use angular2 rc1.
I installed dragula typings

My systemjs.config:

var map =       {
    'app': './wwwroot/ngApp',
    'rxjs': './wwwroot/js/libs/rxjs',
    '@angular': './wwwroot/js/libs/@angular',
    'dragula': './wwwroot/js/libs/dragula/dist/dragula.js',
    'ng2-dragula': './wwwroot/js/libs/ng2-dragula'
  };

var packages = {
    'app': { main: 'main.js', defaultExtension: 'js' },
    'rxjs': { defaultExtension: 'js' },
    'dragula': { defaultExtension: 'js' },
    'ng2-dragula': {defaultExtension: 'js' }
  };

var config = {
    map: map,
    packages: packages  
  }`

Then import
import {Dragula, DragulaService} from 'ng2-dragula/ng2-dragula';

And in @component
directives: [Dragula], viewProviders: [DragulaService]

[badpenguin]

please update the wiki with the instruction above from @ntsekouras
i had the problem with systemjs.config.js from the 5min start tutorial and the above post solved

[AMWN]

In my case, finally solved it bij adding this line to system.config.js:
'ng2-dragula': { format: 'cjs', defaultExtension: 'js'}.

After adding "format: 'cjs'" it works fine...

[ghost]

I am getting this error, SystemJS unexpected token < . It's working fine when I run the project in my local server. When I push it to developement mode, it's throwing that error. SystemJs is not able to load the JS file. Instead it's loading the html file. What could be the solution to solve this issue?