Góc không thể tìm thấy templateUrl

Question

Tôi đang cố tải các tệp Html bằng mã sau trong js góc 2. Tệp này có sẵn trong thư mục sản phẩm và tệp html mà tôi đang cố gắng tải cũng nằm trong cùng một thư mục. Tuy nhiên nó không hoạt động.

import {Component} from 'angular2/core'; 

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

export class PenComponent 
{ 

} 

Tệp ở trên được tải từ AppComponent dưới đây.

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

Bạn phải sử dụng đường dẫn tương đối đến thư mục gốc của dự án cho styleUrls và templateUrls (vì vậy app/foo/bar/products/app.component.pen.html thay vì ./products/app.component.pen.html).

Để sử dụng url tương đối so với các tập tin thành phần, dự án của bạn phải là một mô-đun commonjs (set "module":"commonjs" trong tsconfig), và bạn phải bao gồm module.id trong trang trí thành phần của bạn:

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

Answer 2

thể hiện của nó here rằng người thân con đường hoạt động nhưng tôi nghĩ rằng đó cũng chưa được phát hành.
Bạn phải sử dụng đường dẫn đầy đủ từ thư mục bắt đầu. Ví dụ: nếu tên thư mục bắt đầu của bạn là app. Bạn phải cung cấp đường dẫn là:
templateUrl:app/products/app.component.pen