title: How to properly import the pipe in ionic 4 and angular 7?
body: <p>I have generated my custom 'completedOn' pipe with ionic CLI:</p>
  
  <pre><code>ionic g pipe completedOn
  </code></pre>
  
  <p>and it automatically generated two files.
  First is <strong>completed-on.pipe.ts</strong></p>
  
  <pre><code>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;
    }
  }
  </code></pre>
  
  <p>Second is <strong>completed-on.pipe.spec.ts</strong></p>
  
  <pre><code>import { CompletedOnPipe } from './completed-on.pipe';
  
  describe('CompletedOnPipe', () =&gt; {
    it('create an instance', () =&gt; {
      const pipe = new CompletedOnPipe();
      expect(pipe).toBeTruthy();
    });
  });
  </code></pre>
  
  <p>and <strong>CompletedOnPipe</strong> is imported in <strong>app.module.ts</strong></p>
  
  <pre><code>@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 {}
  </code></pre>
  
  <p>However, if I try to use completedOn pipe, I am getting this error:</p>
  
  <pre><code>&lt;ion-row *ngFor="let item of data | completedOn"&gt;&lt;/ion-row&gt;
  </code></pre>
  
  <p><strong><em>Uncaught (in promise): Error: Template parse errors:
  The pipe 'completedOn' could not be found</em></strong></p>
  
  <p>I tried also by creating new file <strong>main-pipe.module.ts</strong></p>
  
  <pre><code>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{}
  </code></pre>
  
  <p>and if I import this module in app.module.ts</p>
  
  <pre><code>@NgModule({
    declarations: [...],
    entryComponents: [],
    imports: [..., MainPipe],
    providers: [...],
    bootstrap: [AppComponent]
  })
  </code></pre>
  
  <p>there is same error.</p>
  
  <p>This is my <strong>ionic info</strong> output</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Can't find a solution to properly import pipe and use it.
  Any suggestions?</p>