Angular 2 Component not loading in different module

Question

I'm build an application that has a root Module, then under this Module are 3 sub modules. In Module 1 , there is an component that can be reused in Module 3, however, if I go straight to the component URL in Module 3 the component is never load ( I think that this happens because Module 1 was not loaded ). I've already tried to export the component from Module 1 and bootstrap it in the root Module, but I get an error saying that the Component selector was not found

---edit---

Root Module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ManagerModule,
    LogadoModule,
    GeralModule,
    RouterModule.forRoot(routes, {useHash: true})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Module 1

@NgModule({
    declarations: [
        GeralComponent,
        GeralHeaderComponent,
        LoginComponent,
        AtividadesListagemComponent // -> COMPONENT TO BE SHARED
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        FormsModule,
        GeralRoutingModule
    ], 
    providers: [GeralService],
    exports: [GeralComponent],
    bootstrap: [GeralComponent]
})
export class GeralModule{}

Module 3 // -> Use shared component in this module

@NgModule({
    declarations: [
        LogadoComponent,
        AtividadesInscritoComponent,
        LogadoHeaderComponent
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        FormsModule,
        LogadoRoutingModule
    ], 
    providers: [],
    exports: [LogadoComponent],
    bootstrap: [LogadoComponent]
})
export class LogadoModule{}

The project structure is:

Root Module Module 1 Module 2 Module 3

----edit 2 -----

Shared Module

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

Root Module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ManagerModule,
    LogadoModule,
    GeralModule,
    RouterModule.forRoot(routes, {useHash: true})
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Module 1

@NgModule({
    declarations: [
        GeralComponent,
        GeralHeaderComponent,
        LoginComponent
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        FormsModule,
        GeralRoutingModule,
        SharedModule
    ], 
    providers: [GeralService],
    exports: [GeralComponent],
    bootstrap: [GeralComponent]
})
export class GeralModule{}

Module 3

@NgModule({
    declarations: [
        LogadoComponent,
        AtividadesInscritoComponent,
        LogadoHeaderComponent
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        FormsModule,
        LogadoRoutingModule,
        SharedModule
    ], 
    providers: [],
    exports: [LogadoComponent],
    bootstrap: [LogadoComponent]
})
export class LogadoModule{}

Answer 1

When you have a component that needs to be shared across several modules, the recommended approach is to add the component to a SharedModule and then import that shared module in any module that needs it.

In this example, the StarComponent is shared by several modules:

import { NgModule }  from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { StarComponent } from './star.component';

@NgModule({
  imports: [ CommonModule],
  exports : [
    CommonModule,
    FormsModule,
    StarComponent
  ],
  declarations: [ StarComponent ],
})
export class SharedModule { }

And here is how the Product module imports it:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { ProductListComponent } from './product-list.component';
import { ProductDetailComponent } from './product-detail.component';

import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    SharedModule,
    RouterModule.forChild([
      { path: '', component: ProductListComponent },
      { path: ':id', component: ProductDetailComponent }
    ])
  ],
  declarations: [
    ProductListComponent,
    ProductDetailComponent
  ]
})
export class ProductModule { }

I have the complete sample code here: https://github.com/DeborahK/Angular2-GettingStarted/tree/master/APM%20-%20Final