Angular 2 Composant ne se chargeant pas dans un module différent

Question

Je construis une application qui a un module racine, alors sous ce module il y a 3 sous-modules. Dans le Module 1, il y a un composant qui peut être réutilisé dans le Module 3, cependant, si je vais directement à l'URL du composant dans le Module 3 le composant n'est jamais chargé (je pense que cela arrive parce que le Module 1 n'a pas été chargé). Je l'ai déjà essayé d'exporter le composant du module 1 et l'amorçage dans le module racine, mais je reçois une erreur disant que le sélecteur de composants n'a pas été trouvé

--- --- modifier

Module Root

@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 // -> utiliser le composant partagé dans ce module

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

La structure du projet est:

racine Module Module 1 Module 2 Module 3

---- ----- edit 2

Module partagé

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

Module racine

@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

Lorsque vous avez un composant qui doit être partagée entre plusieurs modules, l'approche recommandée est d'ajouter le composant à un SharedModule puis importer ce module partagé dans n'importe quel module qui en a besoin.

Dans cet exemple, le StarComponent est partagé par plusieurs 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 { } 

Et voici comment les importations du module produit il:

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 { } 

J'ai l'exemple de code complet ici: https://github.com/DeborahK/Angular2-GettingStarted/tree/master/APM%20-%20Final