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装饰器中的templateUrlstyleUrls

使用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方法。

除了echonaxNishchit 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。