在一个Angular应用程序中，我看到@Component有属性moduleId。这是什么意思？
当module.id没有在任何地方定义时，应用程序仍然有效。它怎么还能运作？
@Component({
moduleId: module.id,
selector: 'ng-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [AppComponent]
});
Angular的beta版本（自版本2-alpha.51）支持组件的相对资产，例如qazxsw poi装饰器中的templateUrl和styleUrls。
@Component在使用CommonJS时起作用。您无需担心它是如何工作的。
记住：在@Component装饰器中设置moduleId：module.id是这里的关键。如果您没有，那么Angular 2将在根级别查找您的文件。
来自module.id，来自Justin Schwartzenberger's post
2016年9月16日更新：
如果你使用webpack进行捆绑，那么你在装饰器中不需要@Pradeep Jain。 Webpack插件在最终捆绑中自动处理（添加）
module.id
更新（2017-03-13）：
所有提到的moduleId都被删除了。 “组件相对路径”菜谱已删除
我们在我们推荐的SystemJS配置中添加了一个新的SystemJS插件（systemjs-angular-loader.js）。此插件动态地将templateUrl和styleUrls中的“组件相对”路径转换为“绝对路径”。
我们强烈建议您只编写组件相对路径。这是这些文档中讨论的唯一URL形式。你不再需要写
module.id，也不应该。
资料来源：@Component({ moduleId: module.id })
定义：
https://angular.io/docs/ts/latest/guide/change-log.html
moduleId?: string
注释中的moduleId参数采用@Component值，即;
“包含组件的模块的模块ID。”
CommonJS用法：string，
SystemJS用法：module.id
__moduleName:
moduleId用于解析样式表和模板的相对路径，如文档中所述。
包含组件的模块的模块ID。需要能够解析模板和样式的相对URL。在Dart中，这可以自动确定，不需要设置。在CommonJS中，始终可以将其设置为module.id。
ref（old）：moduleId
我们可以通过设置@Component元数据的moduleId属性来指定模板和样式文件相对于组件类文件的位置
ref：https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html
文件夹结构：
https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
没有module.id：
RootFolder
├── index.html
├── config.js
├── app
│ ├── components
│ │ ├── my.component.ts
│ │ ├── my.component.css
│ │ ├── my.component.html
使用module.id：
tsconfig.json：
@Component({
selector: 'my-component',
templateUrl: 'app/components/my.component.html', <- Starts from base path
styleUrls: ['app/components/my.component.css'] <- Starts from base path
})
{
"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关键字，而无需使用module。
declare
npm install -D @types/node file to get the tooling: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
...
})
和echonax的重要解释之外，我真的很讨厌使用Nishchit Dhanani的组件。特别是，如果你支持（Ahead-of-time）module.id，并且对于一个真实的项目来说这是你应该瞄准的目标，那么在组件元数据中就没有像AoT-compilation这样的东西。
来自module.id：
使用Docs加载程序和组件相对URL的JiT编译应用程序必须将
SystemJS属性设置为@Component.moduleId。当AoT编译的应用程序运行时，模块对象未定义。除非您在index.html中分配全局模块值，否则应用程序将失败并显示空引用错误，如下所示：
module.id我认为在<script>window.module = 'aot';</script>
文件的生产版本中使用这一行是绝对不能接受的！
因此，目标是通过以下组件元数据定义进行（即时）JiT编译以进行开发和AoT生产支持:(不使用index.html行）
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文件路径。
为了实现这一切，我使用的解决方案是在开发阶段从多个目录源托管Web服务器（lite-server或browser-sync）！
my.component.ts：
bs-config.json请花一点时间在这个{
"port": 8000,
"server": ["app", "."]
}
上了解详情。
依赖于这种方法的示例性角度2快速启动项目是托管answer。
根据Angular doc，你不应该使用@Component（{moduleId：module.id}）
请参考：here
以下是该页面的相关文字：
所有提到的moduleId都被删除了。 “组件相对路径”菜谱已删除（2017-03-13）
我们在我们推荐的SystemJS配置中添加了一个新的SystemJS插件（https://angular.io/docs/ts/latest/guide/change-log.html）。此插件动态地将templateUrl和styleUrls中的“组件相对”路径转换为“绝对路径”。
我们强烈建议您只编写组件相对路径。这是这些文档中讨论的唯一URL形式。你不再需要写systemjs-angular-loader.js，也不应该。
看起来如果你在tsconfig.json中使用“模块”：“es6”，你就不必使用这个:)
Angular反射过程和metadata_resolver组件使用此moduleId值来在构造组件之前评估完全限定的组件路径。
添加@Component({ moduleId: module.id })修复了构建原生角度应用程序和角度Web应用程序时可能出现的几个问题。最佳实践是使用它。
它还使组件能够在当前目录中查找文件而不是顶层文件夹