CODEWITHSUNDEEP
angular
Millenial2020
Millenial2020

Reputation: 2923

How do you shared a module in angular 4

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'
      }
    ]
  }

Upvotes: 0

Views: 164

Answers (2)

Mehdi
Mehdi

Reputation: 2398

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

Upvotes: 1

Sergio Escudero
Sergio Escudero

Reputation: 1894

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.

Upvotes: 0

Related Questions