安装了 npm package 但在浏览器中出现“不是函数”错误

Question

I'm using Ionic 4 and trying to use this lib: https://date-fns.org to get a date string like 2019-11-01 07:23:22 to be displayed in human readable way.

So I've installed the lib with:

npm install date-fns --save

Then in mypage.ts file

import { format, formatDistance, parseISO } from 'date-fns';

And then in mypage.html file

<div class="date">{{ formatDistance(parseISO(h.created_at)) }}</div>

So I'm getting this error in browser console:

ERROR TypeError: _co.parseISO is not a function

It says the function doesn't exists, but it's in the docs: https://date-fns.org/v2.6.0/docs/parseISO

Am I doing something wrong?

Answer 1

In TS file:

import { format, formatDistance, parseISO } from 'date-fns';

constructor(public formatDistance: formatDistance) {
}

This is HTML

<div class="date">{{ formatDistance(parseISO(h.created_at)) }}</div>

Answer 2

Only instance members of the components class can be called from the view.

https://stackoverflow.com/a/41857120/7562674

In Ts File:-

import { Component } from '@angular/core';
import { format, formatDistance, parseISO } from 'date-fns';

export class AppComponent implements OnInit {

formatDistance=formatDistance;
parseISO=parseISO;  
date=  "2018-10-01";
d=new Date(2015, 0, 1)
constructor(){
  console.log(formatDistance(parseISO("2018-10-01"), new Date(2015, 0, 
  1)))
  }

In template:-

  <p>{{formatDistance(parseISO(date),d)}}</p>

I checked this is working.

Declare as variable and assign it instead of injecting in constructor argument. Since it is a function not a class that why showing error not as type when used in constructor.