在Angular应用程序中，我看到@Component具有属性moduleId。这是什么意思？
当module.id没有在任何地方定义时，应用程序仍然可以工作。它怎么还能工作？
@Component({
moduleId: module.id,
selector: 'ng-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [AppComponent]
});
Angular的测试版（由于vesion2-alpha.51）支持组件的相对资产，如 记住：在@Component装饰器中设置moduleId:module.id是这里的钥匙。如果你没有这个，那么Angular 2会寻找用于根级别的文件。 来源于Justin Schwartzenberger的帖子，感谢@Pradeep Jain 2016年9月16日更新： 如果您使用webpack进行捆绑，则不需要decorator中的@Component装饰器中的templateUrl和styleUrlmodule.id在使用CommonJS时工作。你不需要担心它是如何工作的。module.id。Webpack插件自动处理（添加它）最终束中的module.id
更新（2017-03-13）：
删除了对moduleId的所有提及。"组件相对路径"食谱删除
我们在推荐的SystemJS配置中添加了一个新的SystemJS插件（systemjsangular loader.js）。这个插件为您动态地将templateUrl和styleUrls中的"组件相对"路径转换为"绝对路径"。
我们强烈建议您只编写组件相对路径。这是这些文档中讨论的唯一URL形式。您不再需要编写
@Component({ moduleId: module.id })，也不应该编写。
来源：https://angular.io/docs/ts/latest/guide/change-log.html
定义：
moduleId?: string
CCD_ 10注解内的CCD_ 9参数取CCD_；
"包含组件的模块的模块id。"
CommonJS用法：module.id、
SystemJS用法：__moduleName
使用
moduleId的原因：moduleId用于解析样式表和模板的相对路径，正如文档中所述。
包含组件的模块的模块id。需要能够解析模板和样式的相对url。在Dart中，这可以自动确定，不需要设置。在CommonJS中，它总是可以设置为module.id.
ref（旧）：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
没有模块。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
})
带模块.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
})
如果您得到typescript error，那么只需要declare文件中的变量。
// app.component.ts
declare var module: {
id: string;
}
//
@Component({
moduleId: module.id, // now it works without annoying Typescript
...
})
UPDATE - December 08, 2016
module关键字在node上可用。因此，如果您在项目中安装@types/node，您将在typescript文件中自动获得module关键字，而无需declare。
npm install -D @types/node
根据您的配置，可能必须将其包含在tsconfig.json文件中才能获得工具：
//tsconfig.json
{
...
"compilerOptions": {
"types" : ["node"]
}
...
}
// some-component.ts
// now, no need to declare module
@Component({
moduleId: module.id, // now it works without annoying Typescript
...
})
好运
根据Angular文档，您不应该使用@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 })，也不应该编写。
除了我想补充的echonax和Nishchit Dhanani的精彩解释之外，我真的很讨厌使用module.id的组件群体。特别是，如果你支持（提前）AoT编译，并且支持一个现实的项目——这是你应该追求的目标——那么在你的组件元数据中就没有module.id这样的东西了。
来自文档：
使用
SystemJS加载程序和组件相关URL的JiT编译的应用程序必须将@Component.moduleId属性设置为module.id。运行AoT编译的应用程序时，模块对象未定义。除非你在index.html中分配一个全局模块值，否则该应用程序将以空引用错误失败，如下所示：
<script>window.module = 'aot';</script>
我认为在index.html文件的生产版本中使用这一行是绝对不可接受的
因此，我们的目标是使用以下组件元数据定义进行（即时）JiT编译以进行开发，并为生产提供AoT支持：（无moduleId: module.id行）
@Component({
selector: 'my-component',
templateUrl: 'my.component.html', <- relative to the components current path
styleUrls: ['my.component.css'] <- relative to the components current path
})
同时，我想将样式（如my.component.css）和模板文件（如my.component.html）相对于组件my.component.ts文件路径放置。
为了实现这一切，我使用的解决方案是在开发阶段从多个目录源托管web服务器（lite服务器或浏览器同步）！
bs-config.json:
{
"port": 8000,
"server": ["app", "."]
}
请为我详细了解这个答案。
这里托管了依赖于这种方法的示例性angular 2快速启动项目。
如果您在tsconfig.json中使用"module"："es6"，则不必使用以下内容：）
此moduleId值由角度反射过程和metadata_resolver组件使用，以在构建组件之前评估完全合格的组件路径。
添加moduleId: module.id修复了构建原生angular应用程序和angular web应用程序时可能出现的几个问题。使用它是最好的做法。
它还使组件能够在当前目录中查找文件，而不是从顶部文件夹