Reputation:
Trying to make a dialog using feature model in angular 6. But I'm getting this error:
No component factory found for DialogModule. Did you add it to @NgModule.entryComponents?
Everyone keeps saying to use
entryComponents: [DialogComponent]
which I am already doing. Also tried to use that in the feature module without success. Here are I think the necessary and simplified files:
app.module.ts
import { DialogModule } from './components/dialog/dialog.module';
import { DialogComponent } from './components/dialog/dialog.component';
...
// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [..., AppComponent],
imports: [DialogModule],
entryComponents: [DialogComponent],
providers: [..., MatDialogModule],
bootstrap: [AppComponent]
})
export class AppModule {}
dialog.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DialogComponent } from './dialog.component';
...
@NgModule({
imports: [
CommonModule
],
declarations: [..., DialogComponent],
exports: [DialogComponent]
})
export class DialogModule {
...
}
some-other.component.ts
import { DialogModule } from '../../components/dialog/dialog.module';
...
@Component({
...
})
export class LanguageButtonComponent implements OnInit {
constructor(private languageService : LanguageService,
private dialog: MatDialog,) {
}
// activated from button
openDialog() {
this.dialog.open(DialogModule);
}
}
How to get rid of the error?
Upvotes: 23
Views: 19184
Reputation:
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.
Upvotes: 3
Reputation: 5545
You have to put your DialogComponent
in entryComponents
of DialogModule
and not in AppModule
:
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 {
...
}
entryComponents
from AppModule
Upvotes: 25
Reputation: 5291
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
Upvotes: 10
Reputation: 1033
in my case i forgot to add it to the routing module.
const routes: Routes = [
{path: '', component: MyDiaglogComponent},
Upvotes: 0
Reputation: 3858
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.
Upvotes: 2