Angular2 custom pipe could not be found

Question

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 - gt    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  quot   actPipe quot    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  quot  angular core quot     Pipe       name  actStatusPipe     export class ActStatusPipe implements PipeTransform      transform status any  any          switch  status                case 1                  return  quot UN PUBLISH quot               case 2                  return  quot PUBLISH quot               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

User · Answer

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!

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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       lt ---   NgModule     declarations  ActStatusPipe       lt ---   imports  CommonModule     exports  ActStatusPipe      lt ---     export class MainPipe     app module ts user this pipe module in any module    NgModule     declarations           imports        MainPipe       lt ---   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     create pipe   create separate module and declare and export one or more pipe  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

User · Answer

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  quot ng serve quot   stop it     then start it up again  For me  none of the other suggestions worked  but simply stopping  then restarting  quot ng serve quot  was enough to make the error go away  Strange

User · Answer

import  CommonModule  from   angular common     Adding this statement to the pipe module solved my problem

[angular] Angular2: custom pipe could not be found

Examples related to angular

Examples related to angular2-pipe