javascript - angular2-systemJS 路径不起作用

Question

我正在使用这个 angular2 项目，其中我使用了 ng2Draggable npm 包。安装成功后，我使用systemjs配置了项目，如下所示:

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

在我的app.component.ts中我写道:

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>

但是当我尝试运行该项目时，它向我显示此错误:

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(…)

我的项目结构:

有什么建议吗？提前致谢。

Answer 1

我做了很多查找，我想我找到了在 SystemJS 配置中记录 bundle 的方法。尝试将其添加到您的配置中:

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

bundles 与其他配置设置相反，包是键和包内的模块列表(或似乎带有通配符的路径)。当导入右侧列表中的任何内容时，SystemJS 只是确保首先加载并运行包，因为它应该注册自己的路径。如果这不起作用，请查看开发工具的“网络”选项卡并查看所请求的内容。如果您无法使用浏览器访问 ng2-dnd.js，那么 SystemJS 也无法访问。您也可以尝试 CDN:

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

如果您在浏览器“调试网络”选项卡中仍然收到对“./src”等网址的请求或出现 404 错误，则该模块很可能已损坏。您可以尝试添加一些内容，说明这些路径是由上述值中的 bundle 提供的:

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

我使用 rxjs 尝试了几种不同的模块加载策略，并创建了一个 github repo如果您有兴趣查看一下。