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

尝试添加包条目：

packages: {            
  app: {
    format: 'register',
    defaultExtension: 'js'
  },
  'ng2-dnd' : {defaultExtension : 'js' }   
}

应该让应用程序查看正确的路径。

Answer 2

您可以在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>

Answer 3

如果您正在使用捆绑包，则不应该在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也不能。

Answer 4

我已经做了很多寻找，我想我找到了在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。

Answer 5

我正在使用＆＃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' },
    }
});

不要忘记：

从ng2-dnd导入DND_PROVIDERS，DND_DIRECTIVES。
在应用程序的providers属性中使用DND_PROVIDERS 组件。
将DND_DIRECTIVES添加到应用程序的directives属性中零件。有关详细信息：https://github.com/akserg/ng2-dnd

angular2-systemJS路径不起作用

5 个答案: