89

The built-in pipe is work,but all custom pipes that i wanna use are the same error:

the pipe 'actStatusPipe' could not be found

[ERROR ->]{{data.actStatus | actStatusPipe}}

I have tried two ways,declare it in app.module's declarations:

app.module.ts:

import {ActStatusPipe} from '../pipe/actPipe' @NgModule({ declarations: [ AppComponent, HomePage, ActivitiesList, ActStatusPipe ], ... })

or use other module to declare and export all my pipes: //pipe

import {ActStatusPipe} from "./actPipe" @NgModule({ declarations:[ActStatusPipe], imports:[CommonModule], exports:[ActStatusPipe] }) export class MainPipe{}

and import it in app.module.

//pipe import {MainPipe} from '../pipe/pipe.module' @NgModule({ declarations:[...], imports:[...,MainPipe], })

But none of them work in my app.

Here is my code of the pipe:

import {Pipe,PipeTransform} from "@angular/core"; @Pipe({ name:'actStatusPipe' }) export class ActStatusPipe implements PipeTransform{ transform(status:any):any{ switch (status) { case 1: return "UN_PUBLISH"; case 2: return "PUBLISH"; default: return status } } }

I think it is most of the same with the document(In fact,i have just copied from the document and made a little modification)

And my angular2's version is 2.1.

Lots of solution that can be searched in stackOverflow and google are tried in my app,however they don't work.

This confused me a lot,thanks for you answer!

Improve this question
6
  • Could you reproduce it on the plunker? Commented Nov 7, 2016 at 5:54
  • lot of confusion in your code also. first try to make it simple that, create custom pipe and add in declarations: [ AppComponent, CapitalizePipe ] array of NgModule(). than let me know it is working? Commented Nov 7, 2016 at 9:03
  • @yurzui i would try after work Commented Nov 7, 2016 at 10:31
  • @VinayPandya the error message is below: Template parse errors: The pipe 'actStatusPipe' could not be found Commented Nov 7, 2016 at 10:38
  • i have just copy your pipe and it works for me Commented Nov 7, 2016 at 10:44

11 Answers 11

Reset to default
112

see this is working for me.

ActStatus.pipe.ts First this is my pipe

 import {Pipe,PipeTransform} from "@angular/core"; @Pipe({ name:'actStatusPipe' }) export class ActStatusPipe implements PipeTransform{ transform(status:any):any{ switch (status) { case 1: return "UN_PUBLISH"; case 2: return "PUBLISH"; default: return status } } }

main-pipe.module.ts in pipe module, i need to declare my pipe/s and export it.

 import { NgModule } from '@angular/core'; import {CommonModule} from "@angular/common"; import {ActStatusPipe} from "./ActStatusPipe.pipe"; // <--- @NgModule({ declarations:[ActStatusPipe], // <--- imports:[CommonModule], exports:[ActStatusPipe] // <--- }) export class MainPipe{}

app.module.ts user this pipe module in any module.

 @NgModule({ declarations: [...], imports: [..., MainPipe], // <--- providers: [...], bootstrap: [AppComponent] })

you can directly user pipe in this module. but if you feel that your pipe is used with in more than one component i suggest you to follow my approach.

  1. create pipe .
  2. create separate module and declare and export one or more pipe.
  3. user that pipe module.

How to use pipe totally depends on your project complexity and requirement. you might have just one pipe which used only once in the whole project. in that case you can directly use it without creating a pipe/s module (module approach).

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

4 Comments

Finally i find out it is because i import the pipe at the root module,and use it in a component import by other module.I just think it will work globally before and the bug is caused by my pipe. Your answer inspire me to find out this,thanks for your help!
@Rui, can you be more clear about how you solved this.
Adding a pipe to its own module is not required - it's just an alternative. The official docs (angular.io/guide/pipes#custom-pipes) says Pipes have to be declared and provided, so it can be injectible.
i think that what happening here, i am declaring ActStatusPipe in MainPipe module (which may have multiple pipes), and than importing that MainPipe module, so i can use all of the pipes.
22

This didnt worked for me. (Im with Angular 2.1.2). I had NOT to import MainPipeModule in app.module.ts and importe it instead in the module where the component Im using the pipe is imported too.

Looks like if your component is declared and imported in a different module, you need to include your PipeModule in that module too.

Improve this answer

3 Comments

What? That makes no sense. There isn't a global import for something like this?
but what if you need to import it in 2 modules? I find that doesn't work. I get a console error saying to use it in a higher module instead of 2 modules, but then app module doesn't do the trick
yes that is the way angular works, but if you want use that pipe module through out your angular app you can import in app.module.ts and if you want use that pipe in specific module, you need to import pipe module in that module only.
17

A really dumb answer (I'll vote myself down in a minute), but this worked for me:

After adding your pipe, if you're still getting the errors and are running your Angular site using "ng serve", stop it... then start it up again.

For me, none of the other suggestions worked, but simply stopping, then restarting "ng serve" was enough to make the error go away.

Strange.

Improve this answer

Comments

7

I take no issue with the accepted answer as it certainly helped me. However, after implementing it, I still got the same error.

Turns out this was because I was calling the pipes incorrectly in my component as well:

My custom-pipe.ts file:

@Pipe({ name: 'doSomething' }) export class doSomethingPipe implements PipeTransform { transform(input: string): string { // Do something } }

So far, so good, but in my component.html file I was calling the pipes as follows:

{{ myData | doSomethingPipe }}

This will again throw the error that the pipe is not found. This is because Angular looks up the pipes by the name defined in the Pipe decorator. So in my example, the pipe should instead be called like this:

{{ myData | doSomething }}

Silly mistake, but it cost me a fair amount of time. Hope this helps!

Improve this answer

Comments

4 
import {CommonModule} from "@angular/common";

Adding this statement to the pipe module solved my problem.

Improve this answer

2 Comments

"90% of angular (material) problems are solved by importing the correct module"
90% of angular problems are caused by poor documentation
2

Also make sure your pipe name (inside the decorator) is v̲i̲s̲i̲b̲l̲y camelCased.

This does not work: @Pipe({ name: 'plural' }) ❌,
but this does: @Pipe({ name: 'pluralForm' }) ✅

Improve this answer

1 Comment

Please, do Not ask me how long it took me to find out…
1

be sure, that if the declarations for the pipe are done in one module, while you are using the pipe inside another module, you should provide correct imports/declarations at the current module under which is the class where you are using the pipe. In my case that was the reason for the pipe miss

Improve this answer

Comments

0

If you are declaring your pipe in another module, make sure to add it to that module Declarations and Exports array, then import that module in whatever module is consuming that pipe.

Improve this answer

Comments

0

I encountered a similar issue, but putting it in my page’s module didn’t work.

I had created a component, which needed a pipe. This component was declared and exported in a ComponentsModule file, which holds all of the app’s custom components.

I had to put my PipesModule in my ComponentsModule as an import, in order for these components to use these pipes and not in the page’s module using that component.

Credits: enter link description here Answer by: tumain

Improve this answer

Comments

0

I faced similar issue.Mine got resolved by :-

  1. Importing the pipe's module(SharedModule) into the required module.
  2. Add the custom pipe in the providers array. @NgModule({ imports: [ SharedModule ], providers: [CustomPipe] )}
Improve this answer

1 Comment

It is advised to no longer user the 'providers: [ ] ' array for things like services and pipes when it is not needed. A custom pipe should just be imported and declared.
0

Please make sure you're using the 'selector' while using th pipe. for eg:

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'removeApos' }) export class RemoveAposPipe implements PipeTransform { transform(value: unknown, ...args: unknown[]): unknown { return null; } }

you need to use this as

<div>{{someval | removeApos}}</div>

please note the selector in the above eg and its usage in the div

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.