Кутова 4: фабрика компонентів не знайдена, ви додали її до @ NgModule.entryComponents?

Я використовую шаблон Angular 4 з webpack, і у мене є помилка, коли я намагаюся використовувати компонент (ConfirmComponent):

Не знайдено заводських компонентів для ConfirmComponent. Ви додали його до @ NgModule.entryComponents?

Компонент оголошено в app.module.server.ts

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

У мене також є app.module.browser.tsіapp.module.shared.ts

Як я можу це виправити?

Додайте це до свого module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

якщо ConfirmComponent знаходиться в іншому модулі, вам потрібно експортувати його туди, таким чином ви зможете використовувати його зовні, додайте:

exports: [ ConfirmComponent ]

--- Оновіть кутовий 9 або кутовий 8 за допомогою явно включеного плюща ---

Компоненти для участі у програмі Ivy більше не потрібні, а тепер застарілі

--- для кутових 9 і 8 з обмеженим плющем ---

У випадку динамічно завантаженого компонента і для того, щоб генерувати ComponentFactory, компонент також повинен бути доданий до входу модуляComponents:

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

відповідно до визначення entryComponents

Визначає перелік компонентів, які слід скласти, коли цей модуль визначений. Для кожного перерахованого тут компонента Angular створить ComponentFactory і збереже його у ComponentFactoryResolver.

Дивіться деталі про entryComponent:

Якщо ви динамічно завантажуєте будь-який компонент, його потрібно помістити в обох declarationsі entryComponent:

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

TL; DR: Служба в NG6 з providedIn: "root"не може знайти ComponentFactory , коли компонент не додають в entryComponentsз app.module .

Ця проблема також може виникнути, якщо ви використовуєте кутовий 6 у поєднанні з динамічним створенням компонента в сервісі!

Наприклад, створення накладання:

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

  constructor(private _overlay: Overlay) {}

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

    overlayRef.attach(portal).instance;
  }
}

Проблема - це

за умови: "root"

визначення, яке надає цю послугу в app.module .

Отже, якщо ваша служба розташована, наприклад, у "OverlayModule", де ви також оголосили OverlayExampleComponent і додали його до entryComponents, служба не може знайти ComponentFactory для OverlayExampleComponent.

У мене було те саме питання. У цьому випадку imports [...]вирішальне значення, оскільки воно не спрацює, якщо ви не імпортуєте NgbModalModule.

Опис помилки говорить про те, що компоненти повинні бути додані до entryComponentsмасиву, і це очевидно, але переконайтеся, що ви додали цей в першу чергу:

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

Додайте цей компонент до entryComponents в @NgModule модуля вашого додатка:

entryComponents:[ConfirmComponent],

а також декларації:

declarations: [
    AppComponent,
    ConfirmComponent
]

Додати імпорт "NgbModalModule" та ім'я вашого компонента у entryComponents App.module.ts, як показано нижче

Розмістіть компоненти, що створюються динамічно, для введення компонентів за допомогою функції @NgModuledecorator.

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

У мене така ж проблема з кутовим 6, ось що для мене спрацювало:

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

})

Якщо у вас є така послуга, як ConfirmService , потрібно задекларувати у постачальників поточного модуля замість root

У мене була така ж проблема з модальним завантаженням

імпортувати {NgbModal} з '@ ng-bootstrap / ng-bootstrap';

Якщо це у вашому випадку, просто додайте компонент до декларацій модуля та entryComponents, як підказують інші відповіді, але також додайте цей модуль

імпортувати {NgbModule} з '@ ng-bootstrap / ng-bootstrap';

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

Ця помилка виникає при спробі динамічно завантажити компонент і:

1. Компонент, який потрібно завантажити, не є модулем маршрутизації
2. Компонента немає в модулі entryComponents.

в маршрутизаціїМодуль

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

або в модулі

entryComponents: [
ConfirmComponent
} 

Щоб виправити цю помилку, ви можете додати до компонента маршрутизатор або додати його до entryComponents модуля.

1. Додайте маршрутизатор до компонента.драббек цього підходу - ваш компонент буде доступний за допомогою цього URL-адреси.
2. Додайте його до entryComponents. у цьому випадку до вашого компонента не буде додано ніяких URL-адрес, і він не буде доступний за допомогою URL-адреси.

У мене була така ж проблема в Angular7, коли я створював динамічні компоненти. Є два компоненти (TreatListComponent, MyTreatComponent), які потрібно динамічно завантажувати. Щойно я додав масив entryComponents у свій файл app.module.ts.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

якщо ви використовуєте маршрутизацію у вашій програмі

переконайтесь, що додати нові компоненти в шлях маршрутизації

наприклад :

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

У моєму випадку мені взагалі не потрібна entryComponents - лише основна установка, як описано у посиланні нижче, але мені потрібно було включити імпорт як в основний модуль програми, так і в модуль, що додається.

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

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

Вам потрібно лише додати його до entryComponents, якщо компонент буде включений у модальний режим. З документів:

Ви можете передавати існуючий компонент як вміст модального вікна. У цьому випадку не забудьте додати компонент вмісту як розділ entryComponents вашого NgModule.

Я отримував ту саму проблему з ag-grid за допомогою динамічних компонентів. Я виявив, що вам потрібно додати динамічний компонент до модуля ag-grid .withComponents []

імпорт: [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ],

У моєму випадку я забув додавати MatDialogModuleдо імпорту дочірній модуль.

Для уточнення тут. Якщо ви не використовуєте ComponentFactoryResolverбезпосередньо компонент, і ви хочете абстрагувати його до сервісу, який потім вводиться в компонент, ви повинні завантажити його під провайдерами для цього модуля, оскільки якщо ледачий завантажений, він не працюватиме.

Якщо у вас все-таки виникає помилка після надання діалогового класу компонентів entryComponents, спробуйте перезапустити ng serve- це працювало для мене.

Моя помилка викликала відкритий метод NgbModal з неправильними параметрами з .html

Ви повинні імпортувати NgbModuleв модуль , як це:

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

1. entryComponentsє життєво важливим. Наведені вище відповіді правильні.

Але ...

2. Якщо ви надаєте послугу, яка відкриває модальний (загальний шаблон), а ваш модуль, який визначає діалоговий компонент, не завантажується в AppModule, вам потрібно змінити providedIn: 'root'його providedIn: MyModule. Як загальну практичну практику, ви повинні просто використовувати providedIn: SomeModuleдля всіх діалогових служб, що знаходяться в модулях.

Я використовую Angular8, і я намагаюся динамічно відкривати компонент, щоб сформувати інший модуль. У цьому випадку вам потрібно import the moduleв модуль, який намагається відкрити компонент, звичайно на додаток до export компонента і перелічити його в entryComponentsмасив як це робили попередні відповіді.

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

У моєму випадку я вирішив це питання:
1) розміщення NgxMaterialTimepickerModuleв app module imports:[ ]
2) розміщення NgxMaterialTimepickerModuleв testmodule.ts imports:[ ]
3) розміщення testcomponentв declartions:[ ]іentryComponents:[ ]

(Я використовую кутову версію 8+)

Декларуйте всі нові сторінки в 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
  ],

 - 


----------


---------