角2のコンポーネント相対パス

Question

私のsystemjs.config.jsファイルは "app"を "dist"フォルダにマップします。私は比較的私のコンポーネントのhtmlファイルを参照しようとするのであれば、私は次のエラーを取得するでしょう：

https://localhost:44337/dist/appComponent.html

の読み込みに失敗しました。私は「DIST」だけでなくフォルダにhtmlファイルをコピーするためにがぶ飲みを使用する必要がありますか？その他の選択肢は何ですか？絶対パスは完璧に動作します。

マイsystem.config.jsファイル：

(function (global) { 
System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'dist', 
     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 

App.componentファイル：事前に

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

@Component({ 
    moduleId: module.id, 
    selector: "my-app", 
    templateUrl: "appComponent.html" 
}) 

ありがとう！

Answer 1

外部テンプレートと相対パスをtemplateUrlに設定している場合は、htmlファイルをコピーしてdistフォルダに配置する必要があります。さらに良い - あなたのdist/フォルダ

gulp.task('move-html',function(){ 
    return gulp.src('dev/**/*.html') 
       .pipe(gulp.dest('dist/')); 
}); 

にdev/内のすべての.htmlファイルを移動するための

タスクは、あなたは、このようなインラインテンプレート（コンポーネント内でテンプレートを書く）を使用して、またはなどの他のオプションを持っています - gulp-inline-ng2-template pluginをビルドタスクとして使用して、外部テンプレートをインポートしてインライン化します。こうすることで、テンプレートを取得する際に追加のHTTPリクエストは必要ありません。