Angular 4: nenhuma fábrica de componentes encontrada, você a adicionou a @ NgModule.entryComponents?

Estou usando o modelo Angular 4 com webpack e tenho esse erro ao tentar usar um componente (ConfirmComponent):

Nenhuma fábrica de componentes encontrada para ConfirmComponent. Você o adicionou a @ NgModule.entryComponents?

O componente é declarado em app.module.server.ts

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

Eu também tenho app.module.browser.tseapp.module.shared.ts

Como posso consertar isso?

Adicione isso no seu module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

se ConfirmComponent estiver em outro módulo, você precisará exportá-lo para lá, para usá-lo fora, adicione:

exports: [ ConfirmComponent ]

--- Atualize Angular 9 ou Angular 8 com Ivy explicitamente ativado ---

Os componentes de entrada com Ivy não são mais necessários e agora estão obsoletos

--- para Angular 9 e 8 com Ivy desativada ---

No caso de um componente carregado dinamicamente e para que um ComponentFactory seja gerado, o componente também deve ser adicionado à entrada do móduloComponents:

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

de acordo com a definição de entryComponents

Especifica uma lista de componentes que devem ser compilados quando este módulo é definido. Para cada componente listado aqui, o Angular criará um ComponentFactory e o armazenará no ComponentFactoryResolver.

Veja os detalhes sobre entryComponent:

Se você estiver carregando algum componente dinamicamente, precisará colocá-lo em ambos declarationse entryComponent:

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

TL; DR: Um serviço em NG6 com providedIn: "root"não pode encontrar o ComponentFactory quando o componente não é adicionado na entryComponentsde app.module .

Esse problema também pode ocorrer se você estiver usando o angular 6 em combinação com a criação dinâmica de um componente em um serviço!

Por exemplo, criando uma sobreposição:

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

  constructor(private _overlay: Overlay) {}

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

    overlayRef.attach(portal).instance;
  }
}

O problema é o

fornecidoIn: "root"

definição, que fornece esse serviço no app.module .

Portanto, se seu serviço estiver localizado, por exemplo, no "OverlayModule", onde você também declarou o OverlayExampleComponent e o adicionou ao entryComponents, o serviço não poderá encontrar o ComponentFactory for OverlayExampleComponent.

Eu tive o mesmo problema. Nesse caso, imports [...]é crucial, porque não funcionará se você não importar NgbModalModule.

A descrição do erro diz que os componentes devem ser adicionados à entryComponentsmatriz e isso é óbvio, mas certifique-se de ter adicionado este em primeiro lugar:

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

Adicione esse componente a entryComponents no @NgModule do módulo do seu aplicativo:

entryComponents:[ConfirmComponent],

bem como declarações:

declarations: [
    AppComponent,
    ConfirmComponent
]

Adicione 'NgbModalModule' nas importações e o nome do componente em entryComponents App.module.ts, como mostrado abaixo

Coloque os componentes criados dinamicamente em entryComponents na função @NgModuledecorator.

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

Eu tenho o mesmo problema com o angular 6, foi o que funcionou para mim:

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

})

Se você tiver um serviço como ConfirmService , precisará ser declarado nos provedores do módulo atual em vez de root

Eu tive o mesmo problema para o modal de inicialização

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

Se este for o seu caso, basta adicionar o componente às declarações do módulo e entryComponents, como sugerem outras respostas, mas também ao seu módulo

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

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

Este erro ocorre quando você tenta carregar um componente dinamicamente e:

1. O componente que você deseja carregar não é um módulo de roteamento
2. O componente não está no módulo entryComponents.

em routingModule

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

ou no módulo

entryComponents: [
ConfirmComponent
} 

Para corrigir esse erro, você pode adicionar um roteador ao componente ou ao entryComponents of module.

1. Adicione um roteador ao component.drawback dessa abordagem, pois seu componente estará acessível com esse URL.
2. Adicione-o ao entryComponents. nesse caso, seu componente não terá nenhum URL anexado e não poderá ser acessado com ele.

Eu tive o mesmo problema no Angular7 quando crio componentes dinâmicos. Existem dois componentes (TreatListComponent, MyTreatComponent) que precisam ser carregados dinamicamente. Acabei de adicionar a matriz entryComponents ao meu arquivo app.module.ts.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

se você usar o roteamento em seu aplicativo

certifique-se de adicionar novos componentes ao caminho de roteamento

por exemplo :

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

No meu caso, eu não precisava de entryComponents - apenas a configuração básica, conforme descrito no link abaixo, mas precisava incluir a importação no módulo principal do aplicativo e no módulo anexo.

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

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

Você só precisará adicioná-lo a entryComponents se um componente for incluído no modal. Dos documentos:

Você pode transmitir um componente existente como conteúdo da janela modal. Nesse caso, lembre-se de adicionar o componente de conteúdo como uma seção entryComponents do seu NgModule.

Eu estava recebendo o mesmo problema com o ag-grid usando componentes dinâmicos. Descobri que você precisa adicionar o componente dinâmico ao módulo ag-grid .withComponents []

importações: [StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, BrowserAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ],

No meu caso, esqueci de adicionar MatDialogModuleàs importações em um módulo filho.

Para esclarecimentos aqui. Caso você não esteja usando ComponentFactoryResolverdiretamente no componente e queira abstraí-lo para o serviço, o qual é injetado no componente, você deve carregá-lo nos provedores desse módulo, pois se o carregamento lento não funcionar, ele não funcionará.

Caso você ainda tenha o erro após fornecer a classe de diálogo do componente entryComponents, tente reiniciar ng serve- funcionou para mim.

Meu erro foi chamar o método aberto NgbModal com parâmetros incorretos de .html

Você deve importar o NgbModuleno módulo assim:

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

1. entryComponentsé vital. As respostas acima estão corretas.

Mas...

2. Se você estiver fornecendo um serviço que abre o modal (um padrão comum) e seu módulo que define o componente de diálogo não estiver carregado no AppModule, será necessário mudar providedIn: 'root'para providedIn: MyModule. Como boa prática geral, você deve apenas usar o providedIn: SomeModulepara todos os serviços de diálogo que estão nos módulos.

Estou usando o Angular8 e estou tentando abrir o componente dinamicamente, formando outro módulo . Nesse caso, você precisa import the moduleentrar no módulo que está tentando abrir o componente, é claro, além export do componente, e listá-lo na entryComponentsmatriz como as respostas anteriores fizeram.

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

No meu caso eu resolvi esse problema:
1) colocar NgxMaterialTimepickerModuleem app module imports:[ ]
2) colocando NgxMaterialTimepickerModuleem testmodule.ts imports:[ ]
3) colocar testcomponentem declartions:[ ]eentryComponents:[ ]

(Estou usando a versão angular 8+)

Declarar todas as novas páginas no 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
  ],

 - 


----------


---------