Angular - 组件中module.id的含义是什么？

Question

在 Angular 应用程序中，我看到 @Component 具有属性 moduleId。这是什么意思？

当module.id 没有在任何地方定义时，应用程序仍然可以工作。怎么还能用？

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

Answer 1

Angular 的 beta 版本（从 vesion 2-alpha.51 开始）支持组件的相关资产，例如 @Component 装饰器中的 templateUrl 和 styleUrls。 p>

module.id 在使用 CommonJS 时有效。您无需担心它是如何工作的。

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

来自Justin Schwartzenberger's post，感谢@Pradeep Jain

2016 年 9 月 16 日更新：

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

Answer 2

（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 参数采用string 值，即；

"包含该组件的模块的模块ID。"

CommonJS 用法：module.id,

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
})

Answer 3

如果您得到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
   ...
})

祝你好运

Answer 4

除了echonax 和Nishchit Dhanani 的精彩解释我想补充一点，我真的很讨厌module.id 的组件群。特别是，如果您支持 (Ahead-of-Time) AoT-compilation 并且对于一个现实的项目，这是您应该追求的目标，那么您的组件元数据中就没有像 module.id 这样的位置。

来自Docs：

使用 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-server 或 browser-sync）！

bs-config.json:

{
  "port": 8000,
  "server": ["app", "."]
}

请查看answer 了解详情。

依赖这种方法的示例性 Angular 2 快速启动项目托管在 here。

Answer 5

根据 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 })，也不应该。

Answer 6

看起来如果你在 tsconfig.json 中使用“module”：“es6”，你不必使用这个:)

Answer 7

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

Answer 8

添加 moduleId: module.id 修复了在构建原生 Angular 应用程序和 Angular Web 应用程序时可能出现的几个问题。使用它是最佳实践。

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