How to use in built angular pipes inside ionic component

The pipe 'date' could not be found

Here is my ComponentsModule
`
import { NgModule } from ‘@angular/core’;

import { FromToComponent } from ‘./from-to/from-to’;

@NgModule({

declarations: [FromToComponent],

imports: [],

exports: [FromToComponent]

})

export class ComponentsModule {}
`

My FromToComponent

`
import { Component, Input } from ‘@angular/core’;
import { ShipmentInterface } from ‘…/…/interfaces/shipments’;
import { TranslateService } from ‘@ngx-translate/core’;

@Component({
selector: ‘from-to’,
templateUrl: ‘from-to.html’
})
export class FromToComponent {

@Input()
public shipment: ShipmentInterface;

constructor(public translate: TranslateService) {

}

}

`

and template

`
<ul class=“trackhistory”>

<li class=“primary full”>

<div class=“date”>

<span style=“font-weight:700;font-size: 12px”>{{ shipments.pickup_at | date : ‘shortDate’ }}</span>

<h5 style=“margin-top: 4px;”><span class=“ion-clock”></span> {{ shipments.pickup_at | date: ‘shortTime’ }}</h5>

</div>

<div class=“description” >

<p style=“padding-bottom: 24px;”>{{ shipments.pickup_address.addressee }}</p>

</div>

</li>

<li class=“primary full”>

<div class=“date”>

<span style=“font-weight:700;font-size: 12px”>{{ shipments.deliver_at | date : ‘shortDate’ }}</span>

<h5 style=“margin-top: 4px;”><span class=“ion-clock”></span> {{ shipments.deliver_at | date: ‘shortTime’ }}</h5>

</div>

<div class=“description”>

<p>{{ shipments.delivery_address.addressee }}</p>

</div>

</li>

</ul>
`
I am building a ionic app and got into the problem where I cannot use angular build in date pipe.

I hate the notion of “ComponentsModule” in general, but try declaring DatePipe as a provider in it if you insist on keeping it.

See: Ionic 3 filtering, sorting and pipes