在Angular应用中，我已经看到@Component具有property moduleId。这是什么意思？

当module.id未在任何地方定义时，该应用程序仍然可以运行。它仍然如何工作？

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

Angular的beta版本（自vesion 2-alpha.51起）支持组件的相对资产，例如装饰器中的templateUrl和styleUrls@Component。

module.id使用CommonJS时有效。您无需担心其工作原理。

记住：在@Component装饰器中设置moduleId：module.id是关键。如果您没有该文件，Angular 2将在根目录下查找文件。

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

2016年9月16日更新：

如果您使用webpack进行捆绑，则不需要 module.id装饰器。Webpack插件自动处理（添加） module.id在最终捆绑包中

（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

moduleId@Component批注内的参数取一个string值为：

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

CommonJS的用法：module.id，

SystemJS的用法： __moduleName

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

没有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，则只是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

根据您的配置，您可能必须在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我想补充一点，我真的很讨厌与组件的人口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", "."]
}

请为我详细了解这个答案。

在此托管了依赖于此方法的示例性角度2快速入门项目。

根据Angular文档，您不应使用@Component（{moduleId：module.id}）

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

这是该页面上的相关文本：

所有提及的moduleId均已删除。删除了“组件相对路径”食谱（2017-03-13）

我们systemjs-angular-loader.js在建议的SystemJS配置中添加了一个新的SystemJS插件（）。该插件为您动态地将templateUrl和styleUrls中的“相对于组件”的路径转换为“绝对路径”。

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

看起来如果您在tsconfig.json中使用“ module”：“ es6”，则不必使用此:)

Angular反射过程和metadata_resolver组件使用此moduleId值在构建组件之前评估完全限定的组件路径。

添加moduleId: module.id修复了构建本机角度应用程序和角度Web应用程序时可能发生的几个问题。最佳实践是使用它。

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