Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'

Question

Im having problems while importing a Pipe with this setup: I have a dashboard.Module which connects with Homie.Module and Services.Module via Dashboard-routing.Module

This is my Dashboard.Module

import { DashboardRoutingModule } from './dashboard-routing.module';    
import { ValuesPipe } from './values-pipe.pipe';

@NgModule({
  imports:      [ DashboardRoutingModule, CommonModule],
  providers:    [ HomieService, ServiceService ],
  declarations: [ DashboardComponent, ValuesPipe],
  exports: [ValuesPipe],
  bootstrap:    [ DashboardComponent ]
})
export class DashboardModule { }

Homie.Module

import { ValuesPipe } from './../values-pipe.pipe';

@NgModule({
  imports: [
    CommonModule,
    HomieRoutingModule,
    FormsModule,
    Ng2SearchPipeModule,
    ValuesPipe
  ],
  declarations: [HomieListComponent, HomieDetailComponent]
})
export class HomieModule { }

Service.Module

import { ValuesPipe } from './../values-pipe.pipe';

@NgModule({
  imports: [
    CommonModule,
    ServiceRoutingModule,
    FormsModule,
    Ng2SearchPipeModule,
    ValuesPipe
  ],
  declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule { }

Error

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'. Please add a @NgModule annotation.
Error: Unexpected pipe 'ValuesPipe' imported by the module 'HomieModule'. Please add a @NgModule annotation.

When I declare my pipe in Homie and Service modules I get the error message: pipe declared in two modules. So thats why I moved my pipe to Dashboard.module which is the module that connects with both (Parent).

Answer 1

By design convention implemented design is wrong. If you want to share pipes, components, directives which are common to your project modules, you should use SharedModule concept.

In your solution, you are doing exporting pipe correctly but just that way it doesn't work.

Once you export common pipe(s), component(s) and directive(s) after doing so you have to import that entire module from where you have exported such things to other modules where you want to use them. So do following,

1) Create a shared module somewhere in your project directory

import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common';

import { ValuesPipe}         from './../values-pipe.pipe';

@NgModule({
  imports:      [ CommonModule ],
  declarations: [ ValuesPipe ],
  exports:      [ ValuesPipe ]
})
export class SharedModule { }

2) Import shareModule in Service.Module

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

@NgModule({
  imports: [
    CommonModule,
    ...
    SharedModule
  ],
  declarations: [ServiceDetailComponent, ServiceListComponent]
})
export class ServiceModule { }

Now you are ready to use exported pipe in Service Module.

Read more about shareModule