Angular 4: не найден компонент factory, вы добавили его в @NgModule.entryComponents?

Я использую шаблон Angular 4 с веб-пакетом, и у меня появляется эта ошибка, когда я пытаюсь использовать компонент (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

Как я могу это исправить?

Ответы

Ответ 1

Добавьте это в свой module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

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

exports: [ ConfirmComponent ]

В случае динамически загружаемого компонента и для генерирования ComponentFactory этот компонент также должен быть добавлен в модули entryComponents:

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

согласно определению entryComponents

Определяет список компонентов, которые должны быть скомпилированы при определении этого модуля. Для каждого компонента, указанного здесь, Angular создаст ComponentFactory и сохранит его в ComponentFactoryResolver.

Ответ 2

Смотрите подробную информацию о entryComponent:

Если вы загружаете какой-либо компонент динамически, то вам нужно поместить его как в declarations и в entryComponent:

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

Ответ 3

TL; DR: Служба в ng6 с providedIn: "root" In providedIn: "root" не может найти ComponentFactory, когда компонент не добавлен в entryComponents app.module.

Эта проблема также может возникнуть, если вы используете Angular 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;
  }
}

Проблема в том,

обеспечен в: "корень"

определение, которое предоставляет этот сервис в app.module.

Поэтому, если ваша служба находится, например, в "OverlayModule", где вы также объявили OverlayExampleComponent и добавили его в entryComponents, службе не удастся найти ComponentFactory для OverlayExampleComponent.

Ответ 4

Я была такая же проблема. В этом случае imports [...] имеет решающее значение, поскольку он не будет работать, если вы не импортируете NgbModalModule.

В описании ошибки указано, что компоненты должны быть добавлены в массив entryComponents и это очевидно, но убедитесь, что вы добавили это в первую очередь:

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

Ответ 5

Добавьте этот компонент в entryComponents в @NgModule вашего модуля приложения:

entryComponents:[ConfirmComponent],

а также Декларации:

declarations: [
    AppComponent,
    ConfirmComponent
]

Ответ 6

Добавьте "NgbModalModule" в импорт и имя вашего компонента в entryComponents App.module.ts, как показано ниже

Ответ 7

У меня такая же проблема с angular 6, что у меня сработало:

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

})

Если у вас есть сервис, такой как ConfirmService, его нужно объявить в поставщиках текущего модуля вместо root

Ответ 8

Поместите компоненты, которые динамически создаются для entryComponents в функции @NgModuledecorator.

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

Ответ 9

У меня была такая же проблема для bootstrap modal

import {NgbModal} из '@ng-bootstrap/ng-bootstrap';

Если это ваш случай, просто добавьте компонент в объявления модуля и entryComponents, как предлагают другие ответы, но также добавьте это в свой модуль

import {NgbModule} из '@ng-bootstrap/ng-bootstrap';

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

Ответ 10

У меня была такая же проблема в Angular7 при создании динамических компонентов. Существует два компонента (TreatListComponent, MyTreatComponent), которые необходимо загружать динамически. Я просто добавил массив entryComponents в мой файл app.module.ts.

entryComponents: [
TreatListComponent,
MyTreatComponent

Ответ 11

Эта ошибка возникает, когда вы пытаетесь загрузить компонент динамически и:

Компонент, который вы хотите загрузить, не является модулем маршрутизации.
Компонент отсутствует в модуле entryComponents.

в роутингМодуле

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

или в модуле

entryComponents: [
ConfirmComponent
}

Чтобы исправить эту ошибку, вы можете добавить маршрутизатор к компоненту или добавить его в entryComponents модуля.

Добавьте маршрутизатор к component.drawback этого подхода, если ваш компонент будет доступен по этому URL.
Добавьте его в entryComponents. в этом случае к вашему компоненту не будет привязан ни один URL, и он не будет доступен с помощью URL.

Ответ 12

если вы используете маршрутизацию в своем приложении

убедитесь, что добавлены новые компоненты в путь маршрутизации

например:

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

Ответ 13

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

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

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

Вам нужно только добавить его в entryComponents, если компонент будет включен в модальное. Из документов:

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

Ответ 14

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

импортирует: [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot(), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponateBoponent)()

Ответ 15

Для уточнения здесь. В случае, если вы не используете ComponentFactoryResolver непосредственно в компоненте, и вы хотите абстрагировать его в сервис, который затем внедряется в компонент, вы должны загрузить его в соответствии с поставщиками для этого модуля, поскольку при загрузке с отложенной загрузкой он не будет работать.

Ответ 16

Если после предоставления класса диалога компонента в entryComponents все еще возникает ошибка, попробуйте перезапустить ng serve - у меня это сработало.

Ответ 17

Debe agregarse el Componentte a importar en декларации и entryComponents

declarations: [
        AppComponent,
        ChatComponent
    ],
  entryComponents: [
        ChatComponent
    ],

Ответ 18

Моя ошибка была вызвана открытым методом NgbModal с неверными параметрами из .html