How to use a component of one module in another?

Question

Angular

Good afternoon. I am making a Notification module. I made a component for showing notifications and made a NotificationBellComponent component that will display an icon in the ToolbarComponent. In the NotificationModule module, I made an export

@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [NotificationComponent],
  exports: [NotificationComponent,NotificationBellComponent],  
  providers: [NotificationService]
})

. In the ToolbaModule did

@NgModule({    
    imports: [CommonModule, SharedModule, NotificationModule,NotificationBellComponent],
    declarations: [ToolbarComponent,NotificationBellComponent],
    exports: [ToolbarComponent]
})

In the ToolbarComponent component I output <sd-notification-bell></sd-notification-bell>
AND I get an error

zone.js?1476075322482:355 Unhandled Promise rejection: Template parse errors:
'sd-notification-bell' is not a known element:
1. If 'sd-notification-bell' is an Angular component, then verify that it is part of this module.

How to properly export/import components between modules?

Answer 1

NotificationModule
You need to be sure to declare NotificationBellComponentin an declarationsarray

@NgModule({
  imports: [CommonModule, SharedModule],
  declarations: [NotificationComponent, NotificationBellComponent],
  exports: [NotificationComponent, NotificationBellComponent],  
  providers: [NotificationService]
})

Modules can be exported even if they are not imported
1) imports - only for modules
2) why declare NotificationBellComponent if you import it from a module NotificationModule
total your module

@NgModule({    
    imports: [CommonModule, SharedModule, NotificationModule],
    declarations: [ToolbarComponent],
    exports: [ToolbarComponent]
})

https://plnkr.co/edit/R9pGm6sd8vagd2OepHB4?p=preview