Angular2不適用於templateUrl

Question

雖然我將代碼嵌入到template標記中，但代碼工作正常並顯示內容。

如果我將內容移動到templateUrl控制檯顯示未找到的特定頁面。

home.component.ts

import {Component} from "@angular/core"; 

@Component({ 
    selector: 'home', 
    templateUrl: 'home.component.html' 
}) 

export class HomeComponent{ 

} 

tsconfig.js

{ 
"compilerOptions": { 
"target": "es5", 
"module": "commonjs", 
"moduleResolution": "node", 
"sourceMap": true, 
"emitDecoratorMetadata": true, 
"experimentalDecorators": true, 
"removeComments": false, 
"noImplicitAny": false 
} 
} 

我怎麼能解決這個問題？

Answer 1

我已經通過在@Component指令中添加module.id來克服此問題，因爲我已將模塊配置爲commonjs，因此commonjs模塊需要@Component指令上的moduleId屬性。

爲什麼我們需要CommonJS的模塊

要使用相對於組件的文件URL，你的項目必須是CommonJS的模塊（設置「模塊」：在tsconfig「CommonJS的」），你必須包括module.id在你的組件裝飾器中：[1]

import {Component} from "@angular/core"; 

@Component({ 
    moduleId: module.id, 
    selector: 'home', 
    templateUrl: 'home.component.html' 
}) 

export class HomeComponent{ 

}