Nested Angular Components With Multiple Modules (Jhipster)

Question

Let me say that i have two modules in my app (let's say Parent and Child) which each one of them has his components and I want to show a Child component inside a Parent component

I tried to export the Child component in the Child module then import it in the Parent module It worked ! the Child component is shown inside my a Parent component

But I have one problem which says that's my Child component is a part of 2 modules ! and that's when I try to show any Child component I'm stuck with this if anyone can help It would be very helpful

after i moved the child module to app.module that's my modules

Child Module :

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { WinpharmSharedModule } from 'app/shared/shared.module';
import { StockComponent } from './stock.component';
import { StockDetailComponent } from './stock-detail.component';
import { StockUpdateComponent } from './stock-update.component';
import { StockDeletePopupComponent, StockDeleteDialogComponent } from './stock-delete-dialog.component';
import { stockRoute, stockPopupRoute } from './stock.route';

const ENTITY_STATES = [...stockRoute, ...stockPopupRoute];

@NgModule({
  imports: [WinpharmSharedModule, RouterModule.forChild(ENTITY_STATES)],
  declarations: [StockComponent, StockDetailComponent, StockUpdateComponent, StockDeleteDialogComponent, StockDeletePopupComponent],
  entryComponents: [StockComponent, StockUpdateComponent, StockDeleteDialogComponent, StockDeletePopupComponent]
})
export class WinpharmStockModule {}

Parent Module :

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { WinpharmSharedModule } from 'app/shared/shared.module';
import { ProduitComponent } from './produit.component';
import { ProduitDetailComponent } from './produit-detail.component';
import { ProduitUpdateComponent } from './produit-update.component';
import { ProduitDeletePopupComponent, ProduitDeleteDialogComponent } from './produit-delete-dialog.component';
import { produitRoute, produitPopupRoute } from './produit.route';

const ENTITY_STATES = [...produitRoute, ...produitPopupRoute];

@NgModule({
  imports: [
    WinpharmSharedModule,
    RouterModule.forChild(ENTITY_STATES)
  ],
  declarations: [
    ProduitComponent,
    ProduitDetailComponent,
    ProduitUpdateComponent,
    ProduitDeleteDialogComponent,
    ProduitDeletePopupComponent
  ],
  entryComponents: [ProduitComponent, ProduitUpdateComponent, ProduitDeleteDialogComponent, ProduitDeletePopupComponent]
})
export class WinpharmProduitModule {}

then app.module.ts :

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
...
import { WinpharmStockModule } from './entities/stock/stock.module';

@NgModule({
  imports: [
    BrowserModule,
    NgbModule,
    // Here's the child module
    WinpharmStockModule,
    WinpharmSharedModule,
    WinpharmCoreModule,
    WinpharmHomeModule,
    // jhipster-needle-angular-add-module JHipster will add new module here
    WinpharmEntityModule,
    WinpharmAppRoutingModule
  ],
  declarations: [...
})
export class WinpharmAppModule {}

ERROR Error: "Uncaught (in promise): Error: Type ChildComponent is part of the declarations of 2 modules: ChildModule and ParentModule! Please consider moving ChildComponent to a higher module that imports ParentModule and ChildModule. You can also create a new NgModule that exports and includes ChildComponent then import that NgModule in ParentModule and ChildModule.

the answer is in the error message. You need to import only once in your module/component hierarchy your component. then you will have access to it in all child module/components.So in your case declare it in your parent module but not inside your children module or do as it is said in the second part of the message — JSmith, Oct 07 '19 at 21:04
@JSmith the problem is that i did the same as they said but then i've got more errors but i will try one other time, and thanks for your concern — , Oct 07 '19 at 21:13
just put the errors you get when you do as they tell you to do inside your post. I'll be happy to help if I can — JSmith, Oct 07 '19 at 21:14
now i removed the import from the Parent module and i moved it to app.module.ts but the same problem — , Oct 07 '19 at 21:21
yes even if i didn't import the component in Parent module they show the same error — , Oct 07 '19 at 21:24
also have you had a look at [this post](https://stackoverflow.com/questions/43598311/component-is-part-of-the-declaration-of-2-modules) — JSmith, Oct 07 '19 at 21:28
ok I'm sorry I can't help you more but still you need to pay attention if your module or component is not declared twice. if you added your app.module parent module and childModule in your post this could help. Best — JSmith, Oct 07 '19 at 21:33
Thank you anyway I ll see if there's some useless declarations then i can add the modules to my question — , Oct 07 '19 at 21:38

Nested Angular Components With Multiple Modules (Jhipster)

0 Answers0