How do you shared a module in angular 4

Question

Hello I have two module being lazy loaded.

The GroupModule and the TaxModule.

In the GroupModule I loading this.

@NgModule({
  imports: [
    GroupRoutingModule,
    CommonModule,
    HttpClientModule,
    FormsModule,
    DataTableModule,
  ],
  declarations: [
    GroupListComponent,
    GroupCreateComponent,
    GroupEditComponent,
    DataFilterPipe,
  ],
  providers: [GroupService]
})

In my TaxModule I'm loading this.

    @NgModule({
  imports: [
    CommonModule,
    TaxRoutingModule,
    HttpClientModule,
    FormsModule,
    DataTableModule,
  ],
  declarations: [
    TaxListComponent,
    TaxCreateComponent,
    TaxEditComponent,
    DataFilterPipe,
  ],
  providers: [TaxService]
})

The problem is that I'm getting this console error.

ERROR Error: Uncaught (in promise): Error: Type DataFilterPipe is part of the 

declarations of 2 modules: TaxModule and GroupModule! Please consider moving DataFilterPipe to a higher module that imports TaxModule and GroupModule. You can also create a new NgModule that exports and includes DataFilterPipe then import that NgModule in TaxModule and GroupModule.
Error: Type DataFilterPipe is part of the declarations of 2 modules: TaxModule and GroupModule! Please consider moving DataFilterPipe to a higher module that imports TaxModule and GroupModule. You can also create a new NgModule that exports and includes DataFilterPipe then import that NgModule in TaxModule and GroupModule.

I added the DataFilterPipe to the Root app module both its not working. Anybody know the solution for this problem.

AppModule

    @NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
  ],
  declarations: [
    AppComponent,
    FullLayoutComponent,
    NAV_DROPDOWN_DIRECTIVES,
    BreadcrumbsComponent,
    SIDEBAR_TOGGLE_DIRECTIVES,
    AsideToggleDirective,
  ],
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy,
    }, DataFilterPipe
  ],
  bootstrap: [AppComponent]
})

This is my app.routing

    export const routes: Routes = [
  {
    path: '',
    component: LoginComponent,
    data: {
      title: 'Login'
    }
  },
  {
    path: 'dashboard',
    redirectTo: 'dashboard',
    pathMatch: 'full',
  },
  {
    path: '',
    component: FullLayoutComponent,
    data: {
      title: 'Home'
    },
    children: [
      {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'store',
        loadChildren: './store/store.module#StoreModule'
      },
      {
        path: 'group',
        loadChildren: './group/group.module#GroupModule'
      },
      {
        path: 'tax',
        loadChildren: './tax/tax.module#TaxModule'
      }
    ]
  }

Could you show your root AppModule's @NgModule ? (Just wanna see how it is written along with TaxModule & GroupModule) — amal
– amal, Commented Sep 26, 2017 at 0:28

Mehdi · Accepted Answer · 2017-09-26 03:52:57Z

1

like @SergioEscudero mentoinned, you can create a shared Module for pipes like so:

import NgModule from '@angular/core';

 @NgModule({
  declarations: [    
    DataFilterPipe,
    OtherPipeHere
  ],
  exports:[
    DataFilterPipe,
    OtherPipeHere
  ]
})
export class SharedPipesModule{}

Then from you AppModule, in the imports section, add SharedPipesModule.

Notice that I have added an exports property in the SharedPipesModule which will make your pipes visible to the modules where you import the SharedPipesModule

For further details, checkout this video from @PaulHalliday https://www.youtube.com/watch?v=0NDvwt9zf9k

answered Sep 26, 2017 at 3:52

Mehdi

2,4081 gold badge19 silver badges28 bronze badges

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

Comments

Sergio Escudero · Accepted Answer · 2017-09-26 00:44:18Z

0

You can't import components or pipes in different modules. You can create a module with shared pipes and components and import it in both modules and that's all.

answered Sep 26, 2017 at 0:44

Sergio Escudero

1,89416 silver badges21 bronze badges

1 Comment

Millenial2020 Over a year ago

I new to Angular 4 could you give me an example of how would that look like?

Collectives™ on Stack Overflow

How do you shared a module in angular 4

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related