Angular2 – 组件中module.id的含义是什么？
在Angular2中，我看到@Component有属性moduleId 。
这是什么意思？
而当module.id没有定义任何地方，应用程序仍然工作。
它还能如何工作？
@Component({ moduleId: module.id, selector: 'ng-app', templateUrl: 'app.component.html', styleUrls: ['app.component.css'], directives: [AppComponent] });
Angular2（自alpha.51以来）的beta版本支持组件的相关资产，如@Component装饰器中的templateUrl和styleUrls 。
使用CommonJS时， module.id可以工作。 你不必担心它是如何工作的。
记住 ：在@Component装饰器中设置moduleId：module.id是这里的关键。 如果你没有，那么Angular 2会在根目录下查找你的文件。
来自Justin Schwartzenberger的post ，感谢@Pradeep Jain
2016年9月16日更新：
如果你使用webpack捆绑，那么你不需要装饰器中的
module.id。 Webpack插件自动处理（添加）module.id在最终捆绑
（2017-03-13）更新 ：
所有提到moduleId被删除。 “组件相对path”菜谱被删除
我们在我们推荐的SystemJSconfiguration中添加了一个新的SystemJS插件（systemjs-angular-loader.js）。 这个插件dynamic地将templateUrl和styleUrls中的“component-relative”path转换为“绝对path”。
我们强烈build议您只写组件相对path。 这是这些文档中讨论的唯一的URLforms。 您不再需要编写
@Component({ moduleId: module.id })，也不应该。
来源： https ： //angular.io/docs/ts/latest/guide/change-log.html
定义：
moduleId?: string
@Component注释中的moduleId参数需要一个string值，
“ 包含该组件的模块的模块ID ”。
CommonJS用法： module.id ，
SystemJS用法： __moduleName
使用moduleId原因 ：
如文档中所述， moduleId用于parsing样式表和模板的相对path。
包含该组件的模块的模块ID。 需要能够parsing模板和样式的相关URL。 在Dart中，这可以自动确定，不需要设置。 在CommonJS中，这总是可以设置为module.id。
ref（旧）： https ： //angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html
我们可以简单地通过设置@Component元数据的moduleId属性来指定相对于组件类文件的模板和样式文件的位置
ref： 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 })
如果你得到typescript error ，只要在你的文件中declarevariables。
// 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
根据您的configuration，您可能必须将其包含在您的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 ... })
祝你好运
默认情况下，angular2采取path绝对path，我的意思是从应用程序的根本大部分来自
SRC folder
但有时我们必须给出相对path以避免名称冲突，所以我们必须使用名为“module.id”的组件注释的属性，通过使用此组件查看当前文件夹path而不是从根级别，并且使它更容易在其他应用程序中重用我们的组件
例如，默认情况下：
@component({ .... // from root level path without module ID TemplateURL : './abc/def/ghi/jkl.html' .... })
使用模块ID
@component({ ..... //relative path TemplateUrl : 'jkl.html', ModuleId : module.id // Same in case of CSS path ..... })
使用绝对path有几个缺点。 随着应用程序的增长，它们使得随着时间的推移调整文件夹结构变得更加困难。 它们使得在其他应用程序中重用我们的组件变得更加困难。
那么我们该怎么办？ 我们可以使用组件相对path方法。
除了echonax和Nishchit Dhanani的很好的解释，我想补充说，我真的讨厌与module.id组件的人口。 尤其是，如果你对AoT编译（AoT-AoT-compilation）和一个现实的项目（这是你应该瞄准的）有所支持， module.id在你的组件元数据中就没有类似module.id地方。
从文档 ：
使用
SystemJS加载器和组件相对URL的SystemJS编译应用程序必须将@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文件path。
为了实现这一切，我正在使用的解决scheme是在开发阶段从多个目录源托pipeWeb服务器（lite-server或者browser-sync）！
bs-config.json ：
{ "port": 8000, "server": ["app", "."] }
请采取这个答案为我的细节。
在这里托pipe依靠这种方法的示例性angular2快速启动项目。
根据Angular doc，你不应该使用@Component（{moduleId：module.id}）
请参考： https ： //angular.io/docs/ts/latest/guide/change-log.html
以下是该页面的相关文本：
所有提到moduleId被删除。 “组件相对path”cookbook已删除（2017-03-13）
我们在我们推荐的SystemJSconfiguration中添加了一个新的SystemJS插件（ systemjs-angular-loader.js ）。 这个插件dynamic地将templateUrl和styleUrls中的“component-relative”path转换为“绝对path”。
我们强烈build议您只写组件相对path。 这是这些文档中讨论的唯一的URLforms。 您不再需要编写@Component({ moduleId: module.id }) ，也不应该。
看起来如果你在tsconfig.json中使用“module”：“es6”，你不必使用这个:)
添加moduleId: module.id修复了在构build本地angular应用程序和angular度web应用程序时可能发生的几个问题。 使用它是最好的做法。
它还使组件能够在当前目录中查找文件，而不是从顶层文件夹中查找
在构build组件之前，Angularreflection进程和metadata_resolver组件使用此moduleId值来评估完全限定的组件path。
