web-dev-qa-db-fra.com

Angular Dialog: Aucune fabrique de composants trouvée pour DialogModule.

Essayer de créer une boîte de dialogue en utilisant le modèle de fonctionnalité dans angular 6. Mais je reçois cette erreur:

Aucune fabrique de composants trouvée pour DialogModule. L'avez-vous ajouté à @ NgModule.entryComponents?

Tout le monde ne cesse de dire d'utiliser

entryComponents: [DialogComponent]

ce que je fais déjà. J'ai également essayé d'utiliser cela dans le module de fonction sans succès. Voici je pense les fichiers nécessaires et simplifiés:

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

Comment se débarrasser de l'erreur?

angulartypescriptdialogcomponents
7
H36615

Il s'est avéré que je n'ai pas pu lire correctement le message d'erreur. Le correctif consistait à changer

this.dialog.open(DialogModule);

à

this.dialog.open(DialogComponent);

Un autre rappel que si vous ne trouvez pas de solution à un problème simple en recherchant sur le Web, c'est très probablement une faute de frappe.

2
H36615

Vous devez mettre votre DialogComponent dans entryComponents de DialogModule et non dans AppModule:

  1. Placez le entryComponents dans le module correct

`` `javascript

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. Supprimer entryComponents de AppModule
7
Bruno João

Supprimer MatDialogModule des fournisseurs

providers: [...],
1
Sajeetharan

J'utilisais le thème this et la boîte de dialogue modale s'ouvrait sur le côté gauche de l'écran et était complètement invisible comme ceci

enter image description here

et erreur de lancement

ERREUR Erreur: aucune fabrique de composants trouvée pour DialogOverviewExampleDialogComponent. L'avez-vous ajouté à @ NgModule.entryComponents?

enter image description here

mais fonctionnait bien dans le composant de dialogue qui se trouve à l'intérieur de la racine du matériau.

enter image description here

et si vous avez vérifié les modules matériels, vous verrez que nous avons besoin

DemoMaterialModule

et point d'entrée

entryComponents: [DialogOverviewExampleDialogComponent]

parce que le composant de dialogue en a besoin

enter image description here

Donc, simplement la solution consiste à utiliser ce module et le point d'entrée à l'intérieur de votre module de composant dans mon cas, mon module de composant est page.module.ts donc j'ai juste besoin pour les ajouter et ça marche

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

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

Résultat

enter image description here

De plus, au lieu d'utiliser un dialogue prédéfini, vous pouvez créer le vôtre en renommant simplement le composant à l'intérieur de votre composant comme

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

}

et lorsque la boîte de dialogue est ouverte

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

    });

Enfin, ajoutez ceci dans votre composant et entrée de module racine

entryComponents:[YOURDIALOGCOMPONENTNAMEHERE],
declarations:[YOURDIALOGCOMPONENTNAMEHERE
1
TAHA SULTAN TEMURI

Si le module dans lequel vous utilisez le composant est un module chargé paresseux, vous devez alors importer le MatDialogModule dans le même module , sinon vous obtiendrez la même erreur même si vous ajoutez votre composant à entryComponents ou peut-être pouvez-vous créer un module partagé pour les composants matériels et importer le module partagé dans tous les autres modules requis.

0
Franklin Pious