Angular kann templateUrl nicht finden

Question

Ich versuche, HTML-Dateien mit dem folgenden Code in angular js 2. laden Diese Datei ist unter Produkte Ordner und die HTML-Datei, die ich versuche zu laden ist auch im selben Ordner. Trotzdem funktioniert es nicht.

import {Component} from 'angular2/core'; 

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

export class PenComponent 
{ 

} 

Die obige Datei wird von der folgenden AppComponent geladen.

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

Sie haben Pfade relativ zum Stamm des Projekts zu verwenden, für styleUrls und templateUrls (so app/foo/bar/products/app.component.pen.html statt ./products/app.component.pen.html).

Um Urls in Bezug auf die Komponentendatei zu verwenden, müssen Sie Ihr Projekt ein commonjs Modul (Set "module":"commonjs" in TSconfig), und Sie haben module.id in Ihrer Komponente Dekorateure enthalten:

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

Answer 2

Seine here gezeigt, dass Angehörige Pfad funktioniert, aber ich denke, dass das noch keine Freigabe ist.
Sie müssen den vollständigen Pfad vom Startordner verwenden. Für z.B. Wenn der Name Ihres Startordners app ist. Sie müssen den Pfad angeben:
templateUrl:app/products/app.component.pen