Using html file as template for component in angular 2

Question

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.

template is a string. You are looking for templateUrl.

Joel Almeida
– Joel Almeida

2016-01-12 11:28:50 +00:00
Commented Jan 12, 2016 at 11:28 — Joel Almeida
– Joel Almeida, Commented Jan 12, 2016 at 11:28

Michele Ricciardi · Accepted Answer · 2016-01-12 11:28:13Z

72

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.

answered Jan 12, 2016 at 11:28

Michele Ricciardi

2,11716 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arathi Sreekumar Over a year ago

I had an issue with the path too. The path had to be relative to the root folder unless you specified a module id angular.io/docs/ts/latest/cookbook/….

Simon S. · Accepted Answer · 2016-11-06 20:08:19Z

9

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.

answered Nov 6, 2016 at 20:08

Simon S.

1111 silver badge2 bronze badges

1 Comment

Darin Cardin Over a year ago

This will break if you attempt to optimize the code with the Angular AOT compiler. Sadly, very little works with AOT.

Collectives™ on Stack Overflow

Using html file as template for component in angular 2

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related