Angular Dialog: No component factory found for DialogModule.
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.
If the module in which you are using the component is a lazy loaded module, then you need to import the MatDialogModule within the same module, else you will get the same error even if you add your component to entryComponents or maybe you can created a shared module for material components and import the shared module in all other required modules.
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.ts so I just need to add them and it works
//This is important
entryComponents: [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
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