Angular的beta版本(从版本2-alpha.51开始)支持组件的相对资产，比如@Component装饰器中的templateUrl和styleUrls。

模块。id在使用CommonJS时有效。你不需要担心它是如何工作的。

记住:设置moduleId: module。@Component装饰器中的id是 关键在这里。如果你没有，那么Angular 2会帮你找 用于根级别的文件。

来源来自Justin Schwartzenberger的帖子，感谢@Pradeep Jain

2016年9月16日更新:

如果你正在使用webpack进行捆绑，那么你不需要 模块。Id在decorator中。Webpack插件自动句柄(添加它) 模块。Id在final bundle中

更新于(2017-03-13):

moduleId被删除。“组件相对路径”烹饪书删除 我们在推荐的SystemJS配置中添加了一个新的SystemJS插件(SystemJS -angular-loader.js)。这个插件动态地将templateUrl和styleUrls中的“组件相对”路径转换为“绝对路径”。 我们强烈建议您只编写与组件相关的路径。这是这些文档中讨论的URL的唯一形式。您不再需要编写@Component({moduleId: module。Id})，你也不应该。

来源:https://angular.io/docs/ts/latest/guide/change-log.html

定义:

moduleId?: string

@Component注释中的moduleId参数接受一个字符串值，即;

“包含该组件的模块的模块id。”

CommonJS的用法:

SystemJS用法:__moduleName

使用moduleId的原因:

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

包含组件的模块的模块id。需要能够解决模板和样式的相对url。在Dart中，这可以自动确定，不需要设置。在CommonJS中，这个值总是可以设置为module.id。

裁判(旧):https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

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

裁判:https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html 使用示例:

文件夹结构:

RootFolder
├── index.html
├── config.js
├── app
│   ├── components
│   │   ├── my.component.ts
│   │   ├── my.component.css
│   │   ├── my.component.html

没有module.id:

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html', <- Starts from base path
  styleUrls:  ['app/components/my.component.css'] <- Starts from base path
})

module.id:

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs", <- need to change this if you want to use module.id property
...

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

Angular的beta版本(从版本2-alpha.51开始)支持组件的相对资产，比如@Component装饰器中的templateUrl和styleUrls。

模块。id在使用CommonJS时有效。你不需要担心它是如何工作的。

记住:设置moduleId: module。@Component装饰器中的id是 关键在这里。如果你没有，那么Angular 2会帮你找 用于根级别的文件。

来源来自Justin Schwartzenberger的帖子，感谢@Pradeep Jain

2016年9月16日更新:

如果你正在使用webpack进行捆绑，那么你不需要 模块。Id在decorator中。Webpack插件自动句柄(添加它) 模块。Id在final bundle中

看起来如果你在tsconfig中使用"module": "es6"。Json，你不必使用这个:)

添加moduleId: module。Id修复了在构建原生angular应用程序和angular web应用程序时可能出现的几个问题。使用它是最好的实践。

它还允许组件在当前目录中查找文件，而不是从顶部文件夹中查找

根据Angular doc，你不应该使用@Component({moduleId: module。id})

请参考:https://angular.io/docs/ts/latest/guide/change-log.html

以下是该页的相关文本:

moduleId被删除。删除“组件相对路径”手册(2017-03-13)

我们在推荐的SystemJS配置中添加了一个新的SystemJS插件(SystemJS -angular-loader.js)。这个插件动态地将templateUrl和styleUrls中的“组件相对”路径转换为“绝对路径”。

我们强烈建议您只编写与组件相关的路径。这是这些文档中讨论的URL的唯一形式。您不再需要编写@Component({moduleId: module。Id})，你也不应该。