El diálogo de material Angular2 tiene problemas. ¿Lo agregó a @ NgModule.entryComponents?

Estoy tratando de seguir los documentos en https://material.angular.io/components/component/dialog pero no puedo entender por qué tiene el siguiente problema.

Agregué lo siguiente en mi componente:

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

En mi módulo agregué

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

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

// ...

Sin embargo, recibo este error ...

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

Debe agregar componentes creados dinámicamente entryComponentsdentro de su@NgModule

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

Nota: en algunos casos entryComponentsbajo módulos con carga lenta no va a funcionar, como una solución ponerlos en su app.module(raíz)

Necesitas usar entryComponentsdebajo@NgModule .

Esto es para componentes agregados dinámicamente que se agregan usando ViewContainerRef.createComponent() . Agregarlos a entryComponents le dice al compilador de plantillas fuera de línea que los compile y cree fábricas para ellos.

Los componentes registrados en las configuraciones de ruta también se agregan automáticamente entryComponentsporque router-outlettambiénViewContainerRef.createComponent() para agregar componentes enrutados al DOM.

Entonces tu código será como

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

Esto está sucediendo porque este es un componente dinámico y no lo agregó entryComponentsdebajo @NgModule.

Simplemente agréguelo allí:

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

Mira cómo habla el equipo de AngularentryComponents :

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

Especifica una lista de componentes que deben compilarse cuando se define este módulo. Para cada componente enumerado aquí, Angular creará un ComponentFactory y lo almacenará en ComponentFactoryResolver.

Además, esta es la lista de los métodos para @NgModuleincluir entryComponents...

Como puede ver, todos ellos son opcionales (mire los signos de interrogación), incluidos los entryComponentsque aceptan una variedad de componentes:

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

Si está intentando usar MatDialogdentro de un servicio, llamemos 'PopupService'y ese servicio se define en un módulo con:

@Injectable({ providedIn: 'root' })

entonces puede que no funcione. Estoy usando carga diferida, pero no estoy seguro de si eso es relevante o no.

Tienes que:

• Proporcione su PopupServicedirectamente al componente que abre su diálogo - usando [ provide: PopupService ]. Esto le permite usar (con DI) la MatDialoginstancia en el componente. Creo que el componente llamaopen debe estar en el mismo módulo que el componente de diálogo en esta instancia.
• Mueva el componente de diálogo hacia su app.module (como han dicho algunas otras respuestas)
• Pase una referencia para matDialogcuando llame a su servicio.

Disculpe mi respuesta confusa, el punto es que es lo providedIn: 'root'que está rompiendo las cosas porque MatDialog necesita recuperar un componente.

En caso de carga diferida, solo necesita importar MatDialogModule en el módulo cargado diferido . Entonces, este módulo podrá representar el componente de entrada con su propio MatDialogModule importado :

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

Si bien es posible integrar el diálogo de material , descubrí que la complejidad de una característica tan trivial es bastante alta. El código se vuelve más complejo si está tratando de lograr características no triviales.

Por esa razón, terminé usando PrimeNG Dialog , que encontré bastante fácil de usar:

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

Simplemente agregue su cuadro de diálogo en el html de su componente:

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

La documentación de PrimeNG PrimeFaces es fácil de seguir y muy precisa.

Debe agregarlo entryComponents, como se especifica en los documentos .

@NgModule({
  imports: [
    // ...
  ],
  entryComponents: [
    DialogInvokingComponent, 
    DialogResultExampleDialog
  ],
  declarations: [
    DialogInvokingComponent,   
    DialogResultExampleDialog
  ],
  // ...
})

Aquí hay un ejemplo completo de un archivo de módulo de aplicación con un cuadro de diálogo definido como entryComponents.

Si eres como yo y estás mirando este hilo pensando "Pero no estoy tratando de agregar un componente, estoy tratando de agregar un protector / servicio / tubería, etc." entonces es probable que haya agregado el tipo incorrecto a una ruta de enrutamiento. Eso es lo que hice. Accidentalmente agregué un protector al componente: sección de una ruta en lugar de canActivate: sección. Me encanta el autocompletado IDE, pero tienes que reducir la velocidad un poco y prestar atención. Si no puede encontrarlo, realice una búsqueda global del nombre del que se queja y observe cada uso para asegurarse de que no se equivocó con un nombre.

En mi caso, agregué mi componente a declaraciones y entryComponents y obtuve los mismos errores. También necesitaba agregar MatDialogModule a las importaciones.

Si alguien necesita llamar a Dialog desde los servicios, aquí está cómo resolver el problema. Estoy de acuerdo con algunas de las respuestas anteriores, mi respuesta es para llamar al diálogo en los servicios si alguien puede tener problemas.

Cree un servicio, por ejemplo, DialogService, luego mueva su función de diálogo dentro de los servicios y agregue su servicio de diálogo en el componente que llame como el siguiente código:

 @Component({
  selector: "app-newsfeed",
  templateUrl: "./abc.component.html",
  styleUrls: ["./abc.component.css",],
  providers:[DialogService]
})

de lo contrario obtienes un error