什么是角度ngModule中的entryComponents？

Question

我正在开发依赖于的Ionicapp(2.0.0-rc0)angular 2.所以新的介绍ngModules包括在内.我在app.module.ts.下面添加我的.

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Users } from '../pages/users/users';

@NgModule({
  declarations: [
    MyApp,
    Users
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Users
  ]
})
export class AppModule {}

是什么entryComponents在这里做？Components已定义于declarations.那么重复它们的必要性是什么？如果我在这里不包含组件会怎么样？

Answer 1

这适用于使用添加的动态添加组件ViewContainerRef.createComponent().添加它们entryComponents告诉离线模板编译器编译它们并为它们创建工厂.

路由配置中注册的组件也会自动添加,entryComponents因为router-outlet它还用于ViewContainerRef.createComponent()将路由组件添加到DOM.

脱机模板编译器(OTC)仅构建实际使用的组件.如果组件未直接在模板中使用,则OTC无法知道是否需要编译它们.使用entryComponents,您可以告诉OTC也编译这些组件,以便它们在运行时可用.

什么是入门组件？(angular.io)

NgModule docs(angular.io)

定义在定义此组件时应编译的组件.对于此处列出的每个组件,Angular将创建一个ComponentFactory并将其存储在ComponentFactoryResolver中.

如果你没有列出一个动态添加的组件,entryComponents你会得到一个错误消息,因为Angular不会创建一个.

另见https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html

Answer 2

你不会比Angular文档更好地得到解释.

以下是角度文档的解释.

入口组件是Angular按类型强制加载的任何组件.

通过其选择器以声明方式加载的组件不是条目组件.

大多数应用程序组件以声明方式加载.Angular使用组件的选择器来定位模板中的元素.然后,它创建组件的HTML表示形式,并将其插入到所选元素的DOM中.这些不是入门组件.

一些组件仅动态加载,并且永远不会在组件模板中引用.

bootstrapped root AppComponent是一个入口组件.是的,它的选择器匹配index.html中的元素标记.但index.html它不是组件模板,并且AppComponent选择器与任何组件模板中的元素都不匹配.

Angular动态加载AppComponent,因为它是按类型列出的,@NgModule.bootstrap或者使用模块的ngDoBootstrap方法命令性地提升.

路由定义中的组件也是入口组件.路由定义是指按类型划分的组件.路由器忽略路由组件的选择器(如果它甚至有一个)并将组件动态加载到RouterOutlet.

编译器无法通过在其他组件模板中查找这些条目组件来发现这些条目组件.您必须通过将它们添加到entryComponents列表中来告诉它们.

Angular会自动将以下类型的组件添加到模块中entryComponents:

• @NgModule.bootstrap列表中的组件.
• 路由器配置中引用的组件.

您不必明确提及这些组件,尽管这样做是无害的.

Answer 3

其他答案提到了这一点，但基本摘要是：

• 当在html模板中不使用组件时需要它 <my-component />
• 例如，当使用“角度材质”对话框组件时，可以间接使用组件。

材质对话框组件是在TS代码而非模板中创建的：

    const dialogRef = this.dialog.open(MyExampleDialog, { width: '250px' });
  }

这要求您将其注册为entryComponent：

• entryComponents: [MyExampleDialog]

否则会出现错误：

• ERROR Error: No component factory found for MyExampleDialog. Did you add it to @NgModule.entryComponents?

Answer 4

由于Ivy 允许弃用此功能，因此不再需要Angular 9 entryComponents，因此可以从模块声明中删除。

过时的API和功能-entryComponents而ANALYZE_FOR_ENTRY_COMPONENTS不再需要

以前，定义中的entryComponents数组NgModule用于告诉编译器将动态创建和插入哪些组件。有了 Ivy，这不再是必需的，entryComponents数组可以从现有的模块声明中删除。这同样适用于ANALYZE_FOR_ENTRY_COMPONENTS注入令牌。

角常春藤

Ivy 是 Angular 下一代编译和渲染管道的代号。在 Angular 9 版本中，默认使用新的编译器和运行时指令，而不是旧的编译器和运行时，即视图引擎。

Answer 5

entryComponents 数组仅用于定义在 html 中找不到并动态创建的组件。Angular 需要这个提示来查找入口组件并编译它们。

有两种主要类型的入口组件：

• 引导的根组件。
• 您在路由定义中指定的组件。

有关入口组件的更多详细信息，请参阅 angular.io https://angular.io/guide/entry-components

Answer 6

在 Angular 13.1 中，EntryComponent 已被弃用。参考文献：https://github.com/angular/angular/blob/master/CHANGELOG.md#1310-2021-12-09

另请参阅：https ://angular.io/guide/deprecations#entrycomponents-and-analyze_for_entry_components-no-longer-required