Angular cannot find templateUrl

Question

I am trying to download html files using the following code in angular js 2. This file is available in the products folder, and the html file that I am trying to download is also in the same folder. However, it does not work.

import {Component} from 'angular2/core'; @Component({ templateUrl:'./products/app.component.pen.html' }) export class PenComponent { } 

This file is downloaded from the AppComponent below.

 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 should use paths relative to the project root for styleUrls and templateUrls (therefore app/foo/bar/products/app.component.pen.html instead of ./products/app.component.pen.html ).

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

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

Answer 2

It shows here that the relatives path works, but I think this is not a release yet.
You must use the full path from the start folder. E.g. if your initial folder name is app . You must specify the path as:
templateUrl:app/products/app.component.pen