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)支持组件的相对资产,例如装饰器中的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在最终捆绑中自动处理(添加)

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

moduleId@Component注释中的参数string取值为;

" 包含组件的模块的模块ID. "

CommonJS的用法:module.id,

SystemJS用法: __moduleName

使用理由moduleId:

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

包含组件的模块的模块ID.需要能够解析模板和样式的相对URL.在Dart中,这可以自动确定,不需要设置.在CommonJS中,始终可以将其设置为module.id.

ref(old):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
   ...
})

祝好运