Okno dialogowe materiałów Angular2 ma problemy - Czy dodałeś je do @ NgModule.entryComponents?

Question

Próbuję postępować zgodnie z dokumentami na https://material.angular.io/components/component/dialog, ale nie mogę zrozumieć, dlaczego ma on poniższy problem?

dodałem niżej na mojej części:

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

W moim module I dodaje

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

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

jednak uzyskać ten błąd ....

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

Musisz dodaj dynamicznie utworzone komponenty do entryComponents wewnątrz swojego @NgModule

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

Uwaga: W niektórych przypadkach entryComponents pod leniwych załadowane moduły nie będzie działać, jako obejście umieścić je w swojej app.module (root)

Answer 2

Trzeba użyć entryComponents pod @NgModule.

Dotyczy to dynamicznie dodawanych składników, które są dodawane za pomocą ViewContainerRef.createComponent(). Dodanie ich do entryComponents mówi kompilatorowi szablonów offline, aby je skompilował i utworzył dla nich fabryki.

Składniki zarejestrowane w konfiguracjach tras są dodawane automatycznie również do entryComponents, ponieważ router-outlet używa również ViewContainerRef.createComponent() do dodania trasowanych komponentów do DOM.

Tak Twój kod będzie jak

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

Answer 3

Dzieje się tak dlatego, że jest to dynamiczny komponent a nie dodać go do entryComponents pod @NgModule.

Wystarczy dodać go tam:

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

przyjrzeć się, jak mówić o kątowe zespół entryComponents w komentarzu:

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

Specifies a list of components that should be compiled when this module is defined. For each component listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.

Również ta lista sposobów na @NgModule tym entryComponents ...

Jak widać, wszystkie są opcjonalne (patrz znaki zapytania), w tym entryComponents, które akceptują szereg elementów:

@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

Niedawno doświadczył tego na Kątowymi 5.2x ...

Inną rzeczą, aby obserwować poza zwykły podejrzany dodawania komponentu do entryComponents jest, aby upewnić się nie ładują element przez beczkę.

Przy okazji, dodanie do głównego pliku app.module wydaje się niepotrzebne ... Mogę ładować komponenty zadeklarowane jako entryComponents z modułu funkcji.