Angular2 material dialog has issues - Did you add it to @NgModule.entryComponents?

Angular 9.0.0 <

Since 9.0.0 with Ivy, the entryComponents property is no longer necessary. See deprecations guide.

Angular 9.0.0 >

You need to add dynamically created components to entryComponents inside your @NgModule

@NgModule({  declarations: [    AppComponent,    LoginComponent,    DashboardComponent,    HomeComponent,    DialogResultExampleDialog          ],  entryComponents: [DialogResultExampleDialog]

Note: In some cases entryComponents under lazy loaded modules will not work, as a workaround put them in your app.module (root)

You need to use entryComponents under @NgModule.

This is for dynamically added components that are added using ViewContainerRef.createComponent(). Adding them to entryComponents tells the offline template compiler to compile them and create factories for them.

The components registered in route configurations are added automatically to entryComponents as well because router-outlet also uses ViewContainerRef.createComponent() to add routed components to the DOM.

So your code will be like

@NgModule({  declarations: [    AppComponent,    LoginComponent,    DashboardComponent,    HomeComponent,    DialogResultExampleDialog          ],  entryComponents: [DialogResultExampleDialog]

This is happening because this is a dynamic component and you didn't add it to entryComponents under @NgModule.

Simply add it there:

@NgModule({  /* ----------------- */  entryComponents: [ DialogResultExampleDialog ] // <---- Add it here

Look at how the Angular team talks about entryComponents:

entryComponents?: Array<Type<any>|any[]>

Specifies a list of components that should be compiled when this module is defined. For each component listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.

Also, this is the list of the methods on @NgModule including entryComponents...

As you can see, all of them are optional (look at the question marks), including entryComponents which accept an array of components:

@NgModule({   providers?: Provider[]  declarations?: Array<Type<any>|any[]>  imports?: Array<Type<any>|ModuleWithProviders|any[]>  exports?: Array<Type<any>|any[]>  entryComponents?: Array<Type<any>|any[]>  bootstrap?: Array<Type<any>|any[]>  schemas?: Array<SchemaMetadata|any[]>  id?: string})