Angular

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

更新 (2017-03-13):

All mention of moduleId removed. "Component relative paths" cookbook deleted

We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration. This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.

We strongly encourage you to only write component-relative paths. That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you.

来源：https://angular.io/docs/ts/latest/guide/change-log.html

定义：

moduleId?: string

@Component 注释中的

moduleId 参数采用 string 值，即；

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

CommonJS 用法：module.id,

SystemJS 用法：__moduleName

使用原因moduleId:

moduleId 用于解析样式表和模板的相对路径，如文档中所述。

The module id of the module that contains the component. Needed to be able to resolve relative urls for templates and styles. In Dart, this can be determined automatically and does not need to be set. In CommonJS, this can always be set to module.id.

ref（旧）：https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

we can specify locations of the template and style files relative to the component class file simply by setting the moduleId property of the @Component metadata

参考：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 2

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

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

Remember: setting moduleId: module.id in the @Component decorator is the key here. If you don't have that then Angular 2 will be looking for your files at the root level.

来源自Justin Schwartzenberger's post, thanks to @Pradeep Jain

2016 年 9 月 16 日更新：

If you are using webpack for bundling then you don't need module.id in decorator. Webpack plugins auto handle (add it) module.id in final bundle

Answer 3

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

Answer 4

如果你得到 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 5

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

来自Docs：

JiT-compiled applications that use the SystemJS loader and component-relative URLs must set the @Component.moduleId property to module.id. The module object is undefined when an AoT-compiled app runs. The app fails with a null reference error unless you assign a global module value in the index.html like this:

<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 relative到组件my.component.ts 文件路径。

为了实现这一切，我使用的解决方案是在开发阶段从多个目录源托管 Web 服务器（lite-server 或 browser-sync）！

bs-config.json:

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

请拍下这个给我详细信息。

示例 angular 2 快速启动项目，它依赖于此方法托管 here。

Answer 6

添加 moduleId: module.id 修复了构建本机 angular 应用程序和 angular 网络应用程序时可能出现的几个问题。最好使用它。

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

Answer 7

根据 Angular 文档，您不应使用 @Component({ moduleId: module.id })

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

这是该页面的相关文本：

删除了所有提及 moduleId 的内容。 "Component relative paths" 食谱已删除 (2017-03-13)

我们在推荐的 SystemJS 配置中添加了一个新的 SystemJS 插件 (systemjs-angular-loader.js)。此插件为您动态地将 templateUrl 和 styleUrls 中的 "component-relative" 路径转换为 "absolute paths"。

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

Answer 8

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

Angular - 组件中的module.id是什么意思？

Angular - What is the meanings of module.id in component?

systemjs

angular2-components

`UPDATE - December 08, 2016`

根据您的配置，您可能必须将其包含在您的`tsconfig.json`文件中以获取工具：

Angular - 组件中的module.id是什么意思？

Angular - What is the meanings of module.id in component?

systemjs

angular2-components

angular

UPDATE - December 08, 2016

根据您的配置，您可能必须将其包含在您的tsconfig.json文件中以获取工具：

`UPDATE - December 08, 2016`

根据您的配置，您可能必须将其包含在您的`tsconfig.json`文件中以获取工具：