Update for (2017-03-13) ：

删除了所有提及的moduleId . “组件相对路径”cookbook已删除我们在我们推荐的SystemJS配置中添加了一个新的SystemJS插件(systemjs-angular-loader.js) . 此插件动态地将templateUrl和styleUrls中的“组件相对”路径转换为“绝对路径” . 我们强烈建议您只编写组件相对路径 . 这是这些文档中讨论的唯一URL形式 . 您不再需要编写@Component({moduleId：module.id})，也不应该 .

Definition:

moduleId?: string

@Component 注释中的 moduleId 参数采用 string 值，即;

“包含组件的模块的模块ID . ”

CommonJS用法： module.id ，

SystemJS用法： __moduleName

Reason to use moduleId ：

moduleId 用于解析样式表和模板的相对路径，如文档中所述 .

包含组件的模块的模块ID . 需要能够解析模板和样式的相对URL . 在Dart中，这可以自动确定，不需要设置 . 在CommonJS中，始终可以将其设置为module.id .

我们可以通过设置@Component元数据的moduleId属性来指定模板和样式文件相对于组件类文件的位置

Example usage:

文件夹结构：

RootFolder

├── index.html

├── config.js

├── app

│ ├── components

│ │ ├── my.component.ts

│ │ ├── my.component.css

│ │ ├── my.component.html

Without module.id ：

@Component({

selector: 'my-component',

templateUrl: 'app/components/my.component.html',

styleUrls: ['app/components/my.component.css']

})

With module.id ：

tsconfig.json：

{

"compilerOptions": {

"module": "commonjs",

...

@Component({

moduleId: module.id,

selector: 'my-component',

templateUrl: 'my.component.html',

styleUrls: ['my.component.css']

})