I have following app structure
app
home
home.html
home.ts
home.sass
app.component.ts
index.html
Essentially I want to divide my pages into separate folders that have style, .ts and .html files related to them
however at the moment loading a template like this
import {Component} from 'angular2/core';
@Component({
selector: 'admin-app',
template: 'home/home.html'
})
export class AppComponent { }
literary loads "home/home.html" string as a template where as I want html contents of the home.html file.
I think that if you want to pass a template, you should use
templateUrl: 'home/home.html'
That should make an http request and load the html into your component.
You may want to consider using Webpack. In that case, you simply:
@Component({
selector: 'my-comp',
template: require('./mycomp.component.html')
})
I've found it to be a solid solution thus far since it will actually throw a compile time error if the URL is incorrect.