Angular 8 - Use same component in other different components

Question

I have created a shared component which i want to use almost in all the other components, i get this error where it says:

Type BreadcrumbComponent is part of the declarations of 2 modules: BreadcrumbModule and CardsModule!

Here is my breadcrumb.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BreadcrumbComponent } from './breadcrumb.component';

@NgModule({
imports: [
    CommonModule
],
declarations: [BreadcrumbComponent],
exports: [BreadcrumbComponent],
})
export class BreadcrumbModule { }

The app.module.ts:

import { BreadcrumbModule } from './shared/breadcrumb/breadcrumb.module';

@NgModule({
imports: [
    BrowserModule,
    BreadcrumbModule,
    AccountsModule,
    CardsModule,
    ....
],
declarations: [AppComponent],
export class AppModule {}

This is the component where i want to use, its already inside declarations:

...
import { BreadcrumbComponent } from '@app/shared/breadcrumb/breadcrumb.component';

@NgModule({
    imports: [CommonModule, CardsRoutingModule],
    declarations: [CardsComponent, BreadcrumbComponent]
})

export class CardsModule {}

Answer 1

Your CardsModule should import the BreadcrumbModule:

@NgModule({
    imports: [CommonModule, CardsRoutingModule, BreadcrumbModule],
    declarations: [CardsComponent]
})

export class CardsModule {}

Because you added the component to the exports array, it should be available in any module where you import it