How to use one component in 2 different modules?

Question

Angular

How to use component shared BreadcrumbsComponent for 2 or more modules

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AlbumModule } from './album/album.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ContactModule } from './contact/contact.module';
import { LayoutModule } from './layout/layout.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutModule,
    AlbumModule,
    ContactModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContactComponent } from './container/contact/contact.component';
import { BreadcrumbsComponent } from '../shared/breadcrumbs/breadcrumbs.component';

@NgModule({
  declarations: [ContactComponent, BreadcrumbsComponent],
  imports: [CommonModule],
  exports: [BreadcrumbsComponent],
})
export class ContactModule {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AlbumComponent } from './container/album/album.component';
import { AlbumItemComponent } from './component/album-item/album-item.component';
import { PaginationComponent } from './component/pagination/pagination.component';
import { BreadcrumbsComponent } from '../shared/breadcrumbs/breadcrumbs.component';

@NgModule({
  declarations: [
    AlbumComponent,
    AlbumItemComponent,
    PaginationComponent,
    BreadcrumbsComponent,
  ],
  imports: [CommonModule],
  exports: [BreadcrumbsComponent],
})
export class AlbumModule {}

Error: src/app/album/album.module.ts:18:14 - error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors

18 export class AlbumModule {}
                ~~~~~~~~~~~


Error: src/app/contact/contact.module.ts:11:14 - error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors

11 export class ContactModule {}
                ~~~~~~~~~~~~~


Error: src/app/shared/breadcrumbs/breadcrumbs.component.ts:8:14 - error NG6007: The Component 'BreadcrumbsComponent' is declared by more than one NgModule.

8 export class BreadcrumbsComponent implements OnInit {
               ~~~~~~~~~~~~~~~~~~~~

  src/app/album/album.module.ts:13:5
    13     BreadcrumbsComponent,
           ~~~~~~~~~~~~~~~~~~~~
    'BreadcrumbsComponent' is listed in the declarations of the NgModule 'AlbumModule'.
  src/app/contact/contact.module.ts:7:36
    7   declarations: [ContactComponent, BreadcrumbsComponent],
                                         ~~~~~~~~~~~~~~~~~~~~
    'BreadcrumbsComponent' is listed in the declarations of the NgModule 'ContactModule'.




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


× Failed to compile.

Answer 1

Move this component into a separate module and use this module in two required modules.
If I understand the problem correctly