Winkel 4: Keine Komponentenfactory gefunden. Haben Sie sie zu @ NgModule.entryComponents hinzugefügt?

Ich verwende die Angular 4-Vorlage mit Webpack und habe diesen Fehler, wenn ich versuche, eine Komponente (ConfirmComponent) zu verwenden:

Für ConfirmComponent wurde keine Komponentenfactory gefunden. Haben Sie es zu @ NgModule.entryComponents hinzugefügt?

Die Komponente ist in deklariert app.module.server.ts

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

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

Wie kann ich das beheben?

Fügen Sie dies in Ihre module.ts,

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. Fügen Sie Folgendes hinzu:

exports: [ ConfirmComponent ]

--- Aktualisiere Angular 9 oder Angular 8 mit explizit aktiviertem Ivy ---

Einstiegskomponenten mit Efeu werden nicht mehr benötigt und sind jetzt veraltet

--- für Winkel 9 und 8 mit deaktiviertem Efeu ---

Bei einer dynamisch geladenen Komponente und damit eine ComponentFactory generiert werden kann, muss die Komponente auch zu den entryComponents des Moduls hinzugefügt werden:

declarations: [
  AppComponent,
  ConfirmComponent
],
entryComponents: [ConfirmComponent],

gemäß der Definition von entryComponents

Gibt eine Liste der Komponenten an, die bei der Definition dieses Moduls kompiliert werden sollen. Für jede hier aufgeführte Komponente erstellt Angular eine ComponentFactory und speichert sie im ComponentFactoryResolver.

Siehe die Details über entryComponent:

Wenn Sie eine Komponente dynamisch laden, müssen Sie sie in beide declarationsund entryComponent:

@NgModule({
  imports: [...],
  exports: [...],
  entryComponents: [ConfirmComponent,..],
  declarations: [ConfirmComponent,...],
  providers: [...]
})

TL; DR: Ein Dienst in NG6 mit providedIn: "root"kann die Component nicht finden , wenn die Komponente nicht in der addierte entryComponentsvon app.module .

Dieses Problem kann auch auftreten, wenn Sie Winkel 6 in Kombination mit der dynamischen Erstellung einer Komponente in einem Dienst verwenden!

Beispiel: 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

vorausgesetztIn: "root"

Definition, die diesen Dienst in app.module bereitstellt .

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

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

Die Fehlerbeschreibung besagt, dass Komponenten zum entryComponentsArray hinzugefügt werden sollten, und es ist offensichtlich, aber stellen Sie sicher, dass Sie diese zuerst hinzugefügt haben:

imports: [
    ...
    NgbModalModule,
    ...
  ],

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

entryComponents:[ConfirmComponent],

sowie Erklärungen:

declarations: [
    AppComponent,
    ConfirmComponent
]

Fügen Sie 'NgbModalModule' in Importen und Ihren Komponentennamen in entryComponents App.module.ts hinzu, wie unten gezeigt

Platzieren Sie Komponenten, die dynamisch erstellt werden, in entryComponents unter der Funktion @NgModuledecorator.

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

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 diesen bei Anbietern des aktuellen Moduls anstelle von root deklarieren

Ich hatte das gleiche Problem für Bootstrap Modal

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

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

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

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

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 befindet sich nicht in Module entryComponents.

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 hinzufügen oder ihn zu entryComponents des Moduls hinzufügen.

1. Fügen Sie der Komponente einen Router hinzu. Der Nachteil dieses Ansatzes ist, dass auf Ihre Komponente mit dieser URL zugegriffen werden kann.
2. Fügen Sie es zu entryComponents hinzu. In diesem Fall ist Ihrer Komponente keine URL zugeordnet und Sie können nicht über die URL darauf zugreifen.

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 Array entryComponents zu meiner Datei app.module.ts hinzugefügt.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

wenn Sie in Ihrer Anwendung Routing verwenden

Stellen Sie sicher, 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 },
];

In meinem Fall brauchte ich überhaupt keine entryComponents - nur die Grundeinstellung, wie im folgenden Link beschrieben, aber ich musste den Import sowohl in das Haupt-App-Modul als auch in das umschließ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 im Modal enthalten sein soll. Aus den Dokumenten:

Sie können eine vorhandene Komponente als Inhalt des modalen Fensters übergeben. Denken Sie in diesem Fall daran, die Inhaltskomponente als entryComponents-Abschnitt Ihres NgModule hinzuzufügen.

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 []

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

In meinem Fall habe ich vergessen MatDialogModule, Importe in einem untergeordneten Modul hinzuzufügen .

Zur Verdeutlichung hier. ComponentFactoryResolverWenn Sie die Komponente nicht direkt verwenden und sie in den Dienst abstrahieren möchten, der dann in die Komponente eingefügt wird, müssen Sie sie unter den Anbietern für dieses Modul laden, da sie bei verzögertem Laden nicht funktioniert.

Falls Sie nach dem Bereitstellen der Komponentendialogklasse immer noch den Fehler haben entryComponents, versuchen Sie einen Neustart ng serve- es hat bei mir funktioniert.

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

Sie sollten das NgbModuleim Modul folgendermaßen importieren :

@NgModule({
  declarations: [
    AboutModalComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgxLoadingModule,
    NgbDatepickerModule,
    NgbModule
  ],
  entryComponents: [AboutModalComponent]
})
 export class HomeModule {}

1. entryComponentses ist lebenswichtig. Die obigen Antworten hierzu sind richtig.

Aber...

2. Wenn Sie einen Dienst sind, nach der das modal (ein gemeinsames Muster) und Ihr Modul, das die Dialogkomponente definiert öffnet nicht in AppModule geladen wird , müssen Sie ändern providedIn: 'root'zu providedIn: MyModule. Als allgemeine bewährte Methode sollten Sie nur die providedIn: SomeModulefür alle Dialogdienste verwenden, die sich in Modulen befinden.

Ich verwende Angular8 und versuche, die Komponente dynamisch aus einem anderen Modul zu öffnen. In diesem Fall müssen Sie import the modulein das Modul, das die Komponente öffnen möchte, natürlich zusätzlich zur export Komponente und sie in das entryComponentsArray eintragen wie die vorherigen Antworten.

imports: [
    ...
    TheModuleThatOwnTheTargetedComponent,
    ...
  ],

In meinem Fall habe ich dieses Problem gelöst durch:
1) Platzieren NgxMaterialTimepickerModulein app module imports:[ ]
2) Platzieren NgxMaterialTimepickerModulein testmodule.ts imports:[ ]
3) Platzieren testcomponentin declartions:[ ]undentryComponents:[ ]

(Ich benutze Angular 8+ Version)

Deklarieren Sie alle neuen Seiten in app.module

@NgModule({
  declarations: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage

    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpClientModule,
    NgxBarcodeModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    RegisterPage,
    OtpPage,
    LoginPage,
    ForgetPasswordPage,ChatlistPage,ChatPage,TabsPage
    // AboutPage,

    // BusinessDetailDescPage,
    // BusinessDescPage
  ],

 - 


----------


---------