use angular 4 Pipe in 2 component

Question

I have component base angular4 app and in every component i'm using DataTable Plugin and custom DataFilterPipe, when i import like below in every component the error i get is ERROR Error: Uncaught (in promise): Error: Type DataFilterPipe is part of the declarations of 2 modules. Please consider moving DataFilterPipe to a higher module. then i created a new module called dataFilterModule

import:

import {DataTableModule} from "angular2-datatable";
import {DataFilterPipe} from "../plugins/datatable/datafilterpipe";
import {HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";

dataFilterModule:

import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {DataTableModule} from "angular2-datatable";
import {DataFilterPipe} from "../plugins/datatable/datafilterpipe";
import {HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";

@NgModule({
    imports: [
        CommonModule,
        DataTableModule,
        FormsModule,
        HttpModule
    ],
    declarations: [
        DataFilterPipe
    ],
    exports: [
        DataFilterPipe
    ]
})
export class dataFilterModule {}

then import this module in my AppModule but!! the error i get is:

The pipe 'dataFilter' could not be found

I added exported dataFilterModule like below but there is no any good news!

export class dataFilterModule {
   static forRoot() {
     return {
         ngModule: DataFilterPipe,
         providers: [],
     };
   }
}

Edit: My custom filter:

import * as _ from 'lodash';
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'dataFilter'
})
export class DataFilterPipe implements PipeTransform {

    transform(array: any[], query: string): any {
        if (query) {
        return _.filter(array, row=>row.name.indexOf(query) > -1);
     }
    return array;
  }
 }

score 2 · Accepted Answer · answered Jul 25 '17 at 04:31

2

The answer is a Shared Module. Check out this similar post I answered a few days ago.

answered Jul 25 '17 at 04:31

joshrathke

7,564
7
23
38

after creating the SharedModule i should import it in AppModule or any component i need? – Mort Jul 25 '17 at 04:46
Yep, the key is to make sure you export the components, directives...PIPES you might need in other modules. Once you import the shared module into the module you need it in, you can then import the individual components, directives, etc. Into specific parts of the module. – joshrathke Jul 25 '17 at 04:48
Thank you, but the **The pipe 'dataFilter' could not be found** error still exists. – Mort Jul 25 '17 at 04:58
please take a look at this gist: https://gist.github.com/MortezaAghili/4e30566fe3753ca0e5fea5d5818727c1 – Mort Jul 25 '17 at 04:58
This may sound crazy but have you tried killing the server and rebuilding the app? – joshrathke Jul 25 '17 at 05:06
after you said yes, but nothing happed. the error still exists. do you looked at my gist? is it correct? – Mort Jul 25 '17 at 05:09
You are also exporting a few things you should'nt be. You shouldn't be exporting CommonModule. You want to be careful that you don't duplicate exports/imports....the way I see it is if I am exporting something using a Shared Module, that should "in theory" be the only source the "thing" you are exporting/importing. – joshrathke Jul 25 '17 at 05:12
Finnaly, i should import ShareModule in every component i need no in my AppModule. thanks – Mort Jul 25 '17 at 05:12

score 1 · Answer 2 · answered Jul 25 '17 at 05:15

1

After checking @joshrathke joshrathke answer i found the solution. You should create ShareModule then import your Directive, component or pipes and for using this. you should import ShareModule in every component you need!

answered Jul 25 '17 at 05:15

Mort

1,411
5
19
51

Share root with "forRoot" and import the share module aim your app module. – Yoav Schniederman Jul 25 '17 at 05:22

use angular 4 Pipe in 2 component

2 Answers2