未找到 SendMessageComponent 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？答案

【问题标题】：No component factory found for SendMessageComponent. Did you add it to @NgModule.entryComponents?未找到 SendMessageComponent 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？
【发布时间】：2020-09-08 08:44:05
【问题描述】：

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

我写了这段代码：

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、exports 中定义了一个 SendMessageComponent。

    @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 { }

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

【问题讨论】：

EMoneyDepositModule 是延迟加载的模块吗？
尝试重新启动您的服务器 ng serve 或 npm start。 IT 可能会在您创建新文件时发生，Angular 不会将它们添加到当前正在运行的服务器中。
@BunyaminCoskuner 是的，它的延迟加载
您是否可能有另一个 SendMessageComponent，它是在模块中导入的，而不是您需要的？
@kianoushdortaj 是的，但是请检查 ts 文件中的导入语句，它是否引用了正确的 SendMessageComponent？我的意思是像import { SendMessageComponent } from './mypath/send-message.componen't 这样的顶级导入。路径是否正确？

标签： javascript angular typescript angular-material

【解决方案1】：

如果您遇到此问题，我假设您使用 Angular v8 或更低版本。使用 Ivy，您不再需要将动态呈现的组件添加到 entryComponents 中。一种选择是升级您的角度版本。

为什么我们需要在entryComponents中添加一个动态创建的组件？

创建组件时，Angular 需要ComponentFactory 来解析它们。当您在模板中使用组件时，角度会为这些组件创建工厂。但是，动态渲染的组件不会在任何模板中使用。这就是为什么你需要告诉 Angular 通过将它们添加到 entryComponents 来为这些组件创建一个工厂（对于 Ivy-a.k.a Angular v9+，情况不再如此）。让我们看看你的情况。

您有一个延迟加载的模块EMoneyDepositModule，并且您将SendMessageComponent 添加到entryComponents。这样做是在注入树的子部分为SendMessageComponent 创建一个工厂。它仅适用于EMoneyDepositModule 下的用户。此模块之外的任何人都无法注入该工厂。我假设matDialog 是全球提供的，您可以在任何地方访问它。但是，matDialog 无法访问延迟加载模块的工厂。

我已经能够重现您的问题。 Check it here

因此您可以执行以下操作之一

将SendMessageComponent添加到提供matDialog模块的entryComponents中。
不知何故在你延迟加载的模块中提供了一个matDialog。我假设您只需在 EMoneyDepositModule 中导入 MatDialogModule 即可实现此目的在上面的示例中，只需在 lazy.module 中取消注释 MatDialogModule

【讨论】：

我没有在这个模块中创建组件。我将它们复制到其他模块并在EMoneyDepositModule 中声明
您的代码显示SendMessageComponent 已声明并放入EMoneyDepositModule 中的entryComponents。只需尝试在EMoneyDepositModule @kianoushdortaj 中导入MatDialogModule
@kianoushdortaj 我用闪电战更新了答案
我正在使用角度 9 。我尝试了你的解决方案，但它对我不起作用
如果你使用 angular 9 并且可以启用 ivy，那就去做吧。你的问题就会消失。

【解决方案2】：

我看到了可能的原因：

新组件

正如@Random 在 cmets 中提到的，ng serve 可能无法正确使用新添加的组件。

另一个 SendMessageComponent

您可能在 ts-import 语句中引用了另一个 SendMessageComponent。

循环引用

延迟加载的模块容易出现这种行为。请检查您的SendMessageComponent 和其他相关组件。 SendMessageComponent 绝对不应从同一模块导入任何其他元素。请将可能的结果更改为相对导入。

【讨论】：

我创建了一个名为 Message Send 的新组件，但我没有任何该名称的组件。但是还是有这个问题

【解决方案3】：

我在 Angular 12.1 版本中遇到了“未找到组件工厂”的相同问题。我最初认为 IVY 会随 Angular 12.1 自动安装，但事实并非如此。解决方案，我更新了我的编译器以使用 IVY，一切都按预期工作。请参阅此网站以了解有关如何分级到 IVY

的详细信息

【讨论】：