angular2-systemJS路径不起作用

时间:2016-05-25 09:43:20

标签: javascript path angular systemjs

我正在使用这个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(…)

我的项目结构: project structure

有什么建议吗? 提前谢谢。

5 个答案:

答案 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' },
    }
});

不要忘记:

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