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

Please provide some of the code so we can take a look.

DeborahK
– DeborahK

2017-07-18 00:12:59 +00:00
Commented Jul 18, 2017 at 0:12 — DeborahK
– DeborahK, Commented Jul 18, 2017 at 0:12
@DeborahK done :)

julianomontini
– julianomontini

2017-07-18 00:20:10 +00:00
Commented Jul 18, 2017 at 0:20 — julianomontini
– julianomontini, Commented Jul 18, 2017 at 0:20

DeborahK · Accepted Answer · 2017-07-18 00:25:53Z

2

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

answered Jul 18, 2017 at 0:25

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

julianomontini Over a year ago

It doesn't work! I posted a new update, can you help me figure out what is happening?

julianomontini Over a year ago

I'm so sorry ... You are absolutely right! There was an problem in my routes, but you answer is correct

Collectives™ on Stack Overflow

Angular 2 Component not loading in different module

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related