title: Angular 2 Component not loading in different module
body: <p>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</p>
  
  <p>---edit---</p>
  
  <p>Root Module</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      ManagerModule,
      LogadoModule,
      GeralModule,
      RouterModule.forRoot(routes, {useHash: true})
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Module 1</p>
  
  <pre><code>@NgModule({
      declarations: [
          GeralComponent,
          GeralHeaderComponent,
          LoginComponent,
          AtividadesListagemComponent // -&gt; COMPONENT TO BE SHARED
      ],
      imports: [
          CommonModule,
          ReactiveFormsModule,
          FormsModule,
          GeralRoutingModule
      ], 
      providers: [GeralService],
      exports: [GeralComponent],
      bootstrap: [GeralComponent]
  })
  export class GeralModule{}
  </code></pre>
  
  <p>Module 3 // -> Use shared component in this module</p>
  
  <pre><code>@NgModule({
      declarations: [
          LogadoComponent,
          AtividadesInscritoComponent,
          LogadoHeaderComponent
      ],
      imports: [
          CommonModule,
          ReactiveFormsModule,
          FormsModule,
          LogadoRoutingModule
      ], 
      providers: [],
      exports: [LogadoComponent],
      bootstrap: [LogadoComponent]
  })
  export class LogadoModule{}
  </code></pre>
  
  <p>The project structure is:</p>
  
  <p>Root Module
      Module 1
      Module 2
      Module 3</p>
  
  <p>----edit 2 -----</p>
  
  <p>Shared Module</p>
  
  <pre><code>@NgModule({
    imports: [CommonModule],
    exports : [
      CommonModule,
      AtividadesListagemComponent
    ],
    declarations: [AtividadesListagemComponent]
  })
  export class SharedModule { }
  </code></pre>
  
  <p>Root Module</p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      ManagerModule,
      LogadoModule,
      GeralModule,
      RouterModule.forRoot(routes, {useHash: true})
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Module 1</p>
  
  <pre><code>@NgModule({
      declarations: [
          GeralComponent,
          GeralHeaderComponent,
          LoginComponent
      ],
      imports: [
          CommonModule,
          ReactiveFormsModule,
          FormsModule,
          GeralRoutingModule,
          SharedModule
      ], 
      providers: [GeralService],
      exports: [GeralComponent],
      bootstrap: [GeralComponent]
  })
  export class GeralModule{}
  </code></pre>
  
  <p>Module 3</p>
  
  <pre><code>@NgModule({
      declarations: [
          LogadoComponent,
          AtividadesInscritoComponent,
          LogadoHeaderComponent
      ],
      imports: [
          CommonModule,
          ReactiveFormsModule,
          FormsModule,
          LogadoRoutingModule,
          SharedModule
      ], 
      providers: [],
      exports: [LogadoComponent],
      bootstrap: [LogadoComponent]
  })
  export class LogadoModule{}
  </code></pre>