[Solved] Pipe not found in custom component

Ionic Framework ionic-v3
1

Hi guys,

I am using pipes in my app - inside pages they work fine, but when i try to use it in the template of custom component, i get an error

Error: Uncaught (in promise): Error: Template parse errors:
The pipe ‘min2duration’ could not be found

I have the pipes grouped in pipes module:

import { NgModule } from '@angular/core';
 

// Pipes
import { DayMonth } from './dates/day-month'
import { Weekday  } from './dates/weekday';
import { Min2duration  } from './dates/min2duration';
import { HighlightPipe } from './highlight/highlight'
@NgModule({
  declarations: [
    
    DayMonth,
    Weekday,
    HighlightPipe,
    Min2duration
  ],
  imports: [
     
  ],
  exports: [
    DayMonth,Weekday,HighlightPipe,Min2duration
  ]
})
export class PipesModule {}

Inside the component:

...
import { PipesModule } from '../../pipes/pipes.module';
@NgModule({
  declarations: [
    Filters 
  ],
  imports: [
    IonicPageModule.forChild(Filters),PipesModule 
  ],
  exports: [
    Filters  
  ]
})
export class FiltersComponentModule {}

Am i missing something?

1 Like
2

Not sure if related, but having PipesModule in the app module’s providers doesn’t make any sense to me.

1 Like
3

@rapropos - you are right, i was trying everything possible&impossible, the app.modules.ts entry is completely irrelevant/non-funcitonal - on the pages the pipes are working fine just with entry in page module imports…

I’m still at loss with the components, no matter what i do i can’t get the pipes working there

4

PipesModule goes in imports. Also, the PipesModule modue.ts file needs to export PipesModule.

5

This is what i am doing, still getting

Unhandled Promise rejection: Template parse errors:
The pipe ‘min2duration’ could not be found

With the exact same approach for the pages the pipes are working fine inside templates, the only difference is i am using
@IonicPage decorator there… I’m sure i must’ve missed something simple… :frowning:

6

What does the min2duration module look like?

7 
import { Pipe, PipeTransform } from '@angular/core';

/**
 * Generated class for the Min2durationPipe pipe.
 *
 * See https://angular.io/docs/ts/latest/guide/pipes.html for more info on
 * Angular Pipes.
 */
@Pipe({
  name: 'min2duration',
})
export class Min2duration implements PipeTransform {
 
  transform(input: number) {
    var hrs = Math.floor(input / 60);
    var min = (input % 60);
    return hrs + "h " + min + "m";
  }
}
8

That’s the module file?

9

Min2Duration is just a pipe i’m trying to use inside the custom component.

I’m wrapping it in PipesModule which is pasted in my first post along with other pipes so i don’t have to import them one by one.

10

I think this issue might be related to this -> https://github.com/ionic-team/ionic/issues/7621

I am using the custom component inside the modal - sadly the proposed solution is no longer supported… :frowning:

1 Like
11

I found a workaround, which i don’t believe is a proper solution, but serves the purpose…

I my component i import the pipe directly and create a wrapper function which i use in the template:

component:

import { Component } from '@angular/core';
import { Min2duration  } from '../../pipes/dates/min2duration';
 
@Component({
  templateUrl:  'template.html',
  
})
export class CustomComponent {
    constructor() {
   ...
  }

  min2duration(val){
    var m2d = new Min2duration();
    return m2d.transform(val)
  }
   
}

then in the template:

<ion-label range-left>{{ min2duration(timeFilter['range']['lower'])   }}</ion-label>
12

The solution is actualy very simple - i’ve made a rookie mistake by not importing my PipesModule in the NgModule of the page, where i tried to use my custom component. Instead i’ve tried to import the PipesModule inside my customcomponent.module.ts - this obviously didn’t work.

1 Like
13

I know this one is marked as solved, here is a similar problem i had, which ive spent the last few hours struggling to figure out. It might help other newbies like me.

I couldn’t understand why my pipe worked in one project, but when i moved the code to a new project it didnt work.

kept getting error about ‘name_of_my_pipe’ not being found

i had correctly ensured/created the following using the ‘generate’ command from the CLI
my_pipe.ts
pipes.module.ts
listpage.ts (listpage is my homepage)
listpage.module.ts (listpage is my hompage

and ensure the following was in the llistpage.module.ts
import { PipesModule } from ‘…/…/pipes/pipes.module’;

I finally realised my app.module.ts was declaring/exporting my ‘home-page’ twice once as ‘MyApp’ and the also as ‘ListPage’ (i am a complete novice, basically hacking together something from some example code, it looks like when i created the page ‘ListPage’ using the ionic CLI (which was already the home-page in the app) it auto added the normal page code and references to the app.module.ts)

anyways here is my original app.module.ts (only relevant imports shown)

import { MyApp } from './app.component';
import { ListPage } from '../pages/list/list';
import { InfoPage } from '../pages/info/info';
import { MyService } from '../services/rest/service';

@NgModule({
  declarations: [
    MyApp,
    ListPage,
    InfoPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ListPage,
    InfoPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    MyService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

once i removed the references to ListPage (which remember is already my app home page as declared in app.component.ts

my custom pipe was now recognised

import { MyApp } from './app.component';
import { InfoPage } from '../pages/info/info';
import { MyService } from '../services/rest/service';

@NgModule({
  declarations: [
    MyApp,
    InfoPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    InfoPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    MyService,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
14

Fine!, my conclusion is that if you don’t have all pages with lazy loading you can NOT import pipes in app.module.ts you need to import your custom pipe in your-page.module.ts. Otherwise you should import it in app.module.ts

15

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.

2 Likes
16

@tumain

Your solution worked for me. I have a component (Comp-A) that is declared in the ComponentsModule and then the ComponentsModule is imported by a Lazy Loaded page. My pipe is used by that first component (Comp-A) and Angular could not find my pipe until I put my PipesModule in my ComponentsModule as an import.

Thank you! How did you figure that out?

1 Like
17

Great! Glad it worked for you too. I just remembered doing a lot of trial and error I think, then suddenly having a eureka moment.

18

Worked for me too. Thanks :slight_smile:

1 Like