Angular 4: nie znaleziono fabryki komponentów, czy dodałeś ją do @ NgModule.entryComponents?

Używam szablonu Angular 4 z pakietem webpack i mam ten błąd, gdy próbuję użyć komponentu (ConfirmComponent):

Nie znaleziono fabryki komponentów dla ConfirmComponent. Czy dodałeś go do @ NgModule.entryComponents?

Komponent jest zadeklarowany w app.module.server.ts

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

Mam również app.module.browser.tsiapp.module.shared.ts

Jak mogę to naprawić?

Dodaj to do swojego module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

jeśli ConfirmComponent znajduje się w innym module, musisz go tam wyeksportować, abyś mógł go używać na zewnątrz, dodaj:

exports: [ ConfirmComponent ]

--- Zaktualizuj Angular 9 lub Angular 8 z jawnie włączonym Ivy ---

Wejściowe elementy z bluszczem nie są już wymagane, a teraz są przestarzałe

--- dla Angulara 9 i 8 z wyłączonym Ivy ---

W przypadku dynamicznie ładowanego komponentu oraz w celu wygenerowania ComponentFactory komponent należy również dodać do wpisu modułu:

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

zgodnie z definicją entryComponents

Określa listę komponentów, które powinny zostać skompilowane, gdy ten moduł jest zdefiniowany. Dla każdego wymienionego tutaj składnika Angular utworzy ComponentFactory i zapisze go w ComponentFactoryResolver.

Zobacz szczegóły na temat entryComponent:

Jeśli ładujesz dowolny składnik dynamicznie następnie trzeba umieścić go w oba declarationsi entryComponent:

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

TL; DR: Usługa w NG6 ze providedIn: "root"nie można znaleźć ComponentFactory gdy składnik nie dodaje się w entryComponentsod app.module .

Ten problem może również wystąpić, jeśli używasz kątowej 6 w połączeniu z dynamicznym tworzeniem komponentu w usłudze!

Na przykład, tworzenie nakładki:

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

  constructor(private _overlay: Overlay) {}

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

    overlayRef.attach(portal).instance;
  }
}

Problemem jest

providedIn: „root”

definicja, która udostępnia tę usługę w app.module .

Jeśli więc Twoja usługa znajduje się na przykład w „OverlayModule”, w którym również zadeklarowałeś OverlayExampleComponent i dodałeś go do entryComponents, usługa nie może znaleźć ComponentFactory dla OverlayExampleComponent.

Miałem ten sam problem. W tym przypadku imports [...]jest to kluczowe, ponieważ nie będzie działać, jeśli nie zaimportujesz NgbModalModule.

Opis błędu mówi, że komponenty należy dodać do entryComponentstablicy i jest to oczywiste, ale upewnij się, że dodałeś ten w pierwszej kolejności:

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

Dodaj ten składnik do entryComponents w @NgModule modułu aplikacji:

entryComponents:[ConfirmComponent],

a także deklaracje:

declarations: [
    AppComponent,
    ConfirmComponent
]

Dodaj „NgbModalModule” w importach i nazwę swojego komponentu w entryComponents App.module.ts, jak pokazano poniżej

Umieszczaj komponenty tworzone dynamicznie w entryComponents w funkcji @NgModuledecorator.

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

Mam ten sam problem z kanciastym 6, to właśnie działało dla mnie:

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

})

Jeśli masz usługę taką jak ConfirmService , musisz ją zadeklarować u dostawców bieżącego modułu zamiast root

Miałem ten sam problem z modalem bootstrap

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

W takim przypadku wystarczy dodać komponent do deklaracji modułu i entryComponents, jak sugerują inne odpowiedzi, ale także dodać to do modułu

import {NgbModule} z '@ ng-bootstrap / ng-bootstrap';

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

Ten błąd występuje, gdy próbujesz załadować komponent dynamicznie i:

1. Komponent, który chcesz załadować, nie jest routingiem
2. Składnika nie ma we wpisie modułu Składniki.

w routingModule

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

lub w module

entryComponents: [
ConfirmComponent
} 

Aby naprawić ten błąd, możesz dodać router do komponentu lub dodać go do entryComponents modułu.

1. Dodaj router do komponentu. Wycofanie tego podejścia oznacza, że ​​komponent będzie dostępny z tym adresem URL.
2. Dodaj go do entryComponents. w takim przypadku do Twojego komponentu nie będzie dołączony żaden adres URL i nie będzie on dostępny z adresem URL.

Miałem ten sam problem w Angular7, kiedy tworzyłem komponenty dynamiczne. Istnieją dwa składniki (TreatListComponent, MyTreatComponent), które należy ładować dynamicznie. Właśnie dodałem tablicę entryComponents do mojego pliku app.module.ts.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

jeśli używasz routingu w swojej aplikacji

upewnij się, Dodaj nowe komponenty do ścieżki routingu

na przykład :

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

W moim przypadku wcale nie potrzebowałem entryComponents - wystarczy podstawowa konfiguracja, jak opisano w linku poniżej, ale musiałem uwzględnić import zarówno w głównym module aplikacji, jak i w module dołączającym.

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

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

Musisz dodać go do entryComponents, jeśli komponent zostanie włączony do modalu. Z dokumentów:

Możesz przekazać istniejący komponent jako zawartość okna modalnego. W takim przypadku pamiętaj o dodaniu komponentu treści jako sekcji entryComponents Twojego modułu NgModule.

Ten sam problem występował w przypadku ag-grid przy użyciu komponentów dynamicznych. Odkryłem, że musisz dodać komponent dynamiczny do modułu ag-grid .withComponents []

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

W moim przypadku zapomniałem dodać MatDialogModuledo importu w module potomnym.

Dla wyjaśnienia tutaj. W przypadku, gdy nie używasz ComponentFactoryResolverbezpośrednio w komponencie i chcesz wyodrębnić go do usługi, która jest następnie wstrzykiwana do komponentu, musisz załadować go do dostawców dla tego modułu, ponieważ jeśli leniwie załadowany, nie będzie działał.

Jeśli po wprowadzeniu klasy okna dialogowego komponentu nadal występuje błąd entryComponents, spróbuj uruchomić ponownie ng serve- zadziałało to dla mnie.

Mój błąd wywołał metodę otwartą NgbModal z niepoprawnymi parametrami z .html

Powinieneś zaimportować NgbModuledo modułu w następujący sposób:

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

1. entryComponentsto istotne. Powyższe odpowiedzi są prawidłowe.

Ale...

2. Jeśli udostępniasz usługę, która otwiera modal (wspólny wzorzec), a moduł definiujący składnik okna dialogowego nie jest ładowany w AppModule, musisz zmienić providedIn: 'root'na providedIn: MyModule. Jako ogólną dobrą praktykę powinieneś po prostu użyć providedIn: SomeModuledla wszystkich usług dialogowych, które są w modułach.

Korzystam z Angular8 i próbuję dynamicznie otwierać komponent z innego modułu. W tym przypadku musisz import the modulewejść do modułu, który próbuje otworzyć komponent, oczywiście oprócz export komponentu i wyświetlić go w entryComponentstablicy tak jak poprzednie odpowiedzi.

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

W moim przypadku rozwiązałem ten problem poprzez:
1) umieszczenie NgxMaterialTimepickerModulew app module imports:[ ]
2) umieszczenie NgxMaterialTimepickerModulew testmodule.ts imports:[ ]
3) umieszczenie testcomponentw declartions:[ ]ientryComponents:[ ]

(Używam wersji kątowej 8+)

Zadeklaruj wszystkie nowe strony w 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
  ],

 - 


----------


---------