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

J'utilise le modèle Angular 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.tsetapp.module.shared.ts

Comment puis-je résoudre ce problème?

Ajoutez ceci dans votre module.ts,

declarations: [
  AppComponent,
  ConfirmComponent
]

si ConfirmComponent est dans un autre module, vous devez l'exporter ainsi vous pouvez l'utiliser à l'extérieur, ajoutez:

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 pour qu'un ComponentFactory soit généré, le composant doit également être ajouté à l'entrée du moduleComponents:

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 répertorié ici, Angular créera un ComponentFactory et le stockera dans ComponentFactoryResolver.

Voir les détails sur entryComponent:

Si vous chargez un composant dynamiquement, vous devez le mettre à la fois declarationset entryComponent:

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

TL; DR: Un service en NG6 avec providedIn: "root"ne peut pas trouver le ComponentFactory lorsque le composant est pas ajouté dans le entryComponentsde 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

providedIn: "root"

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

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

J'ai eu le même problème. Dans ce cas, imports [...]c'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 entryComponentstableau et c'est évident, mais assurez-vous d'avoir ajouté celui-ci en premier lieu:

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

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

entryComponents:[ConfirmComponent],

ainsi que les déclarations:

declarations: [
    AppComponent,
    ConfirmComponent
]

Ajoutez «NgbModalModule» dans les importations et le nom de votre composant dans entryComponents App.module.ts comme indiqué ci-dessous

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

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

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 le déclarer dans les fournisseurs du module actuel au lieu de root

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

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

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

importer {NgbModule} depuis '@ ng-bootstrap / ng-bootstrap';

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

Cette erreur se produit lorsque vous essayez de charger un composant dynamiquement et:

1. Le composant que vous souhaitez charger n'est pas un module de routage
2. Le composant n'est pas 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 du module.

1. Ajoutez un routeur au composant. Le retrait de cette approche est que votre composant sera accessible avec cette URL.
2. Ajoutez-le à entryComponents. dans ce cas, votre composant ne sera associé à aucune URL et il ne sera pas accessible avec l'URL.

J'ai eu le même problème dans Angular7 lorsque je crée des composants dynamiques. Il y a deux composants (TreatListComponent, MyTreatComponent) qui doivent être chargés dynamiquement. Je viens d'ajouter le tableau entryComponents à mon fichier app.module.ts.

    entryComponents: [
    TreatListComponent,
    MyTreatComponent
  ],

si vous utilisez le routage dans votre application

assurez-vous d'ajouter de nouveaux composants dans le chemin de routage

par exemple :

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

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

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

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

Vous n'avez besoin de l'ajouter à entryComponents que si un composant sera inclus dans le modal. De la documentation:

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

J'obtenais le même problème avec ag-grid en utilisant des composants dynamiques. J'ai découvert que vous devez ajouter le composant dynamique au module ag-grid .withComponents []

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

Dans mon cas, j'ai oublié d'ajouter MatDialogModuleaux importations dans un module enfant.

Pour des éclaircissements ici. Dans le cas où vous n'utilisez pas ComponentFactoryResolverdirectement dans le composant et que vous souhaitez l'abstraire au service, qui est ensuite injecté dans le composant, vous devez le charger sous les fournisseurs de ce module, car s'il est chargé paresseux, cela ne fonctionnera pas.

Dans le cas où vous avez toujours l'erreur après avoir fourni la classe de dialogue de composant dans entryComponents, essayez de redémarrer ng serve- cela a fonctionné pour moi.

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

Vous devez importer le NgbModuledans le module comme ceci:

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

1. entryComponentsc'est essentiel. Les réponses ci-dessus sont correctes.

Mais...

2. Si vous fournissez un service qui ouvre le modal (un modèle commun) et que votre module qui définit le composant de dialogue n'est pas chargé dans AppModule, vous devez passer providedIn: 'root'à providedIn: MyModule. Comme bonne pratique générale, vous devez simplement utiliser le providedIn: SomeModulepour tous les services de dialogue qui sont dans les modules.

J'utilise Angular8, et j'essaie d' ouvrir le composant de manière dynamique à partir d'un autre module , dans ce cas, vous devez import the moduleentrer dans le module qui essaie d'ouvrir le composant, bien sûr en plus export du composant et le répertorier dans le entryComponentstableau comme l'ont fait les réponses précédentes.

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

Dans mon cas, j'ai résolu ce problème en:
1) plaçant NgxMaterialTimepickerModuleen app module imports:[ ]
2) plaçant NgxMaterialTimepickerModuleen testmodule.ts imports:[ ]
3) plaçant testcomponenten declartions:[ ]etentryComponents:[ ]

(J'utilise la version angulaire 8+)

Déclarez toutes les nouvelles pages dans 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
  ],

 - 


----------


---------