Я пытаюсь импортировать пользовательский компонент в свой app.ts, но получаю ошибку «TS2307: Не удается найти модуль« MyComponent »« Я просмотрел его, не мог найти ничего, что могло бы помочь мне.Невозможно импортировать пользовательский компонент - Angular2 и TypeScript
Некоторые люди писали: использование «moduleResolution»: «классический», но если я это сделаю, то я получаю ошибку TS2307 для всего остального (все angular2/...), кроме MyComponent.
Другие записи «run tsc --declaration MyComponent.ts» - который генерирует файл MyComponent.d.ts (при выдаче ошибок в консоли, например «Невозможно скомпилировать, если не указан флаг -module»), который IS предоставляется в tsconfig в качестве опции - или «Невозможно найти модуль« угловое2/общее »для того, что я импортирую в MyComponent.ts, но он создает файл .d.ts), но при попытке скомпилировать app.ts по-прежнему дает ту же ошибку TS2307. Нейтинг, который я нашел, работал.
Это моя структура проекта:
| /app
| /resources
| /dev
| /ts
| app.ts
| MyComponent.ts
| /dist
| /js
| app.js // transcompiled app.ts
| MyComponent.js // transcompiled MyComponent.ts
| /modules // files copied from the /node_modules/**/ folders (because node_modules is outside versioning and also outside public root (public root is the /app folder)
| es6-shim.js
| angular2-polyfills.js
| system.src.js
| Rx.js
| http.dev.js
| angular2.dev.js
| index.html
|
| /node_modules
| /angular2 // 2.0.0-beta.1
| /es6-promise // 3.0.2
| /es6-shim // 0.33.3
| /rxjs // 5.0.0-beta.0
| /reflect-metadata // 0.1.2
| /systemjs // 0.19.6
| /zone.js // 0.5.10
|
Это мой tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false,
"outDir": "app/resources/dist/js"
},
"files": [
"app/resources/dev/ts/app.ts"
]
}
Мои app.ts:
import { bootstrap } from "angular2/platform/browser";
import { Component, View } from "angular2/core";
import { HTTP_PROVIDERS, Http, Response } from "angular2/http";
//My Custom Components:
import { MyComponent } from 'MyComponent';
/**
* APP
*/
@Component({
selector: 'my-app'
})
@View({
directives: [MyComponent],
template: `
<my-component></my-component>
plus other html
`
})
class MyApp {
public whatever;
constructor(public http: Http) {
// initialize this.whatever
}
makeRequest(): void {
this.http.request('/_http/response.json')
.subscribe((res:Response) => {
this.whatever = res.json();
});
}
}
bootstrap(MyApp, [ HTTP_PROVIDERS ]);
И вот мой Мой Component.ts:
import { Component } from 'angular2/core';
import { NgFor, NgIf } from 'angular2/common';
@Component({
selector: 'my-component',
template: `
<div>MY IMPORTED COMPONENT</div>
`
})
export class MyComponent {
constructor() {}
doSomething(): void {
console.log('Doing something');
}
}
Мои app.ts и MyComponent.ts оба находятся в одной и той же папке. В любом случае, я также пробовал путь следующим образом: import {MyComponent} из «/ app/resources/dev/ts/MyComponent». Кроме того, я попытался добавить его в массив файлов в tsconfig (некоторые люди писали, что я должен это делать) ... Тем не менее ... Ничего не работало! Я также проверил вывод js, потому что некоторые люди писали, что даже если он выдает ошибку, он все равно может быть скомпилирован ... Не повезло!
====================
EDIT:
Ok, так как inoabrian предлагает в первый комментарий ... Я думал, что я пытался все, но, похоже, я не пробовал «./MyComponent» для части импорта.
import { MyComponent } from './MyComponent';
Теперь транцемпилер делает свою работу. Спасибо, Иноабриан, но теперь у меня другая проблема. При попытке запуска в браузере, я просматриваю консоль и оба systemjs и angular2-pollyfills закричать:
http://my-app/resources/dist/js/MyComponent 404 (Not Found)
соответственно:
XHR error (404 Not Found) loading http://my-app/resources/dist/js/MyComponent(…)
Не быть отброшен путем (при сравнении с моя структура папок проекта), у меня есть локальный сервер, указывающий на/приложение, когда я обращаюсь к http://my-app
Это мой индекс .HTML с системой конфигурации и все включено JS файлы:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... Meta tags & CSS assets -->
<script src="resources/dist/modules/es6-shim.js"></script>
<script src="resources/dist/modules/angular2-polyfills.js"></script>
<script src="resources/dist/modules/system.src.js"></script>
<script src="resources/dist/modules/Rx.js"></script>
<script src="resources/dist/modules/http.dev.js"></script>
<script src="resources/dist/modules/angular2.dev.js"></script>
</head>
<body>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('resources/dist/js/app.js')
.then(null, console.error.bind(console));
</script>
<my-app></my-app>
</body>
</html>
У меня есть ощущение, что я должен сделать еще одну вещь с transcompiled файла «MyComponent.js», но не знаю, что (я пробовал чтобы добавить его в System.import, надеясь, что он примет массив ... но, похоже, это не так). Что я должен делать дальше?
P.S. Это, тем не менее, разочаровывает, я надеялся, что импорт MyComponent в app.ts будет всем, и что я найду класс MyComponent + все из MyComponent.ts + моего транскопируемого файла app.ts ALL IN ONE app.js, не имея еще один JS файл :(
Вы изменили расположение импорта на «./MyComponent»? – inoabrian
Я думал, что пробовал все, но, похоже, я этого не делал. Он работал с «./MyComponent» ... но теперь все поднимает еще одну проблему, я отредактировал свой вопрос и добавил проблему в конце, после «EDIT:» – MrCroft
Теперь эта часть кажется проблемой каталогов на вашем сервере , Это может произойти, если у вас есть вложенные каталоги для разработки и dist. Значит, вы могли бы опубликовать, как выглядит ваш код на стороне сервера ..? Я бег прочь облегченного-сервер и я установил мои каталоги обслуживаться через массив [ ] – inoabrian