Angular Dialog：找不到 DialogModule 的组件工厂。

Question

尝试使用角度 6 中的特征模型进行对话。但我收到此错误：

没有找到 DialogModule 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？

每个人都在说要使用

entryComponents：[DialogComponent]

我已经在做。还尝试在功能模块中使用它但没有成功。以下是我认为必要和简化的文件：

app.module.ts

import { DialogModule } from './components/dialog/dialog.module';
import { DialogComponent } from './components/dialog/dialog.component';
...

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [..., AppComponent],
  imports: [DialogModule],
  entryComponents: [DialogComponent],

  providers: [..., MatDialogModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

dialog.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DialogComponent } from './dialog.component';
...

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [..., DialogComponent],
  exports: [DialogComponent]
})
export class DialogModule {
  ...
}

some-other.component.ts

import { DialogModule } from '../../components/dialog/dialog.module';
...

@Component({
    ...
})

export class LanguageButtonComponent implements OnInit {

  constructor(private languageService : LanguageService,
    private dialog: MatDialog,) {
  }

  // activated from button
  openDialog() {
    this.dialog.open(DialogModule);
  }
}

如何摆脱错误？

Answer 1

您必须将您的DialogComponent 放入entryComponents 的DialogModule 而不是AppModule：

1. 将entryComponents 放入正确的模块中

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';

    import { DialogComponent } from './dialog.component';
    ...

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: [DialogComponent],
      exports: [DialogComponent],
      entryComponents: [DialogComponent],
    })
    export class DialogModule {
        ...
    }

1. 从AppModule 中删除entryComponents

Answer 2

我使用的是this 主题，模式对话框在屏幕左侧打开，像这样完全不可见

并抛出错误

ERROR 错误：未找到 DialogOverviewExampleDialogComponent 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？

但在位于材质根中的对话框组件中工作正常。

如果你检查了材料模块，你会看到我们需要

演示材料模块

和入口点

entryComponents：[DialogOverviewExampleDialogComponent]

因为对话框组件需要这个

所以简单的解决方案是在我的组件模块中使用这个模块和入口点，我的组件模块是 page.module.ts 所以我只需要添加它们就可以了

//This is important
entryComponents: [DialogOverviewExampleDialogComponent]
,
declarations: [
MatIconComponent,
TimelineComponent,
InvoiceComponent,
PricingComponent,
HelperComponent,
SiteSearchComponent,

UserAdminComponent,
CreateUserComponent,
ManageUserComponent ,
//This is important   
DialogOverviewExampleDialogComponent

结果

除了使用预定义的对话，您还可以通过重命名组件内的组件来创建自己的对话，例如

 @Component({
selector: 'app-create-dialog-overview-example-dialog',
template: `<h1 mat-dialog-title class='data.class'>{{data.title}}</h1>
<div mat-dialog-content >
<p>{{data.message}}</p>

</div>
<div mat-dialog-actions>
<button mat-button tabindex="2" (click)="onNoClick()">Ok</button>

</div>`
})
export class YOURDIALOGCOMPONENTNAMEHERE {
constructor(
public dialogRef: MatDialogRef<YOURDIALOGCOMPONENTNAMEHERE>,
@Inject(MAT_DIALOG_DATA) public data: any
) {


 }

onNoClick(): void {
this.dialogRef.close();
  }
}

当打开对话框时

openDialog(): void {
    const dialogRef = this.dialog.open(YOURDIALOGCOMPONENTNAMEHERE,{
      width: '250px',
      data: { message: this.statusMessage ,class:this.class,title:this.title}

    });

最后在你的根模块组件和入口中添加这个

entryComponents:[YOURDIALOGCOMPONENTNAMEHERE],
declarations:[YOURDIALOGCOMPONENTNAMEHERE

Answer 3

原来我无法正确阅读错误消息。修复是改变：

this.dialog.open(DialogModule);

到

this.dialog.open(DialogComponent);

另一个提醒，如果您无法通过搜索网络找到简单问题的解决方案，则很可能是拼写错误。

Answer 4

如果你使用组件的模块是延迟加载模块，那么你需要在同一个模块中导入MatDialogModule，否则你会得到即使您将组件添加到 entryComponents 也会出现同样的错误，或者您可以为材料组件创建共享模块并将共享模块导入所有其他必需的模块中。

Answer 5

从提供者中删除 MatDialogModule

providers: [...],

Answer 6

在我的例子中，我忘记将它添加到路由模块中。

const routes: Routes = [ {path: '', component: MyDiaglogComponent},