我正在使用这个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(…)
有什么建议吗? 提前谢谢。
答案 0 :(得分:0)
尝试添加包条目:
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'ng2-dnd' : {defaultExtension : 'js' }
}
应该让应用程序查看正确的路径。
答案 1 :(得分:0)
您可以在SystemJS配置中尝试map
属性:
System.config({
map: {
'ng2-dnd': '../node_modules/ng2-dnd/bundles/ng2-dnd.js'
},
(...)
});
也就是说,既然你想使用捆绑的JS文件,你可以将它直接包含在脚本元素中:
<script src="../node_modules/ng2-dnd/bundles/ng2-dnd.js"></script>
答案 2 :(得分:0)
如果您正在使用捆绑包,则不应该在SystemJS配置中输入条目。将捆绑包复制到您的分发目录,并使用<script>
标记在SystemJS之前加载它。我认为问题是节点模块配置不正确。你的导入应该是这样的:
import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd'; // no trailing /ng2-dnd
问题在于他们没有提供“索引”。如果您将ng2-dnd.ts
复制到index.ts
中的node_modules/ng2-dnd
,那么您的代码将在最后没有/ng2-dnd
的情况下进行编译,并且因为您正在使用捆绑包SystemJS会知道该模块已存在。 SystemJS正在寻找一个班级&#39; ng2-dnd&#39;在模块&#39; ng2-dnd&#39;并且不存在。
此外,看起来您的Web服务器正在服务于node_modules的兄弟目录,是吗?那时你无法使用&#39; ..&#39;站起来通过你正在服务的目录的根目录。您必须将捆绑包复制到分发目录。 SystemJS适用于客户端,因此如果您无法通过浏览器访问它,则SystemJS也不能。
答案 3 :(得分:0)
我已经做了很多寻找,我想我找到了在SystemJS配置中注意捆绑包的方法。尝试将其添加到您的配置中:
bundles: {
'../node_modules/ng2-dnd/bundles/ng2-dnd.js': ['/ng2-dnd/*']
}
bundles
与其他配置设置相反,捆绑包是密钥以及捆绑包内的模块列表(或看似通配符的路径)。当导入右侧列表中的任何内容时,SystemJS只是确保首先加载并运行该包,因为它应该注册它自己的路径。如果这不起作用,请查看您的网络&#39;开发工具的选项卡,看看有什么要求。如果您无法使用浏览器访问ng2-dnd.js
,那么SystemJS也不能。您也可以尝试使用cdn:
bundles: {
'https://npmcdn.com/ng2-dnd@1.6.5/bundles/ng2-dnd.js': ['/ng2-dnd/*']
}
如果您仍然收到诸如&#39; ./ src&#39;等网址的请求。在您的浏览器调试网络选项卡或404错误,那么该模块很可能只是破坏。你可以尝试在上面的值中添加一些说明这些路径的东西:
['/ng2-dnd/*', '/src/*']
我使用rxjs尝试了几种不同的模块加载策略,如果您有兴趣查看它,则创建一个github repo。
答案 4 :(得分:0)
我正在使用&#34; ng2-dnd&#34;。 这是我在&#34; systemjs-config.js&#34;。
中的配置System.config({
map: {
'ng2-dnd': 'node_modules/ng2-dnd'
},
packages: {
'ng2-dnd': { main: 'index.js', defaultExtension: 'js' },
}
});
不要忘记: