Использование html файла в качестве шаблона для компонента в angular 2

У меня есть следующая структура приложения

app
   home
       home.html
       home.ts
       home.sass
   app.component.ts
index.html

По сути, я хочу разделить мои страницы на отдельные папки, которые имеют файлы стиля,.ts и .html, связанные с ними.

однако в настоящий момент загрузка шаблона, подобного этому

import {Component} from 'angular2/core';

@Component({
    selector: 'admin-app',
    template: 'home/home.html'
})
export class AppComponent { }

литературные нагрузки "home/home.html" строка как шаблон, где я хочу содержимое html файла home.html.

Я думаю, что если вы хотите передать шаблон, вы должны использовать

templateUrl: 'home/home.html'

Это должно сделать HTTP-запрос и загрузить html в ваш компонент.

Возможно, вам захочется использовать Webpack. В этом случае вы просто:

@Component({
    selector: 'my-comp',
    template: require('./mycomp.component.html')
})

Я обнаружил, что это надежное решение, поскольку оно действительно выдает ошибку времени компиляции, если URL-адрес неверен.