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'
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.