カスタムコンポーネントをインポートできません-Angular2とTypeScript
App.ts内にカスタムコンポーネントをインポートしようとしていますが、「TS2307：モジュール 'MyComponent'が見つかりません」というエラーが表示されます。確認しましたが、できませんでした。私を助けるものを見つける。
use "moduleResolution"： "classic"と書いた人もいますが、そうすると、MyComponentを除く他のすべて（すべてangular2/...）でTS2307エラーが発生します。
他の人は「runtsc--declaration MyComponent.ts」を書いた-これはMyComponent.d.tsファイルを生成する（「--moduleフラグが提供されない限りコンパイルできない」のようなコンソールでエラーをスローしている間-which ISオプションとしてtsconfigで提供されます-または、MyComponent.tsにインポートしているものに対して「モジュール 'angular2/common'が見つかりません」-しかし、.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 ]);
そして、これが私のMyComponent.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} from "/ app/resources/dev/ts/MyComponent"。また、tsconfigのファイル配列に追加しようとしました（一部の人はそうすべきだと書いています）...それでも...何も機能しませんでした！ jsの出力も確認しました。エラーがスローされても、コンパイルされる可能性があると書いている人もいます...運が悪いです！
====================
編集：
わかりました、inoabrianが最初のコメントで示唆しているように...私はすべてを試したと思いましたが、インポート部分に「./MyComponent」を試していなかったようです。
import { MyComponent } from './MyComponent';
今、トランスコンパイラはそれの仕事をします。 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
これは私のindex.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」でもう1つやるべきだと感じていますが、何がわからないのです（System.importに追加しようとしましたが、配列を受け入れることを望んでいます...しかしそうではないようです）。次に何をすればいいですか？
PSそれでも、これは残念ですが、MyComponentをapp.tsにインポートすることがすべてであり、MyComponentクラス+ MyComponentからすべてを見つけることを望んでいました。 ts +トランスコンパイルされたapp.tsファイルALLIN ONE app.jsファイル、まだ別のjsファイルがない:(
私はそれが長い間遅れていることを知っています、しかし多分他の人は答えから利益を得るかもしれません。私は最終的な問題が何であるかを理解しました（元の質問ですでに編集したものを除いて）。ここにそれがあります：私はカスタムフォルダ構造を持っていて、それを変更する気がなかったと述べました。もし私が持っていたら、angular 2クイックスタートに従うだけでうまくいきました。しかし、それは私の特定のケースで問題を認識させなかったでしょうし、システムがどのように理解できなかったでしょう。 jsは動作します。
問題は私のSystem.config（）-パッケージセクションにありました。これは悪いコードです：
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('my/path/to/app_main_file');
私の間違いは、キー「アプリ」は単に「アプリケーション」という言葉から来た一般的なキーだと思っていました。パッケージオブジェクトでは、各キーが実際にパスを表していることがわかります（そのパッケージ（ファイル）はアプリケーション内のどこにありますか）。したがって、トランスパイルされたファイルがあるフォルダーが「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));
または、次のように、configセクションをさらに適切に記述できます。
System.config({
packages: {
'my-app': {
format: 'register',
defaultExtension: 'js'
}
},
map: {
'my-app': 'my/app/public'
}
});
「地図」が何をするのか、そしてそれをどのように使うのかはかなり自明だと思います。
P.S.私の答えでは、元の質問とまったく同じフォルダー構造に従わなかったことは知っていますが、このように説明する方が理にかなっていると思います。重要な場合は、上記の「my/app/public」を、最初に質問した「resources/dist/js /」に置き換えてください。これは、同じことです。
システム設定に適切なパラメータが不足していると思います。次のように追加します。
System.config({
defaultJSExtensions: true
})
少し奇妙なのは、MyComponent.jsと同じフォルダ内にapp.jsがないことです。私の場合、tsconfig.jsonファイルにoutDirを追加すると、すべてのTypeScriptファイルがこのフォルダーのJavaScriptにコンパイルされます。
tsconfig.jsonファイルの構成は次のとおりです。
{
"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を使用してコンパイルフェーズを実行します。
それがあなたを助けることを願っています、ティエリー