Не удается импортировать пользовательский компонент-Angular2 и TypeScript
Я пытаюсь импортировать пользовательский компонент в мое приложение.ts, но получение ошибки"TS2307: не удается найти модуль 'MyComponent'<!-- Я просмотрел его, не нашел ничего, что могло бы мне помочь.
некоторые люди писали: используйте "moduleResolution": "классический", но если я это сделаю, я получу ошибку TS2307 для всего остального (все angular2/...), за исключением компонент MyComponent.
другие написали " запустить tsc -- объявление MyComponent.ТС" - что делает создать компонент MyComponent.d.TS-файл (при выбрасывании ошибок в консоли, например "не удается скомпилировать, если флаг -- module не предоставлен " - который предоставляется в tsconfig в качестве опции - или" не удается найти модуль 'angular2/common' " для того, что я импортирую в MyComponent.ts-но он генерирует a .d.TS file), но при попытке скомпилировать приложение.ts он по-прежнему дает ту же ошибку TS2307. Nohting я нашел работу.
это моя структура проекта:
| /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.ТС :
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 ]);
а вот и мой компонент MyComponent.ТС:
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.ТС и компонент MyComponent.ТС находятся в одной папке. Во всяком случае, я также пробовал путь следующим образом: импорт { MyComponent } из "/app/resources/dev/ts/MyComponent". Кроме того, я попытался добавить его в массив файлов в tsconfig (некоторые люди писали, что я должен это сделать)... До сих пор... Ничего не получилось! Я также проверил вывод js, потому что некоторые люди написали, что, хотя он выдает ошибку, он все равно может быть скомпилирован... Не повезло!
====================
EDIT:
хорошо, как предлагает иноабриан в первом комментарии... Я думал, что перепробовал все, но, кажется, я не пробовал "./ MyComponent " для импортной части.
import { MyComponent } from './MyComponent';
теперь transcompiler это работа. Спасибо inoabrian, но теперь у меня другая вопрос. Когда я пытаюсь работать в браузере, я проверяю свою консоль, и оба 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(…)
не сбрасывайте путь (при сравнении с моей структурой папок проекта), у меня есть локальный сервер, указывающий на /app при доступе 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>
у меня такое чувство что я должен сделать еще одну вещь с транскомпилированным файлом " MyComponent.js", но не знаю, что (я попытался добавить его в систему.импорт, надеясь, что он примет массив... но похоже это не так). Что мне делать дальше?
П. С. это разочаровывает, тем не менее, я надеялся, что импорт MyComponent в приложение.ts будет всем, и что я найду класс MyComponent + все от MyComponent.ts + мое транскомпилированное приложение.TS файл все в одном приложении.файл JS , не имея еще одного файла js: (
3 ответов
Я знаю, что это давно назрело, но, возможно, другие могут извлечь выгоду из ответа. Я понял, в чем заключительная проблема (кроме того, что я уже редактировал в исходном вопросе). Вот оно: Я упомянул, что у меня была пользовательская структура папок и я не хотел ее менять. Если бы я это сделал, это сработало бы, просто следуя угловому 2 quickstart. Но это не заставило бы меня понять проблему в моем конкретном случае, и я бы не понял, как система.Яш завод.
проблема была в моей системе.config() - в разделе пакеты. Это плохой код:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('my/path/to/app_main_file');
моя ошибка заключалась в том, что ключ "приложение" является просто общим ключом, происходящим от слова "приложение". Оказывается, в объекте packages каждый ключ фактически представляет собой путь (где этот пакет - это файлы - находится в вашем приложении). Итак, предполагая, что папка, в которой находятся мои транспилированные файлы, будет "my / app / public "и" app_main_file основной JS-файл моего приложения, тогда у меня должно было быть что-то вроде этого:
System.config({
packages: {
'my/app/public': {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('my/app/public/app_main_file')
.then(null, console.error.bind(console));
или вы можете написать раздел конфигурации еще лучше, например:
System.config({
packages: {
'my-app': {
format: 'register',
defaultExtension: 'js'
}
},
map: {
'my-app': 'my/app/public'
}
});
Я думаю, что это довольно понятно, что делает "карта" и как ее использовать.
P.S. Я знаю, что в моем ответе я не следовал той же структуре папок, что и в исходном вопросе, но я думаю, что имеет смысл объяснить это так. Если это имеет значение, просто замените "my / app / public" выше с тем, что у меня изначально было в вопросе: "ресурсы / dist/ js/", и это одно и то же.
Я считаю, что вам не хватает правильного параметра в system config. добавьте это так:
System.config({
defaultJSExtensions: true
})
что немного странно, что у вас нет MyComponent.js
в той же папке, что и app.js
. В моем случае, когда я добавить outDir
на tsconfig.json
file, все мои файлы TypeScript компилируются в JavaScript в этой папке.
вот моя конфигурация в my :
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "app/resources/dist/js"
},
"exclude": [
"node_modules"
]
}
я запускаю фазу компиляции с помощью команды:tsc -w
.
надеюсь, это поможет вам, Тьерри!--8-->