Angular2、新しいモジュールを追加しようとするとエラーが発生する

Question

my-checklistというコンポーネントを作成しようとしていますが、問題が発生しています。

app.tsに新しいモジュールを宣言してインポートしましたが、私のhtmlファイルが見つからないようです。

私が手にエラーがある：

zone.js:661 Unhandled Promise rejection: Failed to load checklist.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load checklist.component.html undefined 

https://plnkr.co/edit/WZSc1X7whm658LEHidC4?p=preview

Answer 1

問題は、あなたのapp.ts.であるのに役立ちます

あなたはコンポーネントを開くことを試みますが、あなたのモジュールはhtmlの原因を見つけることができないため、app.tsにコンポーネントをリンクすることはできません。あなたのapp.tsで

あなたはそれがあなたがチェックアウトすることができますデモをそれを取得しない場合https://angular.io/tutorialを試してみて、続く

bootstrap: [ MyCheckList ]

でなければなりません

bootstrap: [ App ]

言います。

いくつかの理由でplunkerが必要になりました：https://plnkr.co/edit/1v0cd9y8BZ0KTQUDlhik?p=previewまた、plunker need src/*。htmlに注意してください。あなたはそれのために./を使用します。

Answer 2

URLをchecklist.component.htmlロードしようとすると、あなたのindex.htmlを基準とし、それが失敗した理由があるとき。ちょうどそれに変更する

@Component({ 
    selector: 'my-checklist', 
    templateUrl: 'src/checklist.component.html' 
}) 

これは動作します。しかし、変数でテンプレートを変換し、相対パスの問題を避ける方法を見つけることをお勧めします。私はtypescriptを知らないが、私はBabelを知っている、多分これはうまくいくだろう。例えば

import template from './checklist.component.html'; 

@Component({ 
    template: template, 
    selector: 'my-checklist' 
}) 

、Babelを使用している場合、transpiled後importええ、この

var template = '<p>Test</p>'; 

恐ろしいように見えるのだろうか？

チェックこの他の質問は、おそらく

Is it possible to import an HTML file as a string with TypeScript?
How to import external HTML files into a TypeScript class