Я не уверен, как структурировать оператор импорта для сторонней библиотеки.Как структурировать импорт из стороннего приложения angular2
Я пытаюсь использовать загрузку ng2-файла из проекта angular2 в визуальной студии. https://github.com/valor-software/ng2-file-upload
У меня есть это в моем компоненте:
import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload';
с помощью Visual Studio, это будет строить и IntelliSense находит директивы в библиотеке. Во время выполнения я получаю эту ошибку:
GET http://localhost:54675/ng2-file-upload 404 (Not Found)
Очевидно, что это неправильный путь.
Ниже ss моя структура каталогов. Импорт находится в документе document.pload.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-файл-загрузки находится в корневом каталоге проекта и глотка файл перемещается только JS и CSS к моему Wwwroot/node_modules папки. Я думаю, что во время разработки он использует источник в моем корне (поэтому intellisense работает и строит), но во время выполнения он пытается вытащить из wwwroot и что-то отсутствует или упоминается неправильно.
Update: На основе обратной связи я добавил этот модуль к 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 {
}
И это ошибка, я получаю:
GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select 404 Error: XHR error (404 Not Found) loading http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select (…) GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-drop 404 GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-uploader 404 (Not Found)
Из этого я могу видеть, что это найти компонент NG2-файлов загрузки но он не работает, когда этот компонент пытается загрузить компоненты во вложенной папке.
Пробовали - не получилось. Те же результаты. –
Такое же сообщение об ошибке? Можете ли вы показать, как вы импортируете его в свой компонент? –
Я обновил сообщение с помощью system.config. Как узнать, какие модули загружены? –