templateUrl does not work for me


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


Answers:


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