【发布时间】：2016-07-08 18:22:08
【问题描述】：
我不确定如何为第三方库构建导入语句。
我正在尝试使用 Visual Studio 中 angular2 项目中的 ng2-file-upload。 https://github.com/valor-software/ng2-file-upload
我的组件中有这个：
从 'ng2-file-upload' 导入 {FILE_UPLOAD_DIRECTIVES, FileUploader}；
使用 Visual Studio，这将构建并智能感知在库中查找指令。在运行时我收到此错误：
GET http://localhost:54675/ng2-file-upload404（未找到）
显然，这不是正确的路径。
下面是我的目录结构。导入在 documentUpload.component.ts 中。
> wwwroot
> -------app
> ----------shared
> -------------documentUpload
> ----------------documentUpload.component.ts
> -------node_modules
> ----------ng2-file-upload
> -------------ng2-file-upload.js
> -------------components
> ----------------file-upload
> -------------------file-uploader.js
我的 ng2-file-upload 源位于项目根目录中，一个 gulp 文件仅将 js 和 css 移动到我的 wwwroot/node_modules 文件夹中。我认为在设计时它在我的根目录中使用源代码（因此 intellisense 工作并构建）但在运行时它试图从 wwwroot 中提取并且缺少某些内容或引用错误。
更新： 根据反馈，我将此模块添加到 system.config 中，如下所示：
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
'ng2fileupload': 'node_modules/ng2-file-upload/ng2-file-upload.js'
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
System.import('ng2fileupload')
.then(null, console.error.bind(console));
此时，我在加载时收到 404 错误： http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select
该文件选择组件位于 ng2-file-upload 下的子目录中。我将它添加为地图模块，但它只会为它使用的其他组件产生类似的错误。
当前进度 这是我的 index.html 文件。
<!DOCTYPE html>
<html>
<head>
<title>FMS</title>
<base href="/" />
<!-- 1. Load libraries -->
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.js"></script>
<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="/node_modules/angular2/bundles/http.js"></script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/node_modules/spinkit/css/spinkit.css" />
<link rel="stylesheet" href="/app/assets/site.css" />
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map:{
'ng2-file-upload':'node_modules/ng2-file-upload/ng2-file-upload.js'
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<fmssupport-app></fmssupport-app>
</body>
</html>
这是我的组件：
import {Component} from 'angular2/core';
import {FILE_UPLOAD_DIRECTIVES} from 'ng2-file-upload';
@Component({
selector: 'document-upload',
templateUrl: 'app/shared/documentUpload/documentUpload.component.html',
directives: [FILE_UPLOAD_DIRECTIVES]
})
export class DocumentUploadComponent {
}
这些是我得到的错误：
获取 http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select 404 错误：加载 XHR 错误（404 未找到） http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select(…) 得到 http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-drop 404 获取 http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-uploader 404（未找到）
从这里我可以看到它正在寻找 ng2-file-upload 组件，但是当该组件尝试在子文件夹中加载组件时它失败了。
【问题讨论】：
标签： angular angular2-directives