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?
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 ]
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: [...]
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.
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,
...
],
Fügen Sie diese Komponente zu entryComponents in @NgModule des Moduls Ihrer App hinzu:
entryComponents:[ConfirmComponent],
sowie Deklarationen:
declarations: [
AppComponent,
ConfirmComponent
]
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.
Platzieren Sie dynamisch erstellte Komponenten in entryComponents Unter der Funktion @NgModuledecorator.
@NgModule({
imports: [
FormsModule,
CommonModule,
DashbaordRoutingModule
],
declarations: [
MainComponent,
TestDialog
],
entryComponents: [
TestDialog
]
})
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 },
];
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(),
...
]
Dieser Fehler tritt auf, wenn Sie versuchen, eine Komponente dynamisch zu laden, und:
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.
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 .
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) ]
Mein Fehler war der Aufruf der offenen NgbModal-Methode mit falschen Parametern aus .html
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.
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
]
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.