Угловой 4: фабрика компонентов не найдена, вы добавили ее в @ 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

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

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

declarations: [
  AppComponent,
  ConfirmComponent
]

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

exports: [ ConfirmComponent ]

--- Обновите Angular 9 или Angular 8 с явно включенным Ivy ---

Компоненты входа с Ivy больше не требуются и теперь устарели

--- для угловых 9 и 8 с отключенным плющом ---

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

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 .

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

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

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

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

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

entryComponents:[ConfirmComponent],

а также объявления:

declarations: [
    AppComponent,
    ConfirmComponent
]

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

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

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

У меня такая же проблема с angular 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. Добавьте маршрутизатор к component.drawback этого подхода, если ваш компонент будет доступен с этим 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
  ],

 - 


----------


---------