Angular2 material dialog has issues - Did you add it to @NgModule.entryComponents?
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
})