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:

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