Angular Dialog: No component factory found for DialogModule.
You have to put your DialogComponent
in entryComponents
of DialogModule
and not in AppModule
:
- Place the
entryComponents
in the correct module
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 { ... }
- Remove
entryComponents
fromAppModule
I was using this theme and the modal dialog was opening on the left side of screen and was completely invisible like this
and throwing error
ERROR Error: No component factory found for DialogOverviewExampleDialogComponent. Did you add it to @NgModule.entryComponents?
but was working fine in dialog component which rest inside material root.
and If you checked the material modules you will see we need
DemoMaterialModule
and entry point
entryComponents: [DialogOverviewExampleDialogComponent]
because dialog component need this
So simply the solution is to use this module and entry point inside your component module in my case my component module is page.module.tsso I just need to add them and it works
//This is importantentryComponents: [DialogOverviewExampleDialogComponent],declarations: [MatIconComponent,TimelineComponent,InvoiceComponent,PricingComponent,HelperComponent,SiteSearchComponent,UserAdminComponent,CreateUserComponent,ManageUserComponent ,//This is important DialogOverviewExampleDialogComponent
Result
Also instead of using predefined dialogue you could create your own by just renaming the component inside your component like
@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(); }}
and when open dialog
openDialog(): void { const dialogRef = this.dialog.open(YOURDIALOGCOMPONENTNAMEHERE,{ width: '250px', data: { message: this.statusMessage ,class:this.class,title:this.title} });
Finally add this in your root module component and entry
entryComponents:[YOURDIALOGCOMPONENTNAMEHERE],declarations:[YOURDIALOGCOMPONENTNAMEHERE
Turns out I couldn't read the error message properly. Fix was to change:
this.dialog.open(DialogModule);
to
this.dialog.open(DialogComponent);
Another reminder that if you can't find a solution to simple problem from searching web, it's most likely a typo.