webentwicklung-frage-antwort-db.com.de

Winkel 4: Es wurde keine Komponentenfabrik gefunden. Haben Sie sie zu @ NgModule.entryComponents hinzugefügt?

Ich verwende Angular 4 template mit webpack Und ich habe diesen Fehler, wenn ich versuche, eine Komponente (ConfirmComponent) zu verwenden:

Keine Komponentenfabrik für ConfirmComponent gefunden. Haben Sie es zu .__ hinzugefügt. @ NgModule.entryComponents?

komponente wird in app.module.server.ts deklariert

NgModule({
    bootstrap: [ AppComponent ],
    imports: [
     ...
    ]
    ,
    entryComponents: [
        ConfirmComponent,
    ],
})
export class AppModule {
}

Ich habe auch app.module.browser.ts und app.module.shared.ts

wie kann ich das beheben?

83
mrapi

fügen Sie dies in Ihrem module.ts hinzu, 

 declarations: [
     AppComponent ,
     ConfirmComponent
  ]

wenn sich ConfirmComponent in einem anderen Modul befindet, müssen Sie es dort exportieren, damit Sie es außerhalb verwenden können. 

  exports: [ ConfirmComponent ]
94
Fateh Mohamed

Siehe Details zu entryComponent :

Wenn Sie eine Komponente dynamisch laden, müssen wir sowohl Deklarationen als auch entryComponent einfügen:

@NgModule({
  imports: [...],
  exports: [...],
  entryComponents: [ConfirmComponent,..],
  declarations: [ConfirmComponent,...],
  providers: [...]
42
Ali Adravi

TL; DR: Ein Dienst in ng6 mit providedIn: "root" kann die ComponentFactory nicht finden, wenn die Component nicht in entryComponents von app.module hinzugefügt wird.

Dieses Problem kann auch auftreten, wenn Sie den Winkel 6 in Kombination mit dem dynamischen Erstellen einer Komponente in einem Service verwenden!

zum Beispiel das Erstellen einer Überlagerung:

@Injectable({
  providedIn: "root"
})
export class OverlayService {

  constructor(private _overlay: Overlay) {}

  openOverlay() {
    const overlayRef = this._createOverlay();
    const portal = new ComponentPortal(OverlayExampleComponent);

    overlayRef.attach(portal).instance;
  }
}

Das Problem ist das 

providedIn: "root"

definition, die diesen Dienst in app.module bereitstellt

Wenn sich Ihr Dienst beispielsweise im "OverlayModule" befindet, in dem Sie auch OverlayExampleComponent deklariert und den entryComponents hinzugefügt haben, kann der Dienst die ComponentFactory für OverlayExampleComponent nicht finden.

21
FaustmannChr

Ich hatte das gleiche Problem. In diesem Fall ist imports [...] von entscheidender Bedeutung, da es nicht funktioniert, wenn Sie NgbModalModule nicht importieren.

Die Fehlerbeschreibung besagt, dass Komponenten zum entryComponents-Array hinzugefügt werden sollten. Dies ist offensichtlich, aber stellen Sie sicher, dass Sie diese Komponente an erster Stelle hinzugefügt haben: 

imports: [
    ...
    NgbModalModule,
    ...
  ],
14
Alex Link

Fügen Sie diese Komponente zu entryComponents in @NgModule des Moduls Ihrer App hinzu:

entryComponents:[ConfirmComponent],

sowie Deklarationen:

declarations: [
    AppComponent,
    ConfirmComponent
]
11
RohitAneja

Ich habe das gleiche Problem mit Winkel 6, Das hat bei mir funktioniert:

@NgModule({
...
entryComponents: [ConfirmComponent],
providers:[ConfirmService]

})

Wenn Sie einen Dienst wie ConfirmService haben, müssen Sie in Anbietern des aktuellen Moduls anstelle von root deklarieren.

7
Omar AMEZOUG

Fügen Sie "NgbModalModule" in Importe und Ihren Komponentennamen in entryComponents App.module.ts hinzu (siehe unten) enter image description here

5
MayankGaur

Platzieren Sie dynamisch erstellte Komponenten in entryComponents Unter der Funktion @NgModuledecorator.

@NgModule({
    imports: [
        FormsModule,
        CommonModule,
        DashbaordRoutingModule
    ],
    declarations: [
        MainComponent,
        TestDialog
    ],
    entryComponents: [
        TestDialog
    ]
})
5
mehdi

wenn Sie in Ihrer Anwendung Routing verwenden

vergewissern Sie sich, dass Sie dem Routing-Pfad neue Komponenten hinzufügen

zum Beispiel : 

    const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', component: HomeComponent },
  { path: 'fundList',      component: FundListComponent },
];
2
Mohamathu Rafi

Ich hatte das gleiche Problem für Bootstrap Modal

import {NgbModal} aus '@ ng-bootstrap/ng-bootstrap';

Wenn dies der Fall ist, fügen Sie die Komponente einfach zu den Moduldeklarationen und entryComponents hinzu, wie andere Antworten vorschlagen, aber fügen Sie diese auch Ihrem Modul hinzu

{NgbModule} von '@ ng-bootstrap/ng-bootstrap' importieren;

imports: [
   NgbModule.forRoot(),
   ...
]
2
Felipe Bejarano

Dieser Fehler tritt auf, wenn Sie versuchen, eine Komponente dynamisch zu laden, und:

  1. Die Komponente, die Sie laden möchten, ist kein Routing-Modul
  2. Die Komponente ist in Moduleintragskomponenten nicht vorhanden.

in routingModule

const routes: Routes = [{ path: 'confirm-component', component: ConfirmComponent,data: {}}]

oder im Modul

entryComponents: [
ConfirmComponent
} 

Um diesen Fehler zu beheben, können Sie der Komponente einen Router oder einen Eintrag zu entryComponents of module hinzufügen.

  1. Fügen Sie der Komponente.drawback dieses Ansatzes einen Router hinzu.
  2. Fügen Sie es zu entryComponents hinzu. In diesem Fall wird an Ihre Komponente keine URL angehängt und kann mit URL nicht darauf zugegriffen werden.
1
Muhammad Nasir

Zur Verdeutlichung hier. Wenn Sie ComponentFactoryResolver nicht direkt in der Komponente verwenden und es als Service abstrahieren möchten, das dann in die Komponente eingefügt wird, müssen Sie es unter den Providern für dieses Modul laden, da es bei verzögertem Laden nicht funktioniert .

1
sensei

Ich hatte das gleiche Problem mit ag-grid mit dynamischen Komponenten. Ich habe festgestellt, dass Sie die dynamische Komponente zum ag-grid-Modul hinzufügen müssen .withComponents []

einfuhren: [ StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ]

0
Eric Hewett

Mein Fehler war der Aufruf der offenen NgbModal-Methode mit falschen Parametern aus .html

0
JanBrus

In meinem Fall brauchte ich entryComponents überhaupt nicht - nur die Grundeinstellungen, wie im Link unten beschrieben, aber ich musste den Import sowohl in das Haupt-App-Modul als auch in das einschließende Modul aufnehmen.

imports: [
    NgbModule.forRoot(),
    ...
]

https://medium.com/@sunilk/getting-started-angular-6-and-ng-bootstrap-4-4b314e015c1c

Sie müssen es nur zu entryComponents hinzufügen, wenn eine Komponente in das Modal aufgenommen wird. Aus den Dokumenten:

Sie können eine vorhandene Komponente als Inhalt des modalen Fensters übergeben. Im In diesem Fall müssen Sie die Inhaltskomponente als entryComponents .__ hinzufügen. Abschnitt Ihres NgModule.

0
Dovev Hefetz

Ich hatte das gleiche Problem in Angular7, als ich dynamische Komponenten erstellte. Es gibt zwei Komponenten (TreatListComponent, MyTreatComponent), die dynamisch geladen werden müssen. Ich habe gerade das Feld entryComponents zu meiner Datei app.module.ts hinzugefügt. 

entryComponents: [
TreatListComponent,
MyTreatComponent

]

0

Falls Sie nach der Bereitstellung der Komponentendialogklasse in entryComponents immer noch den Fehler haben, versuchen Sie, ng serve neu zu starten - es hat bei mir funktioniert.

0
mgierw