web-dev-qa-db-fra.com

Angular 4: aucune usine de composants n'a été trouvée, l'avez-vous ajouté à @ NgModule.entryComponents?

J'utilise le modèle angulaire 4 avec webpack .__ et j'ai cette erreur lorsque j'essaie d'utiliser un composant (ConfirmComponent):

Aucune fabrique de composants trouvée pour ConfirmComponent. L'avez-vous ajouté à @ NgModule.entryComponents?

le composant est déclaré dans app.module.server.ts

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

J'ai aussi app.module.browser.ts et app.module.shared.ts

comment résoudre ce problème ... Merci

angularangular-webpack-starter
83
mrapi

ajoutez ceci dans votre module.ts, 

 declarations: [
     AppComponent ,
     ConfirmComponent
  ]

si ConfirmComponent est dans un autre module, vous devez l'exporter ici pour pouvoir l'utiliser en dehors, ajoutez: 

  exports: [ ConfirmComponent ]
94
Fateh Mohamed

Voir le détail sur entryComponent :

Si vous chargez un composant de manière dynamique, nous devons insérer à la fois les déclarations et entryComponent:

@NgModule({
  imports: [...],
  exports: [...],
  entryComponents: [ConfirmComponent,..],
  declarations: [ConfirmComponent,...],
  providers: [...]
42
Ali Adravi

TL; DR: un service dans ng6 avec FourniIn: "racine" ne peut pas trouver le ComponentFactory lorsque le composant n'est pas ajouté dans le module entryComponents de app.module.

Ce problème peut également se produire si vous utilisez angular 6 en combinaison avec la création dynamique d'un composant dans un service!

par exemple créer une superposition:

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

  constructor(private _overlay: Overlay) {}

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

    overlayRef.attach(portal).instance;
  }
}

Le problème est le 

fourniDans: "root"

définition, qui fournit ce service dans app.module

Ainsi, si votre service est situé par exemple dans "OverlayModule", où vous avez également déclaré OverlayExampleComponent et l'ajouté à entryComponents, le service ne peut pas trouver ComponentFactory pour OverlayExampleComponent.

21
FaustmannChr

J'ai eu le même problème. Dans ce cas, imports [...] est crucial, car cela ne fonctionnera pas si vous n’importez pas NgbModalModule.

La description de l'erreur indique que les composants doivent être ajoutés au tableau entryComponents et c'est évident, mais assurez-vous d'avoir ajouté celui-ci en premier lieu: 

imports: [
    ...
    NgbModalModule,
    ...
  ],
14
Alex Link

Ajoutez ce composant à entryComponents dans @NgModule du module de votre application:

entryComponents:[ConfirmComponent],

ainsi que les déclarations:

declarations: [
    AppComponent,
    ConfirmComponent
]
11
RohitAneja

J'ai le même problème avec angular 6, C'est ce qui a fonctionné pour moi:

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

})

Si vous avez un service comme ConfirmService , vous devez déclarer les fournisseurs du module actuel au lieu de root

7
Omar AMEZOUG

Ajoutez 'NgbModalModule' dans les importations et le nom de votre composant dans entryComponents App.module.ts comme indiqué ci-dessous  enter image description here

5
MayankGaur

Placez les composants créés dynamiquement dans entryComponents Sous la fonction @NgModuledecorator.

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

si vous utilisez le routage dans votre application

Assurez-vous d’ajouter de nouveaux composants au chemin de routage

par exemple : 

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

J'ai eu le même problème pour bootstrap modal

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

Si tel est votre cas, ajoutez simplement le composant aux déclarations de module et entryComponents comme le suggèrent d'autres réponses, mais ajoutez-le également à votre module

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

imports: [
   NgbModule.forRoot(),
   ...
]
2
Felipe Bejarano

Cette erreur se produit lorsque vous essayez de charger un composant de manière dynamique et que:

  1. Le composant que vous voulez charger n'est pas un module de routage
  2. Le composant est non dans le module entryComponents.

dans routingModule

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

ou en module

entryComponents: [
ConfirmComponent
}

Pour corriger cette erreur, vous pouvez ajouter un routeur au composant ou l'ajouter à entryComponents of module.

  1. Ajoutez un routeur à composant.drawback de cette approche si votre composant Sera accessible avec cette URL.
  2. Ajoutez-le à entryComponents. dans ce cas, aucune URL ne sera attachée à votre composant et il ne sera pas accessible avec url.
1
Muhammad Nasir

Pour clarification ici. Si vous n'utilisez pas ComponentFactoryResolver directement dans le composant et que vous souhaitez l'extraire du service, celui-ci est ensuite injecté dans le composant. .

1
sensei

J'avais le même problème avec ag-grid utilisant des composants dynamiques. J'ai découvert qu'il fallait ajouter le composant dynamique au module ag-grid .withComponents []

importations: [ StratoMaterialModule, BrowserModule, AppRoutingModule, HttpClientModule, NavigateurAnimationsModule, NgbModule.forRoot (), FormsModule, ReactiveFormsModule, AppRoutingModule, AgGridModule.withComponents (ProjectUpdateButtonComponent) ],

0
Eric Hewett

Mon erreur appelait méthode ouverte NgbModal avec des paramètres incorrects de .html

0
JanBrus

Dans mon cas, je n'avais absolument pas besoin de entryComponents - juste de la configuration de base décrite dans le lien ci-dessous, mais je devais inclure l'importation dans le module principal de l'application et dans le module englobant.

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

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

Vous devez uniquement l'ajouter à entryComponents si un composant est inclus dans le modal. De la docs:

Vous pouvez transmettre un composant existant en tant que contenu de la fenêtre modale. Dans dans ce cas, n'oubliez pas d'ajouter le composant de contenu en tant que entryComponents section de votre NgModule.

0
Dovev Hefetz

J'ai eu le même problème dans Angular7 lorsque je crée des composants dynamiques. Deux composants (TreatListComponent, MyTreatComponent) doivent être chargés de manière dynamique. Je viens d'ajouter le tableau entryComponents à mon fichier app.module.ts. 

entryComponents: [
TreatListComponent,
MyTreatComponent

],

0
Chamila Maddumage

Si l'erreur persiste après la fourniture de la classe de dialogue de composant dans entryComponents, essayez de redémarrer ng serve - cela a fonctionné pour moi.

0
mgierw