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

Question

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

Aucune usine de composants n'a été 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 y app.module.shared.ts

Comment puis-je réparer ça ?

Answer 1

Ajoutez ceci dans votre module.ts ,

declarations: [
  AppComponent,
  ConfirmComponent
]

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

exports: [ ConfirmComponent ]

---Mettre à jour Angular 9 ou Angular 8 avec Ivy explicitement activé---

Les composants d'entrée avec Ivy ne sont plus nécessaires et sont désormais obsolètes.

---pour Angular 9 et 8 avec Ivy désactivé---

Dans le cas d'un composant chargé dynamiquement et afin qu'un ComponentFactory soit généré, le composant doit également être ajouté aux entryComponents du module :

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

selon la définition de entryComponents

Spécifie une liste de composants qui doivent être compilés lorsque ce module est défini. Pour chaque composant listé ici, Angular créera un ComponentFactory et le stockera dans le ComponentFactoryResolver.

Answer 2

Voir les détails à propos de entryComponent :

Si vous chargez un composant de manière dynamique, vous devez le placer dans les deux éléments suivants declarations y entryComponent :

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

Answer 3

TL;DR : Un service dans ng6 avec providedIn: "root" ne peut pas trouver le ComponentFactory lorsque le composant n'est pas ajouté dans la base de données de l'utilisateur. 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, la création d'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 suivant

providedIn : "Root"

qui fournit ce service en app.module .

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

Answer 4

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

La description de l'erreur indique que les composants doivent être ajoutés à entryComponents et c'est évident, mais assurez-vous que vous l'avez ajouté en premier lieu :

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

Answer 5

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

entryComponents:[ConfirmComponent],

ainsi que les Déclarations :

declarations: [
    AppComponent,
    ConfirmComponent
]