找不到 SendMessageComponent 的组件工厂。

Question

我想用角度材料对话框打开组件。

我写这段代码：

sendMessage(): void {

 const dialogRef = this.matDialog.open(SendMessageComponent, {

  data: {

    requestRefId: this.requestId

  },

  panelClass: 'semd_message'

});

dialogRef.afterClosed().subscribe(res => {

  if (res) {

    this.FetchMessage();

  }

 });

}

但是当我想打开对话框时，它显示了这个错误：

No component factory found for SendMessageComponent. Did you add it to @NgModule.entryComponents?

at noComponentFactoryError (core.js:27401)

at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:27477)

at CdkPortalOutlet.attachComponentPortal (portal.js:810)

at MatDialogContainer.attachComponentPortal (dialog.js:354)

at MatDialog._attachDialogContent (dialog.js:1161)

at MatDialog.open (dialog.js:1028)

at MessageComponent.sendMessage (message.component.ts:71)

at Object.handleEvent (message.component.html:3)

at handleEvent (core.js:45703)

at callWithDebugContext (core.js:47343)

declarations在我的模块中，我在, entryComponents,中定义了一个 SendMessageComponent exports。

    @NgModule({

  declarations: [ListComponent, SendMessageComponent],

  imports: [

    CommonModule,

    BrowserAnimationsModule,

    EMoneyDepositRoutingModule,

    ReactiveFormsModule,

    FormsModule ,

    PageLayoutModule,

    SecondaryToolbarModule,

    TranslateModule.forChild(),

    SharedModule,

    CoreModule,

    BreadcrumbsModule,

    Angular2PromiseButtonModule.forRoot(promiseButtonConfig)

  ],

  exports:[SendMessageComponent],

  entryComponents: [SendMessageComponent]

})

export class EMoneyDepositModule { }

现在有什么问题？我该如何解决这个问题？？？

Answer 1

如果您遇到此问题，我假设您使用的是 Angular v8 或更低版本。使用 Ivy，您不再需要将动态呈现的组件添加到entryComponents. 一种选择是升级您的角度版本。为什么我们需要添加一个动态创建的组件entryComponents？在创建组件时，Angular 需要ComponentFactory解析它们。当您在模板中使用组件时，angular 会为这些组件创建工厂。但是，动态呈现的组件不会在任何模板中使用。这就是为什么您需要告诉 Angular 通过将这些组件添加到entryComponents（使用 Ivy-aka Angular v9+，情况不再如此）来为这些组件创建一个工厂。让我们看看你的情况。你有一个延迟加载的模块EMoneyDepositModule，你添加SendMessageComponent到entryComponents. 这样做是为SendMessageComponent注入树的子部分创建一个工厂。它仅适用于EMoneyDepositModule. 此模块之外的任何人都不能注入该工厂。我假设matDialog是全球提供的，您可以在任何地方访问它。但是，matDialog无法访问延迟加载模块的工厂。我已经能够重现你的问题。在这里检查所以您可以执行以下操作之一添加SendMessageComponent到提供entryComponents的模块中matDialog。以某种方式在您的延迟加载模块中提供一个matDialog。我假设您通过简单地导入来实现这一点MatDialogModule在EMoneyDepositModule 上面的示例中，只需取消MatDialogModule注释lazy.module

Answer 2

我在 Angular 12.1 版本中遇到了同样的问题，“没有找到组件工厂”。我原以为 IVY 是随 Angular 12.1 自动安装的，但事实并非如此。解决方案，我更新了我的编译器以使用 IVY，并且一切都按预期工作。有关如何升入IVY 的详细信息，请参阅此网站

Answer 3

我看到可能的原因：新组件正如 @Random 在评论中提到的那样，新添加的组件可能无法被正确使用ng serve。另一个 SendMessageComponentSendMessageComponent您可能在 ts-import 语句中引用了另一个。循环引用延迟加载的模块很容易出现这种行为。请检查您的SendMessageComponent和其他相关组件。SendMessageComponent绝对不应从同一模块导入任何其他元素。请将可能的发现更改为相对导入。