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

尝试添加包条目：

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

问题是他们没有提供 'index.ts'。如果您将 ng2-dnd.ts 复制到 node_modules/ng2-dnd 中的 index.ts 那么您的代码将在末尾没有 /ng2-dnd 的情况下编译，并且因为您使用的是捆绑包，SystemJS 将知道该模块已经存在。 SystemJS 正在模块 'ng2-dnd' 中寻找 class 'ng2-dnd' 但不存在。

此外，看起来您的网络服务器正在从 node_modules 的同级目录中提供服务，对吗？那么您将无法使用“..”来超越您所服务目录的根目录。您必须将捆绑包复制到您的分发目录。 SystemJS 在客户端上运行，因此如果您无法使用浏览器访问它，那么 SystemJS 也不能。

Answer 4

我查了很多资料，我想我找到了在 SystemJS 配置中记录捆绑包的方法。尝试将此添加到您的配置中：

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

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

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

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

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

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

Answer 5

我正在使用 "ng2-dnd"。这是我在 "systemjs-config.js".

中的配置

System.config({
    map: {
        'ng2-dnd': 'node_modules/ng2-dnd'
    },
    packages: {
        'ng2-dnd':  { main: 'index.js',  defaultExtension: 'js' },
    }
});

不要忘记：

从 ng2-dnd 导入 DND_PROVIDERS、DND_DIRECTIVES。
在您的应用程序属性的提供程序中使用 DND_PROVIDERS 组件。
将 DND_DIRECTIVES 添加到应用程序的指令属性零件。更多详情：https://github.com/akserg/ng2-dnd

angular2-systemJS 路径不工作

angular2-systemJS path not working

javascript

path

systemjs

angular