templateUrl does not work for me

Question

I use the seed structure as per angular.io get started project. Everything OK so far.

Now I wanted to change the top component to have a view from a separated file and I get into troubles. The working code is:

import {Component, View} from 'angular2/core';
@Component({
       selector: 'my-app',
       template: '<h1>Angular2</h1>',
       directives: []
})
export class AppComponent {
       constructor() {  
       }
}

Then I change the template to templateUrl like so:

templateUrl: 'app.component.html',

where I have in this file the exact same code as before

<h1>Angular2</h1>

Seems to be obvious to work but it does not. It does not spit errors but it does not display anything except the 'loading....' message as in the get started demo

Thanks for helping

Peter

Answer 1

Add moduleId: module.id in the @Component decorator. If you don't have that then Angular 2 will be looking for your files at the root level.

import {Component} from 'angular2/core';

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

export class AppComponent { }  

Check this article

Answer 2

You have to write path from the build path.

templateUrl: 'build/app.component.html'

Answer 3

Give the path from the root directory.