How to properly import the pipe in ionic 4 and angular 7?

Question

I have generated my custom 'completedOn' pipe with ionic CLI:

ionic g pipe completedOn

and it automatically generated two files. First is completed-on.pipe.ts

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

@Pipe({
  name: 'completedOn'
})
export class CompletedOnPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    console.log(args);
    return value;
  }
}

Second is completed-on.pipe.spec.ts

import { CompletedOnPipe } from './completed-on.pipe';

describe('CompletedOnPipe', () => {
  it('create an instance', () => {
    const pipe = new CompletedOnPipe();
    expect(pipe).toBeTruthy();
  });
});

and CompletedOnPipe is imported in app.module.ts

@NgModule({
  declarations: [AppComponent, CompletedOnPipe],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, 
FormsModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: UrlInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

However, if I try to use completedOn pipe, I am getting this error:

<ion-row *ngFor="let item of data | completedOn"></ion-row>

Uncaught (in promise): Error: Template parse errors: The pipe 'completedOn' could not be found

I tried also by creating new file main-pipe.module.ts

import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";
import {CompletedOnPipe} from "./completed-on.pipe";

@NgModule({
  declarations:[CompletedOnPipe],
  imports:[CommonModule],
  exports:[CompletedOnPipe]
})

export class MainPipe{}

and if I import this module in app.module.ts

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

there is same error.

This is my ionic info output

Ionic:

   ionic (Ionic CLI)             : 4.9.0
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : not available

Can't find a solution to properly import pipe and use it. Any suggestions?

Is the component where you are using this pipe lazy loaded? If so, you have to declare the pipe in the NgModule where this lazy loaded components is declared. — Christian Benseler, Feb 04 '19 at 14:32

score -1 · Answer 1 · answered Feb 04 '19 at 15:08

-1

Whe creating a pipe using the command ionic g pipe completedOn it will also create a module called completedOn.module.ts. You need to import the module in order to use the pipe.

import {CompletedOnPipeModule} from "./completed-on.pipe.module";
    @NgModule({
      declarations: [...],
      entryComponents: [],
      imports: [..., CompletedOnPipeModule],
      providers: [...],
      bootstrap: [AppComponent]
    })

answered Feb 04 '19 at 15:08

dominik

26
2
5

2

It automatically imported CompletedOnPipe in app.module.ts and did not created this module. – Ante Ereš Feb 04 '19 at 15:10
Well, i think the problem is that you can't use the pipe in *ngFor. Have you tried it with a simple `
{{ item | completedOn}}
` to check if its really the pipe that isn't working. – dominik Feb 04 '19 at 15:20
Don't think so, I just tried add pipe in p element and that did not worked. Same error here – Ante Ereš Feb 04 '19 at 15:22
Mind to share your `app.component.html` if thats the fille your working in? – dominik Feb 04 '19 at 15:35

How to properly import the pipe in ionic 4 and angular 7?

1 Answers1