Angular use custom component in multiple ngModules

Issue

I created a custom component and want to use it in multiple components. When I add it directly in to the ngModule of the components. Then I get the error, that more than one ngClass declares the component. Where do I add the import/declaration to?

I have the following structure:

- Admin
    |- ngModule for Admin
    |- multiple components and each of them has an ngModule **<-- in this I wanna use my custom component**
- Core
    |- some services and so on
    |- custom component **<-- in this I do have my component**
- User
    |- ngModule for User
    |- multiple components and each of them has an ngModule **<-- in this I wanna use my custom component**

Solution

The best practice is to create a shared module which will declare and export all the components, directives, pipes and library modules.

@NgModule({
  declarations: [
    // Components, Directives and Pipes
    CustomComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    MatAutocompleteModule,
  ],
  exports: [
    CommonModule,
    LayoutModule,
    FormsModule,
    ReactiveFormsModule,
    FlexModule,
    FlexLayoutModule,
    ResizableModule,
    TranslateModule,
    // Shared Components, Directive and Pipes
    CustomComponent,
  ]
})
export class SharedModule {}

Answered By - Marco Fiusco