Angular 4 - configuring systemjs

Question

I am using systemjs as a module loader for the first time. I am also trying to use ng2-drag-drop plugin in my project. After installing it, I have imported the module in the model where I would like to use it, in my case that is the PostModule.

import { Ng2DragDropModule } from 'ng2-drag-drop';

@NgModule({
  imports: [PostRoutingModule, SharedModule, Ng2DragDropModule],
  declarations: [PostComponent],
  exports: [PostComponent],
  providers: [PostService]
})
export class PostModule { }

And as it says in the docs, I have changed the systemjs config file:

declare var System: SystemJSLoader.System;

System.config(JSON.parse('<%= SYSTEM_CONFIG_DEV %>'));
System.config({
    map: {
        'ng2-drag-drop': 'node_modules/ng2-drag-drop'
    },
    packages: {
        'ng2-drag-drop':  { main: 'index.js',  defaultExtension: 'js' },
    }
});

But, I get an error:

GET http://localhost:5555/node_modules/node_modules/ng2-drag-drop/index.js 404 (Not Found) (anonymous) (SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/node_modules/ng2-drag-drop/index.js

Answer 1

Here is how you can configure it:

System.config({
    paths: {
        'npm:': '/node_modules/'
    },

    map: {
        'ng2-drag-drop': 'npm:ng2-drag-drop'
    },

    packages: {
        'ng2-drag-drop': {
            main: 'index.js',
            defaultExtension: 'js'
        }

    }