Angular对话框：找不到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 {
  ...
}

其他组件

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正确的模块中

javascript

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

```

2. entryComponents从中删除AppModule

Answer 2

我正在使用这个主题，模态对话框在屏幕左侧打开，并且像这样完全不可见

并抛出错误

错误 错误：找不到 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);

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