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
– Paul Samsotha, Commented Sep 22, 2016 at 6:18
@peeskillet no.. i am importing generic.component inside sharedModule,and I am importing this shared module inside genericModule & AppModule — Bhushan Gadekar
– Bhushan Gadekar, Commented Sep 22, 2016 at 6: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
– Kévin Vilela Pinto, Commented Feb 11, 2017 at 14:02

John Baird · Accepted Answer · 2016-09-22 10:48:27Z

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.

micronyks · Accepted Answer · 2016-09-22 05:55:13Z

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, 2016 at 5:55

micronyks

55.7k17 gold badges122 silver badges166 bronze badges

10 Comments

Bhushan Gadekar Over a year ago

still getting the error : nexpected value 'undefined' imported by the module 'GenericModule'

ranakrunal9 Over a year ago

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

Bhushan Gadekar Over a year ago

should I add GenericComponent to declarations inside generic.module too? @ranakrunal9

micronyks Over a year ago

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.

Bhushan Gadekar Over a year ago

I tried importing generic.component inside generic.module too, still not working

|

Collectives™ on Stack Overflow

how to use sharedModule in angular2?

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related