Angular 2 configure dragula

2
votes

I have an angular 2 CLI project to which I would like to add the Dragula 3rd party component. I installed the npm module and configured the angular-cli-build.js to pick up the component and place it in the /dist folder like so:

vendorNpmFiles: [
  'systemjs/dist/system-polyfills.js',
  'systemjs/dist/system.src.js',
  'zone.js/dist/**/*.+(js|js.map)',
  'es6-shim/es6-shim.js',
  'reflect-metadata/**/*.+(js|js.map)',
  'rxjs/**/*.+(js|js.map)',
  '@angular/**/*.+(js|js.map)',
  'ng2-dragula/**/*.+(js|js.map|d.ts)'
]

This works, and the files get copied when building. I reference the module in the import like so:

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

This also seems to be correct, since visual studio code seems to find the reference.

I guess the problem is with the system-config.ts. Here I add a mapping:

const map: any = {
  'ng2-dragula': 'vendor/ng2-dragula'
};

But when I start, I get a 404 error showing:

zone.js:101 GET http://localhost:4200/vendor/ng2-dragula/ng2-dragula 404 (Not Found)

I have tried to add the defaultExtension in 'packages', but that would only append an additional 'ng2-dragula.js' at the end of the link.

The content of the location '.../vendor/ng2-dragula/' is:

  • ng2-dragula.js
  • ng2-dragula.d.ts

What am I missing? Should this path not pick up the type definition file?

thanks for any help

Joachim

1
configurationangular

1 Answers

0
votes

Have you added dragula paths?

    paths: {
        'dragula': 'node_modules/dragula/dist/dragula.js',
        'ng2-dragula/*': 'node_modules/ng2-dragula/ng2-dragula.js',

See if this helps.