typescript - Angular-dialog: Ingen komponentfabrik hittades för DialogModule

Försöker skapa en dialog med hjälp av feature-modell i Angular 6. Men jag får detta fel:

Ingen komponentfabrik hittades för DialogModule. Lade du till den i @NgModule.entryComponents?

Alla fortsätter att säga att man ska använda

entryComponents: [DialogComponent]

vilket jag redan gör. Försökte också använda det i funktionsmodulen utan framgång. Här är, tror jag, de nödvändiga och förenklade filerna:

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.modul.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);
  }
}

Hur blir man av med felet?

Svar #1

Du måste placera din DialogComponent i entryComponents av DialogModule och inte i AppModule:

  1. Placera entryComponents i rätt modul
    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 {
        ...
    }
  1. Ta bort entryComponents från AppModule

Svar #2

Jag använde detta tema och det modala dialogfönstret öppnades på vänster sida av skärmen och var helt osynligt på detta sätt

och kastar fel

FEL Fel: Ingen komponentfabrik hittades för DialogOverviewExampleDialogComponent. Lade du till den i @NgModule.entryComponents?

men fungerade fint i dialogkomponenten som ligger i materialrot.

och om du kollade materialmodulerna kommer du att se att vi behöver

DemoMaterialModul

och ingångspunkt

entryComponents: [DialogOverviewExampleDialogComponent]

eftersom dialogkomponenten behöver detta

Så enkelt är lösningen att använda denna modul och ingångspunkt inuti din komponentmodul. I mitt fall är min komponentmodul page.module.ts, så jag behöver bara lägga till dem och det fungerar.

//This is important
entryComponents: [DialogOverviewExampleDialogComponent]
,
declarations: [
MatIconComponent,
TimelineComponent,
InvoiceComponent,
PricingComponent,
HelperComponent,
SiteSearchComponent,

UserAdminComponent,
CreateUserComponent,
ManageUserComponent ,
//This is important   
DialogOverviewExampleDialogComponent

Resultat

Istället för att använda fördefinierad dialog kan du också skapa din egen genom att bara byta namn på komponenten inuti din komponent som

 @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();
  }
}

och när öppna dialog

openDialog(): void {
    const dialogRef = this.dialog.open(YOURDIALOGCOMPONENTNAMEHERE,{
      width: '250px',
      data: { message: this.statusMessage ,class:this.class,title:this.title}

    });

Slutligen lägg till detta i din rotmodulkomponent och ingång

entryComponents:[YOURDIALOGCOMPONENTNAMEHERE],
declarations:[YOURDIALOGCOMPONENTNAMEHERE

Relaterade artiklar