Le dialogue sur les matériaux angulaires2 a des problèmes - L’avez-vous ajouté à @ NgModule.entryComponents?

Question

J'essaie de suivre la documentation sur https://material.angular.io/components/component/dialog mais je ne comprends pas pourquoi il pose le problème ci-dessous?

J'ai ajouté le ci-dessous sur mon composant:

 @Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}
 

Dans mon module j'ai ajouté

 import { HomeComponent,DialogResultExampleDialog } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog
  ],
...
 

Pourtant, je reçois cette erreur ....

 EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
ErrorHandler.handleError @ error_handler.js:50
next @ application_ref.js:346
schedulerFn @ async.js:91
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:77
NgZone.triggerError @ ng_zone.js:329
onHandleError @ ng_zone.js:290
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
error_handler.js:52 ORIGINAL EXCEPTION: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
ErrorHandler.handleError @ error_handler.js:52
next @ application_ref.js:346
schedulerFn @ async.js:91
SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
SafeSubscriber.next @ Subscriber.js:172
Subscriber._next @ Subscriber.js:125
Subscriber.next @ Subscriber.js:89
Subject.next @ Subject.js:55
EventEmitter.emit @ async.js:77
NgZone.triggerError @ ng_zone.js:329
onHandleError @ ng_zone.js:290
ZoneDelegate.handleError @ zone.js:246
Zone.runTask @ zone.js:154
ZoneTask.invoke @ zone.js:345
 

Answer 1

Vous devez ajouter des composants créés dynamiquement à entryComponents dans votre @NgModule

 @NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]
 

Remarque: Dans certains cas, entryComponents sous des modules chargés paresseux ne fonctionnera pas, car une solution de contournement les mettra dans votre app.module (racine)

Answer 2

Vous devez utiliser entryComponents sous @NgModule.

C'est pour ajouter dynamiquement des composants qui sont ajoutés à l'aide de ViewContainerRef.createComponent(). Ajoutant à entryComponents indique le mode hors connexion de modèle compilateur pour compiler et créer des usines pour eux.

Les composants enregistrés en route configurations sont ajoutés automatiquement à l' entryComponents car router-outlet utilise également ViewContainerRef.createComponent() ajouter acheminé composants pour les DOM.

Ainsi, votre code sera comme

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

Answer 3

Ce qui se passe parce que c'est un élément dynamique, et vous n'avez pas l'ajouter à l' entryComponents sous @NgModule.

Il suffit de l'ajouter:

@NgModule({
/* ----------------- */
entryComponents: [ DialogResultExampleDialog ] <---- Add it here

Regardez comment Angulaire de l'équipe de parlons entryComponents le commentaire:

entryComponents?: Array<Type<any>|any[]>

Spécifie une liste de les composants qui doivent être compilées lors de ce module est défini. Pour chaque composant répertorié ici, Angulaire permettra de créer un ComponentFactory et stocker dans le ComponentFactoryResolver.

Aussi c'est la liste des méthodes sur @NgModule dont entryComponents...

Comme vous le voyez tous d'entre eux sont en option (voir les points d'interrogation), y compris entryComponents qui acceptent une gamme de composants:

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

Answer 4

Si vous essayez d'utiliser MatDialog à l'intérieur d'un service - appelons - 'PopupService' et que le service est défini dans un module:

@Injectable({ providedIn: 'root' })

ensuite, il peut ne pas fonctionner. Je suis en utilisant le chargement paresseux, mais vous ne savez pas si c'est pertinent ou pas.

Vous devez:

• Fournir votre PopupService directement à l'élément qui ouvre la boîte de dialogue à l'aide de [ provide: PopupService ]. Cela permet de l'utiliser (avec DI) MatDialog exemple dans le composant. Je pense que le composant appelant open doit être dans le même module que la boîte de dialogue composant dans cette instance.
• Déplacer la boîte de dialogue composant de votre application.module (comme certains autres réponses ont dit)
• Passer une référence pour matDialog lorsque vous appelez votre service.

Excuse mon pêle-réponse, le point de l'être, c'est l' providedIn: 'root' que c'est de casser des choses parce que MatDialog doit piggy-back-off d'un composant.

Answer 5

Tout en intégrant le matériel dialogue est possible, j'ai trouvé que la complexité pour un tel trivial fonctionnalité est assez élevé. Le code devient plus complexe si vous essayez d'obtenir un non négligeable de fonctionnalités.

Pour cette raison, j'ai fini par utiliser PrimeNG Dialogue, que j'ai trouvé assez simple à utiliser:

m-dialog.component.html:

<p-dialog header="Title">
    Content
</p-dialog>

m-dialog.component.ts:

@Component({
    selector: 'm-dialog',
    templateUrl: 'm-dialog.component.html',
    styleUrls: ['./m-dialog.component.css']
})
export class MDialogComponent {
    //dialog logic here
}

m-dialog.module.ts:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DialogModule } from "primeng/primeng";
import { FormsModule } from "@angular/forms";


@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        DialogModule
    ], exports: [
        MDialogComponent,
    ], declarations: [
        MDialogComponent
    ]
})
export class MDialogModule {}

Il suffit d'ajouter votre boîte de dialogue dans votre composant html:

<m-dialog [isVisible]="true"> </m-dialog>

PrimeNG PrimeFaces documentation est facile à suivre et très précis.