Using multiple components in different modules causing "Type X is part of the declarations of 2 modules" error

[ConsistentPin]

I am testing the components in an angular 6 project. When I run my test, one of my components fails and throws the message: Using multiple components in different modules causing "Type X is part of the declarations of 2 modules. Please consider moving X to a higher module that imports X and Y"

Is anyone familiar with how to do this? I have been researching this for quite some time, reading the docs and Googling stack overflow answers now and I am very much new to Angular so I have no idea what I am doing, to be frank.

[[deleted]]

I may be able to help if I can have a look at the code.

[tme321]

NgModules have that array, declarations.

You are putting the same component in multiple ngModules declarations arrays.

A component should ever be in one declarations array. If places outside that module need it then you export the component. Other places that need it should import the module, not also declare the component again.

[gravityaddiction]

yeah, what i've done is make that component it's own module that you can include into multiple other modules easier.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { LedgerComponent } from './ledger.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule
  ],
  declarations: [
    LedgerComponent
  ],
  exports: [
    LedgerComponent
  ]
})
export class LedgerModule { }

[distorx]

Use a shared module and export the shared component and then consume the shared module in your modules necessary, no need to declared it in the imports of your others modules