how to use sharedModule in angular2?

Question

I have one angular2 component which I want to share among multiple modules.

So I wrote below sharedModule ,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {GenericComponent} from './generic/generic.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ GenericComponent ],
  exports:      [ GenericComponent ]
})
export class SharedModule { }

then I added this sharedModule to multiple modules as below:

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SharedModule} from './shared.module';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule,SharedModule ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap: [AppComponent]
})
export class AppModule { }

I also added sharedModule to generic.module.ts similarly ,

generic.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {SharedModule} from './shared.module';
@NgModule({
  imports:      [ BrowserModule,SharedModule ],
  declarations: [ //.. here I have added all the components that generic uses ]
})
export class GenericModule { }

but I am getting below error when I am trying to use generic component inside components of generic.module.ts

Unexpected value 'undefined' imported by the module 'GenericModule'

Are you also importing GenericModule into SharedModule? Ive had this happen before where it caused a failing circular dependency — Paul Samsotha, Sep 22 '16 at 06:18
@peeskillet no.. i am importing generic.component inside sharedModule,and I am importing this shared module inside genericModule & AppModule — Bhushan Gadekar, Sep 22 '16 at 06:20
@peeskillet Actually I have this problem. My sharedModule contains a pipe and a module (A), the module A need the pipe of ShareModule, so I import it from within the module A. But I have a error `Unexpected value 'undefined' imported by the module 'A'`. What I'm suppose to do in this case ? — Kévin Vilela Pinto, Feb 11 '17 at 14:02

score 8 · Accepted Answer · answered Sep 22 '16 at 10:48

Here's the code from my app using a shared module:

App module:

import { AboutModule } from './about/about.module';
import { SharedModule }   from './shared/shared.module';
import { Menubar, MenuItem } from 'primeng/primeng';

@NgModule({
    imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot(), 
               HomeModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ appRoutingProviders ]

}) 

export class AppModule {}

The home module:

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


@NgModule({
    imports: [ SharedModule, routing],
    declarations: [ HomeComponent, LoginComponent, RegisterComponent, VerifyComponent, 
                   VerifyEmailComponent, ForgotComponent, ForgotVerifyComponent, 
                   ChangeComponent, ChallengeComponent, LogoutComponent ], 
    bootstrap: [ HomeComponent ],
    providers: [ ]

}) 

export class HomeModule {}

And the shared module:

@NgModule({
  imports: [CommonModule, RouterModule, MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule,
            DropdownModule, DialogModule, AccordionModule, CalendarModule, SelectButtonModule, CheckboxModule,
            ProgressBarModule, DataTableModule],
  declarations: [ ErrorMessagesComponent, FoodDashboardComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule,
            MenubarModule, GalleriaModule, InputTextModule, PanelModule, ButtonModule, DropdownModule, DialogModule, AccordionModule, CalendarModule,
            SelectButtonModule, CheckboxModule, DataTableModule, ProgressBarModule, ErrorMessagesComponent, FoodDashboardComponent ]
})

export class SharedModule {
  //
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [SettingsService, AppMenuService, AuthorizationService, LoginService, RegisterService, ThemeService, ValidationService,
        NutritionixService, AuthGuardService, CalculationService, ChallengeService ]
    };
  }
}

I have more than 20 modules in my app and I use the shared module all over the place. This works just fine. Hope it helps.

score 4 · Answer 2 · answered Sep 22 '16 at 05:55

4

You can't use BroswerModule in featureModule. So make sure you use CommonModule instead of using BrowswerModule.

import { NgModule }      from '@angular/core';
import { CommonModule }        from '@angular/common';
import {SharedModule} from './shared.module';
@NgModule({
  imports:      [ CommonModule ,SharedModule ],
  declarations: [ //.. here I have added all the components that generic uses ],
  exports:      [ CommonModule]
})
export class GenericModule { }

answered Sep 22 '16 at 05:55

micronyks

54,797
15
112
146

still getting the error : `nexpected value 'undefined' imported by the module 'GenericModule'` – Bhushan Gadekar Sep 22 '16 at 06:08
1

i think one of the thing which you are importing was not found. check by removing one by one so that you will get which import gives you error – ranakrunal9 Sep 22 '16 at 06:10
should I add GenericComponent to declarations inside generic.module too? @ranakrunal9 – Bhushan Gadekar Sep 22 '16 at 06:13
But you purpose is not clear. is it a lazy module or what? I can't see any connection bet GenericModule and AppModule. Why have you injected sharedModule everywhere? there are so many questions to ask. – micronyks Sep 22 '16 at 06:18
I tried importing generic.component inside generic.module too, still not working – Bhushan Gadekar Sep 22 '16 at 06:22
@micronyks I need to use generic.component inside generic.module & app.module., If I am importing generic.component in app.module then it works for one iteration.but inside generic.component I am dynamically creating components which are declared inside generic.module. for eg. . where jumbotron-component is included in generic.module – Bhushan Gadekar Sep 22 '16 at 06:26
you have to declare all your component in `generic.module` declaration which you want to use inside your `generic.module` – ranakrunal9 Sep 22 '16 at 06:28
@ranakrunal9 I have included generic.component inside declarations of generic.module too :( – Bhushan Gadekar Sep 22 '16 at 06:30
@ranakrunal9 no ,`Type GenericComponent is part of the declarations of 2 modules: SharedModule and AppModule! Please consider moving GenericComponent to a higher module that imports SharedModule and AppModule. You can also create a new NgModule that exports and includes GenericComponent then import that NgModule in SharedModule and AppModule` – Bhushan Gadekar Sep 22 '16 at 06:42
If you want to use genericcmp in genericmodule and appmodule, why are you playing with sharedModule? There is a separate way to do it. – micronyks Sep 22 '16 at 14:31

how to use sharedModule in angular2?

2 Answers2