0

ng2-dragula seems cool but I have some hard time setting it up for my angular 2 project. I use system.js as a module preloader and its configuration is:

System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-bootstrap': {},
      'ng2-dragula': { defaultExtension: 'js' }
    },
    map: {
      'dragula': 'node_modules/dragula',
      'ng2-bootstrap': 'node_modules/ng2-bootstrap',
      'ng2-dragula': 'node_modules/ng2-dragula',
      'moment': 'node_modules/moment/moment.js'
    }
});

My tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "watch": true
  }
}

And I load it in my component as follows:

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

@Component({
  selector: 'my-cmp',
  viewProviders: [DragulaService],
})


@View({
  template: '<div>Hey</div>',
  directives: [Dragula]
})

What am I doing wrong so that I got the following error in the browser:

Error: require is not a function(…) angular2-polyfills.js:1243
Brozorec
  • 1,163
  • 9
  • 15

1 Answers1

2

You are probably loading some scripts that are compiled as commonjs modules via <script src="some-module.js"> tags. You should remove them an use System.import("some-module.js") instead. See this answer for explanation on similar issue.

Community
  • 1
  • 1
Sasxa
  • 40,334
  • 16
  • 88
  • 102