Got error when adding ngx-draggable-widget module in my application

[imranbscs]

I have added the ngx widget module but it sends an error in console
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost/DGS.DGSAPI.UI/ngx-draggable-widget

my app module
`import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {AppComponent} from './app.component';
import {routing} from './app.routing';
import { HomeComponent } from './components/home.component';
import { LoginComponent } from './components/login.component';
import { DashboardComponent } from './components/dashboard.component';
import { NgDraggableWidgetModule } from 'ngx-draggable-widget';

@NgModule({
imports: [NgDraggableWidgetModule,BrowserModule, ReactiveFormsModule, HttpModule, routing],
declarations: [AppComponent, HomeComponent, LoginComponent, DashboardComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/DGS.DGSAPI.UI/dashboard' }],
bootstrap: [AppComponent]
})

export class AppModule { }`

and my system.config.js
`/**

• System configuration for Angular samples

• Adjust as necessary for your application needs.
  */
  (function (global) {
  System.config({
  paths: {
  // paths serve as alias
  'npm:': 'node_modules/'
  },
  // map tells the System loader where to look for things
  map: {
  // our app is within the app folder
  'app': 'app',

       // angular bundles
       '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
       '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
       '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
       '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
       '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
       '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
       '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
       '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
       'ngx-draggable-widget': 'node_modules/ngx-draggable-widget/dist/js',
  
       // other libraries
       'rxjs': 'npm:rxjs',
       'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        
   },
   // packages tells the System loader how to load when no filename and/or no extension
   packages: {
       app: {
           main: 'main.js',
           defaultExtension: 'js'
       },
       rxjs: {
           defaultExtension: 'js'
       },
  
      'ngx-draggable-widget': { main: 'main.js',  defaultExtension: 'js' }
       
  
   }
  

  });
  })(this);`

what went wrong in this code?