Angular 2 + mvc core：リソースの読み込みに失敗しました：サーバが404のステータスで応答しました（見つからない）

Question

新しい角度2を作成しようとしていますが、私のコンポーネントテンプレートが投げている問題404エラーと私は私の人生のために理由を理解することはできません。

コンポーネントを設定してテンプレートを指定することはできますが、現在私を逃している理由から、テンプレートはコンソールで.jsファイルとして参照されています。例えば

私は次のエラーを参照してください。

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:5000/app/app.html.js wrapFn@http://localhost:5000/node_modules/zone.js/dist/zone.js:698:34 invokeTask@http://localhost:5000/node_modules/zone.js/dist/zone.js:265:40 runTask@http://localhost:5000/node_modules/zone.js/dist/zone.js:154:57 invoke@http://localhost:5000/node_modules/zone.js/dist/zone.js:335:40 Error loading http://localhost:5000/app/app.html.js as "app/app.html" from http://localhost:5000/app/app.component.js

今、私は私がapp.html.jsを持っていないけど、私は、なぜ、角度がそのファイルをロードしようとしていることは理解できません存在しません。さらに私はテンプレートをapp.htmlに明示的に設定していることを知っていると混乱を招くだけです。

import { Component } from "@angular/core"; 
import { Router } from "@angular/router"; 

const template = require("./app/app.html"); 

@Component({ 
    selector: "alerts", 
    template: template 
}) 

export class AppComponent { 
    constructor(public router: Router) {} 
} 

ご協力いただければ幸いです。

編集 ちょうど私はまた、外部のテンプレートを削除することによって、それを単純化してきた部品を除外すると、コンポーネントに直接テンプレートマークアップを入れて、私はまだ同じ結果を得る、角度はどちらのthatsのファイルを探しています参照または既存：これを行うには

import { Component } from "@angular/core"; 
import { Router } from "@angular/router"; 

@Component({ 
    selector: "alerts", 
    template: `<alerts></alerts>` 
}) 

export class AppComponent { 
    constructor(public router: Router) {} 
} 

Answer 1

はるかに簡単な方法は、moduleId:module.id,を使用しているため必要

@Component({ 
    moduleId:module.id, // this makes the .html relative to the folder you are in 
    selector: "alerts", 
    templateUrl: app.html 
}) 

を必要としないことであろう