Time ago pipe in ionic V4 with Angular

I want to use time ago pipe in my ionic project but i'm getting this error whenever i use the pipe in my HTML:

Uncaught (in promise): Error: Template parse errors: here is my pipe code

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

@Pipe({ name: 'timeAgo' })
export class TimeAgoPipe implements PipeTransform {
  transform(d: any): string {
let currentDate = new Date(new Date().toUTCString());
let date = new Date(d + "Z");

let year = currentDate.getFullYear() - date.getFullYear();
let month = currentDate.getMonth() - date.getMonth();
let day = currentDate.getDate() - date.getDate();
let hour = currentDate.getHours() - date.getHours();
let minute = currentDate.getMinutes() - date.getMinutes();
let second = currentDate.getSeconds() - date.getSeconds();

let createdSecond = (year * 31556926) + (month * 2629746) + (day * 86400) + (hour * 3600) + (minute * 60) + second;

if (createdSecond >= 31556926) {
  let yearAgo = Math.floor(createdSecond / 31556926);
  return yearAgo > 1 ? yearAgo + " years ago" : yearAgo + " year ago";
} else if (createdSecond >= 2629746) {
  let monthAgo = Math.floor(createdSecond / 2629746);
  return monthAgo > 1 ? monthAgo + " months ago" : monthAgo + " month ago";
} else if (createdSecond >= 86400) {
  let dayAgo = Math.floor(createdSecond / 86400);
  return dayAgo > 1 ? dayAgo + " days ago" : dayAgo + " day ago";
} else if (createdSecond >= 3600) {
  let hourAgo = Math.floor(createdSecond / 3600);
  return hourAgo > 1 ? hourAgo + " hours ago" : hourAgo + " hour ago";
} else if (createdSecond >= 60) {
  let minuteAgo = Math.floor(createdSecond / 60);
  return minuteAgo > 1 ? minuteAgo + " minutes ago" : minuteAgo + " minute ago";
} else if (createdSecond < 60) {
  return createdSecond > 1 ? createdSecond + " seconds ago" : createdSecond + " second ago";
} else if (createdSecond < 0) {
  return "0 second ago";
}
  }
}

my AppModule:

import { TimeAgoPipe } from  './pipes/time-ago.pipe';
@NgModule({
  declarations: [TimeAgoPipe],
  ...],
  bootstrap: [AppComponent]
})

my HTML:

<h2>{{today | timeAgo}}</h2>

Solution

TLTR: add the pipe to the declaration array on the module of the component that is using it.

You can use the pipes in two ways: as services using the DI or in templates as you're doing.

In the first case, to use the pipe as a service in all the app, adding it to the app.module providers will be fine.

That's not the same when using the pipe in the template: in this case, you need to declare the pipe in the module is used.

My usual approach to this is to create a pipe module like the following

const PIPES = [TruncatePipe, CapitalizeFirstPipe, ReplacePipe, FormatAgeRangePipe];

@NgModule({
  declarations: PIPES,
  exports: PIPES,
})
export class PipesModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: PipesModule,
      providers: PIPES,
    };
  }
}

with all my shared custom pipes. I can add it to the app.module with forRoot() to inject them as services, plus I can just import the pipe.module when I need the pipe in the template of a specific component in a module.