Reputation:

Angular Dialog: No component factory found for DialogModule.

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

Answers (6)

user9262126

Reputation:

Turns out I couldn't read the error message properly. Fix was to change:

this.dialog.open(DialogModule);

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

Bruno João

Reputation: 5545

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

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

Remove entryComponents from AppModule

Upvotes: 25

TAHA SULTAN TEMURI

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

meol

Reputation: 1033

in my case i forgot to add it to the routing module.

const routes: Routes = [ {path: '', component: MyDiaglogComponent},

Upvotes: 0

Franklin Pious

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

Sajeetharan

Reputation: 222657

Remove MatDialogModule from providers

providers: [...],

Upvotes: 0

Angular Dialog: No component factory found for DialogModule.

Answers (6)

Related Questions