Углеродный относительный путь компонента

Question

В файле systemjs.config.js отображается «приложение» в папку «dist». Так что, если я пытаюсь ссылаться мой компонент HTML файл относительно, я получаю следующее сообщение об ошибке:

Не удалось загрузить https://localhost:44337/dist/appComponent.html

Должен ли я использовать глотка, чтобы скопировать HTML файлы в «Dist» папку, а также ? Какие у меня есть другие варианты? Абсолютный путь работает отлично.

Мои 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.

Задача, чтобы переместить все .html файлы в dev/ в папку dist/

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

У вас есть другие варианты, например, использование встроенных шаблонов (запись шаблона в компоненте), или - еще лучше - используя gulp-inline-ng2-template plugin как задачу сборки для импорта и встраивания внешних шаблонов для вас. Таким образом, для получения шаблона не потребуется дополнительный HTTP-запрос.