在多组件角度中使用组件延迟加载？

Question

I have Three components ( NavbarComponent , IndexComponent , PoweredComponent ) so I use lazy loading I need use components in multi components ,I don't know how to declare the component for using it in the lazy module. I'll show you some of the relevant parts of the different files:

1. NavbarComponent
   navbar.module.ts

  declarations: [NavbarComponent],
  imports: [
    CommonModule
  ],
  exports: [NavbarComponent]
})

2. IndexComponent
   Index.module.ts

  declarations: [IndexComponent ,NavbarComponent],
  imports: [
    CommonModule,
    IndexRoutingModule,
  ],
})

index.component.html

<app-navbar></app-navbar>
<div>...</div>

in index show navbar

3. PoweredComponent
   powered.module.ts

@NgModule({
  declarations: [PoweredComponent,NavbarComponent],
  imports: [
    CommonModule,
    PoweredRoutingModule,
  ], 
})

powered.component.html

<app-navbar></app-navbar>
<div>...</div>

in powered.component.html no show navbar

issue <app-navbar></app-navbar> not dispaly in multi components can show jsut in index components

Pleas help me???
Thank's to read!!!

Answer 1

You can't declare a Component (using declarations ) in more than one NgModule. In your situation, as your NavbarModule exports the NavBarComponent , you just need to import the module in the PoweredModule and IndexModule to make the Component available in these modules.

So for IndexModule as an example :

 declarations: [IndexComponent],
  imports: [
    CommonModule,
    IndexRoutingModule,
    NavbarModule
  ],
})

Answer 2

Index.module.ts

  declarations: [IndexComponent],
  imports: [
    CommonModule,
    IndexRoutingModule,
    NavbarModule
  ],
})

powered.module.ts

@NgModule({
  declarations: [PoweredComponent],
  imports: [
    CommonModule,
    PoweredRoutingModule,
    NavbarModule
  ], 
})