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

时间：2016-05-12 05:43:49

标签： angular systemjs angular2-components

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

当module.id未在任何地方定义时，该应用仍然有效。它怎么还能运作？

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

8 个答案:

答案 0 :(得分：172)

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

module.id在使用CommonJS时有效。你不必担心它是如何运作的。

  

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

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

2016年9月16日更新：

  

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

答案 1 :(得分：86)

（2017-03-13）更新：

  

删除了所有提及的moduleId。 ＆＃34;组件相对路径＆＃34;食谱已删除

     

我们在我们推荐的SystemJS配置中添加了一个新的SystemJS插件（systemjs-angular-loader.js）。这个插件动态地转换＆＃34;组件相对＆＃34; templateUrl和styleUrls中的路径到＆＃34;绝对路径＆＃34;对你而言。

     

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

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

<强>定义： 

moduleId?: string
moduleId注释中的

@Component参数取string值;

＆＃34; 包含组件的模块的模块ID。＆＃34;

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

答案 2 :(得分：20)

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

祝你好运

答案 3 :(得分：3)

除了我要添加的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 relative 等模板文件放置到组件my.component.ts文件路径中。< / p>

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

bs-config.json：

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

请详细了解此answer。

依赖于此方法的示例性角度2快速启动项目已托管here。

答案 4 :(得分：3)

根据Angular doc，您不应该使用@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 })，也不需要。

答案 5 :(得分：1)

看起来你是否正在使用＆＃34;模块＆＃34;：＆＃34; es6＆＃34;在tsconfig.json中，你不必使用它：）

答案 6 :(得分：0)

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

答案 7 :(得分：-2)

添加moduleId: module.id修复了构建原生角度应用和角度网络应用时可能出现的几个问题。这是使用它的最佳做法。

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

相关问题
最新问题