CODEWITHSUNDEEP
angularimportmodulepipe
Alejandro Cordoba
Alejandro Cordoba

Reputation: 447

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

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

Upvotes: 10

Views: 18624

Answers (2)

Peter Drinnan
Peter Drinnan

Reputation: 4522

I had to add the pipe so a service module to make it work with Angular7. This worked for me:

https://alligator.io/angular/providers-shared-modules/

Upvotes: 0

micronyks
micronyks

Reputation: 55443

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

Upvotes: 32

Related Questions