Search code examples
javascriptpathangularsystemjs

angular2-systemJS path not working

I am using this angular2 project in which I have used ng2Draggable npm package. After Successful installation,I have configured project using systemjs as below:

<script>
    System.config({        
    paths:{           
        'ng2-dnd'         : '../node_modules/ng2-dnd/bundles/ng2-dnd.js'           
    },
    packages: {            
      app: {
        format: 'register',
        defaultExtension: 'js'
      }         
    }
  });

 System.import('app/main')
       .then(null, console.error.bind(console));
</script>

And in my app.component.ts i have written:

import { Component} from 'angular2/core';
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd/ng2-dnd';

@Component({
    selector: 'app',
    templateUrl: "app/app.component.html",
    providers: [],
    directives: [DND_DIRECTIVES]
})


export class AppComponent {      
    constructor() {                
    }  
    ngOnInit() {

    }
}

app.component.html

<h4>Simple Drag-and-Drop</h4>
<div class="row">
    <div class="col-sm-3">
        <div class="panel panel-success">
            <div class="panel-heading">Available to drag</div>
            <div class="panel-body">
                <div class="panel panel-default" dnd-draggable [dragEnabled]="true">
                    <div class="panel-body">
                        <div>Drag Me</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div dnd-droppable class="panel panel-info">
            <div class="panel-heading">Place to drop</div>
            <div class="panel-body">
            </div>
       </div>
   </div>
   <div class="col-sm-3">
       <div dnd-droppable class="panel panel-warning">
           <div class="panel-heading">Restricted to drop</div>
           <div class="panel-body">
           </div>
       </div>
   </div>
</div>

But when I am trying to run the project its showing me this error:

GET http://localhost:3208/src/ng2-dnd/ng2-dnd 404 (Not Found)
Error: XHR error (404 Not Found) loading http://localhost:3208/src/ng2-dnd/ng2-dnd(…)

my project structure : project structure

any suggestions? thanks in advance.

Solution

  • I've done a lot of looking and I think I found the way to note bundles in the SystemJS config. Try adding this to your config:

    bundles: {
    '../node_modules/ng2-dnd/bundles/ng2-dnd.js': ['/ng2-dnd/*']
}

    bundles is the opposite of the other config settings, the bundle is the key and a list of modules (or paths with wildcards it seems) that are inside the bundle. When anything in the list on the right is imported, SystemJS just makes sure the bundle is loaded and run first, since it should register it's own paths. If this doesn't work, look in your 'network' tab of dev tools and see what is getting requested. If you cannot get to ng2-dnd.js using your browser, then SystemJS can't either. You can try the cdn also:

    bundles: {
    'https://npmcdn.com/ng2-dnd@1.6.5/bundles/ng2-dnd.js': ['/ng2-dnd/*']
}

    If you are still getting requests to urls like './src' in your browser debug network tab or 404 errors for them, then the module is most likely just broken. You could try adding something saying those paths are provided by the bundle in the value above:

    ['/ng2-dnd/*', '/src/*']

    I tried out several different module loading strategies with rxjs and created a github repo if you're interested in checking it out.