The pipe could not be found angular2 custom pipe

Question

I can t seem to fix this error  I have a search bar and an ngFor  I am trying to filter the array using a custom pipe like this   import   Pipe  PipeTransform   from   angular core    import   User   from     user user     Pipe     name   usersPipe     pure  false    export class UsersPipe implements PipeTransform     transform users  User     searchTerm  string        return users filter user   gt  user name indexOf searchTerm      -1           Usage    lt input   ngModel    searchTerm  type  text  placeholder  Search users  gt    lt div  ngFor  let user of  users   usersPipe searchTerm   gt       lt  div gt    Error   zone js 478 Unhandled Promise rejection  Template parse errors  The pipe  usersPipe  could not be found     lt div class  row  gt       lt div        ERROR - gt   ngFor  let user of  user   usersPipe searchTerm   gt    Angular versions     angular common    2 0 0-rc 5     angular compiler    2 0 0-rc 5     angular core    2 0 0-rc 5     angular platform-browser    2 0 0-rc 5     angular platform-browser-dynamic    2 0 0-rc 5     angular router    3 0 0-rc 1     angular forms    0 3 0     angular http    2 0 0-rc 5    es6-shim     0 35 0    reflect-metadata    0 1 3    rxjs    5 0 0-beta 6    systemjs    0 19 26    bootstrap     3 3 6    zone js     0 6 12

User · Answer

I found the  cross module  answer above very helpful to my situation  but would want to expand on that  as there is another wrinkle to consider  If you have a submodule  it also can t see the pipes in the parent module in my testing  For that reason also  you may need to put pipes into there own separate module    Here s a summary of the steps I took to address pipes not being visible in the submodule    Take pipes out of  parent  SharedModule and put into PipeModule In SharedModule  import PipeModule and export  for other parts of app dependent on SharedModule to automatically gain access to PipeModule  For Sub-SharedModule  import PipeModule  so it can gain access to PipeModule  without having to re-import SharedModule which would create a circular dependency issue  among other problems    Another footnote to the above  cross module  answer  when I created the PipeModule I removed the forRoot static method and imported PipeModule without that in my shared module  My basic understanding is that forRoot is useful for scenarios like singletons  which don t apply to filters necessarily

User · Answer

import   Component  Pipe  PipeTransform   from   angular core     Pipe     name   timePipe     export class TimeValuePipe implements PipeTransform      transform value  any  args   any   any      var hoursMinutes   value split            var hours   parseInt hoursMinutes 0   10     var minutes   hoursMinutes 1    parseInt hoursMinutes 1   10    0    console log  hours    hours     console log  minutes    minutes 60     return  hours   minutes   60  toFixed 2          Component     selector   my-app     templateUrl     app component html     styleUrls      app component css      export class AppComponent     name    Angular     order                  order status    Still at Shop          order id    0 02                      order status    On the way          order id    02 29                      order status    Delivered          order id    16 14                       order status    Delivered          order id    07 30               Invoke this module in App Module ts file

User · Answer

I have created a module for pipes in the same directory where my pipes are present  import   NgModule   from   angular core      import pipe    import   Base64ToImage  TruncateString  from             NgModule           imports              declarations   Base64ToImage  TruncateString           exports   Base64ToImage  TruncateString              export class SharedPipeModule          Now import that module in app module   import  SharedPipeModule  from    pipe shared pipe module    NgModule        imports                  PipeModule forRoot                   Now it can be used by importing the same in the nested module

User · Answer

If you see this error when running tests  make sure you have imported the module the pipe belongs to  e g       beforeEach async      gt            TestBed configureTestingModule               imports   CustomPipeModule               declarations                     providers                                    compileComponents

User · Answer

Make sure you are not facing a  cross module  problem  If the component which is using the pipe  doesn t belong to the module which has declared the pipe component  globally  then the pipe is not found and you get this error message   In my case I ve declared the pipe in a separate module and imported this pipe module in any other module having components using the pipe   I have declared a that the component in which you are using the pipe is   the Pipe Module   import   NgModule        from   angular core    import   myDateFormat            from     directives myDateFormat      NgModule        imports                  declarations     myDateFormat        exports          myDateFormat         export class PipeModule       static forRoot           return             ngModule  PipeModule            providers                          Usage in another module  e g  app module        Import APPLICATION MODULES         import   PipeModule      from    tools PipeModule       NgModule        imports                  PipeModule forRoot

User · Answer

Suggesting an alternative answer here   Making a separate module for the Pipe is not required  but is definitely an alternative  Check the official docs footnote  https   angular io guide pipes custom-pipes     You use your custom pipe the same way you use built-in pipes    You must include your pipe in the declarations array of the AppModule      If you choose to inject your pipe into a class  you must provide it in the providers array of your NgModule    All you have to do is add your pipe to the declarations array  and the providers array in the module where you want to use the Pipe   declarations        CustomPipe         providers        CustomPipe

User · Answer

Note   Only if you are not using angular modules  For some reason this is not in the docs but I had to import the custom pipe in the component  import  UsersPipe  from    users-filter pipe    Component               pipes        UsersPipe

User · Answer

You need to include your pipe in module declaration    declarations    UsersPipe    providers   UsersPipe

User · Answer

Custom Pipes  When a custom pipe is created  It must be registered in Module and Component that is being used  export class SummaryPipe implements PipeTransform    Implementing transform    transform value  string  limit   number   any        if   value            return null            else           let actualLimit limit gt 0 limit 50        return value substr 0 actualLimit                      Add Pipe Decorator   Pipe           name  summary          and refer import   SummaryPipe   from     summary pipe        In Component and Module     lt div gt          text   summary        Name should same as it is mentioned in the decorator   lt  div gt     summary is the name declared in Pipe decorator

User · Answer

For Ionic you can face multiple issues as  Karl mentioned  The solution which works flawlessly for ionic lazy loaded pages is    Create pipes directory with following files  pipes ts and pipes module ts      pipes ts content  it can have multiple pipes inside  just remember to   use  Pipe function before each class  import   PipeTransform  Pipe   from   angular core    Pipe   name   toArray     export class toArrayPipe implements PipeTransform     transform value  args  string     any       if   value  return value      let keys           for  let key in value          keys push   key  key  value  value key                return keys             pipes module ts content  import   NgModule   from   angular core   import   IonicModule   from  ionic-angular   import   toArrayPipe   from    pipes     NgModule     declarations   toArrayPipe     imports   IonicModule     exports   toArrayPipe     export class PipesModule       Include PipesModule into app module and  NgModule imports section  import   PipesModule   from     pipes pipes module    NgModule     imports        PipesModule         Include PipesModule in each of your  module ts where you want to use custom pipes  Don t forget to add it into imports section     Example  file  pages my-custom-page my-custom-page module ts  import   PipesModule   from        pipes pipes module    NgModule     imports        PipesModule        Thats it  Now you can use your custom pipe in your template  Ex     lt div  ngFor  let prop of myObject   toArray  gt    prop key    lt  div gt

[angular] The pipe ' ' could not be found angular2 custom pipe

Examples related to angular

Examples related to angular2-forms

Examples related to angular2-pipe