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{ 

}