ng2-dragula: Typescript compilation fails with module: system instead of commonjs

The files dragula.directive.ts and dragula.provider.ts import the dragula library with a require instead of an import:

var dragula = require('dragula');

This is tolerated if typescript compiles in commonjs, because the output is based on require, but it is not when compiling in system format. For multiple reasons, my project is compiled in the system format ("module": "system").

-> Workaround I applied on my project:

Replace var dragula = require('dragula'); by import dragula from 'dragula';
add the dragula typings to the project, and modify it to add the default export (to avoid errors):

declare module "dragula" {
    export = dragula;
    export default dragula;
}

But it does not look like a clean fix. I don’t know how to fix it cleanly. The idea is to keep the TypeScript syntax to allow the TS compiler to deal with it in all cases.

PS: I forgot the final error: require remains in the compiled version, and is undefined in the browser.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (1 by maintainers)

Most upvoted comments

@dmackerman - Try following

in system-config.ts

const map: any = {
  'dragula': 'vendor/dragula/dist/dragula.js',
  'ng2-dragula': 'vendor/ng2-dragula'
};

const packages: any = {
//other entries
  'ng2-dragula': { format: 'cjs', defaultExtension: 'js', main: 'ng2-dragula' }
};

in angular-cli.build.js

    vendorNpmFiles: [
    //other entries
      'dragula/dist/dragula.js',
      'ng2-dragula/**/*.js'
    ]

dioklecijan on May 22, 2016

maybe this helps someone – this is how I managed to load dragula into Ionic 2 (Typescript):

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

@Page({ 
  templateUrl: 'path/to/html',
  directives: [Dragula],
  providers: [DragulaService]
})

petervojtek on Apr 28, 2016

@saimon24 , I use ng2-dragula v1.1.6, while you seem to use latest code which is different. e.g. in v1.1.6 there is import .. 'angular/core' instead of import .. '@angular/core'.

I use ng2-dragula v1.1.6 with angular 2.0.0-beta.15. Maybe latest ng2-dragula release is supposed to work with some later angular version (they already have rc1).

petervojtek on May 14, 2016