Angular Dialog: No component factory found for DialogModule.

You have to put your DialogComponent in entryComponents of DialogModule and not in AppModule:

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

2. Remove entryComponents from AppModule

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.