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

I also think that if you added a slash before node_modules here 'ng2-drag-drop': '/node_modules/ng2-drag-drop' it should work as well — Max Koretskyi
– Max Koretskyi, Commented Jun 8, 2017 at 11:07

Max Koretskyi · Accepted Answer · 2017-06-08 11:03:24Z

2

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'
        }

    }

answered Jun 8, 2017 at 11:03

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 - configuring systemjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related