Angular cannot find templateUrl

Question

I am trying to load Html files using the following code in angular js 2. This file is available under products folder and the html file that i am trying to load is also in the same folder. Still it is not working.

import {Component} from 'angular2/core';

@Component({
    templateUrl:'./products/app.component.pen.html'
})

export class PenComponent
{

}

The above file is getting loaded from the below AppComponent.

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
import {PenComponent} from "./products/app.component.pen";
import {BookComponent} from "./products/app.component.book";  

@Component({
    selector: 'my-app',
    template: `
            <header>
                <ul>
                <li>
                <a [routerLink]="['Pen']">Pen</a></li>

                <li>
                <a [routerLink]="['Book']">Book</a></li>
                </ul>

            </header>
        <router-outlet></router-outlet>
    `,
    directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([
    {path: '/pen', name: 'Pen', component: PenComponent, useAsDefault:true}
    {path: '/book', name: 'Book', component: BookComponent}


])


export class AppComponent {

}

Answer 1

You have to use paths relative to the root of the project for styleUrls and templateUrls (so app/foo/bar/products/app.component.pen.html instead of ./products/app.component.pen.html).

To use urls relative to the component file, your project must be a commonjs module (set "module":"commonjs" in tsconfig), and you have to include module.id in your component decorators:

@Component({ 
  selector: 'foo',
  moduleId: module.id // <== need this
  templateUrl: './foo.html'
})

Answer 2

Its shown here that relatives path works but i think that that are nor release yet.
You have to use full path from starting folder. For e.g. if your start folder name is app. You have to give path as:
templateUrl:app/products/app.component.pen