andrewpoyntz / time-ago-pipe

An Angular pipe for converting a date string into a time ago

time-ago-pipe

A really simple, lightweight Angular pipe for converting a date string into a time ago

Time Range	Output
0 - 45 seconds	a few seconds ago
45 - 90 seconds	a minute ago
90 seconds - 45 minutes	X minutes ago
45 - 90 minutes	an hour ago
90 minutes - 22 hours	X hours ago
22 - 36 hours	a day ago
36 hours - 25 days	X days ago
25 - 45 days	a month ago
45 - 345 days	X months ago
345 - 545 days (1.5 years)	a year ago
546 days+	X years ago

Installation

npm install time-ago-pipe --save

Usage

It can be imported into your angular project, as you would for any other library.

In the @NgModule you want to use it in

import {TimeAgoPipe} from 'time-ago-pipe';

add "TimeAgoPipe" to your declarations

@NgModule({
	imports: [... etc ...],
	declarations: [..., TimeAgoPipe, ... ]
})

---

In your component templates you can just do:

<span>{{your_date | timeAgo}}</span>

where "your_date" is a local date string, which could be parsed by the standard Js Date()

If this value is null or not parsable as a date, then the pipe will display nothing

time-ago-pipe's Issues

TimeAgoPipe does not compile with Angular 5

Hello,

i wanted to launch build in prod mode with ng build prod
i got this error:

ERROR in : Cannot determine the module for class TimeAgoPipe in /home/gh_action/cca-front-end/node_modules/time-ago-pipe/time-ago-pipe.d.ts! Add TimeAgoPipe to the NgModule to fix it. TypeError: Cannot read property 'flags' of undefined

dispite, it is imported and exported in my module.

here is my Project configuration after running ng -v

    _                      _                 ____ _     ___

  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.7.4
Node: 14.17.5
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
TimeAgoPipe version: 1.3.2
@angular/cdk: 5.2.5
@angular/cli: 1.7.4
@angular/material: 9.2.4
@angular-devkit/architect: 0.1102.14
@angular-devkit/build-angular: 0.1102.14
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/build-webpack: 0.1102.14
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Error during --prod --aot build

Hello. I get error when I build as --prod --aot with angular cli. Here is console output.

ERROR in Error: Cannot determine the module for class TimeAgoPipe in D:/WorkSpace/improver/browser/node_modules/time-ago-pipe/time-ago-pipe.ts! Add TimeAgoPipe to the NgModule to fix it.
at syntaxError (D:\WorkSpace\improver\browser\node_modules@angular\compiler\bundles\compiler.umd.js:1729:34)
at analyzeAndValidateNgModules (D:\WorkSpace\improver\browser\node_modules@angular\compiler\bundles\compiler.umd.js:24306:15)
at AotCompiler.analyzeModulesAsync (D:\WorkSpace\improver\browser\node_modules@angular\compiler\bundles\compiler.umd.js:23937:46)
at CodeGenerator.codegen (D:\WorkSpace\improver\browser\node_modules@angular\compiler-cli\src\codegen.js:32:14)
at Function.NgTools_InternalApi_NG_2.codeGen (D:\WorkSpace\improver\browser\node_modules@angular\compiler-cli\src\ngtools_api.js:73:30)
at _donePromise.Promise.resolve.then (D:\WorkSpace\improver\browser\node_modules@ngtools\webpack\src\plugin.js:386:44)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

webpack: Failed to compile.

Feature request: extract format to an argument to allow cusomisation

Hi, I see the formatting part is hard-coded in this pipe, is there any possibility to allow users to customise the formatting.

Could auto update as time progresses

At the moment, it'll update whenever Angular 2's change detection runs, but maybe it shouldn't rely on this & auto update when time actually changes
the frequency of update time checks could be based on how long ago it was too - i.e. if the time was x hours ago, it probably doesn't make sense to check every minute!

Time ago pipe is lagging the GUI in Angular due to all the update checks

Angular 9 is giving me alot of warnings about mouseevent and its lagging the GUI. I did some investigation to see what was causing it and it turns out it was time-ago-pipe

Feature request: support for passing in a number to the pipe

Some IDEAs (latest Intellij) will complain when passing a number to the pipe (since its transform method accepts only a string)

Date's constructor does support passing a number, so in runtime this works. It also passes compilation by the angular template compiler, the only issue is IDEA warning and future risk angular template compiler may fail the compilation based on type checking

Suggested fix in pull request: #28

not exported member

Hi,
I have implement this pipe but showing this error.
node_modules/time-ago-pipe/time-ago-pipe"' has no exported member 'TimeAgoPipeModule'.
Is it work with angular5.
How to resolve..?

Library not ready for AOT

This library is not ready for aot compilation by ngc. It throws this error during AOT compilation
Error: Unexpected value 'TimeAgoPipe' declared by the module 'AppModule'

From what ic ould find its missing a file called ".metadat.json". It is required for aot compilation of any angular 2 library. You can read it all about here -
https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.dugqwr8za

Support for i18n?

Not working in IE 11

its not working in IE 11

Error with latest version (1.2.1)

ERROR in Error: Metadata version mismatch in /node_modules/time-ago-pipe/time-ago-pipe.d.ts, found version 4, expected 3,

question: how to use this pipe in a different languages?

Is there a way this pipe display the time or in a local language?

It doesn't work on safari Version 11.0.3

I noticed on safari Version 11.0.3 it doesn't appear to work at all with no errors.

doesn't work with angular 9 version

I have an error in console, when try to import TimeAgoPipe and add to module declarations.

So, little "crutch" like that solved my problem

...
import { TimeAgoPipe } from 'time-ago-pipe';

@Pipe({
    name: 'timeAgo',
    pure: false
})
export class TimeAgoExtendsPipe extends TimeAgoPipe {}

@NgModule({
    declarations: [
        TimeAgoExtendsPipe,
...

Not Convert

cannot convert this format in ionic 3

/Date(1530357388933)/

I18n support

How will translate into different languages?

Support abbreviation like 1d3h.

13 hours ago still too long, 13h is better in some env.

Expression has changed after it was checked

Ocassionally, getting similiar errors:

Expression has changed after it was checked. Previous value: '16 minutes ago'. Current value: '17 minutes ago'.

I believe it is related to the pipe relaying on timer to support real-time scenario.
Is it possible to disable real-time updates?

"badly packaged library"

I'm seeing this error when doing AOT compilation:

ERROR in ./node_modules/time-ago-pipe/index.ts
Module build failed: Error: C:\Users\David\Code\...\node_modules\time-ago-pipe\index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).

According to the error, it seems like the problem is that there's no JS in the package, so it's actually trying to compile the package as well when compiling my code, which shouldn't be done.

According to Google, the "right" way to package an Angular module is described here: https://goo.gl/jB3GVv

Feature request: support future times

Currently it shows the diff in "xxx ago" which can be confusing at times.

Cheers :)

Divide by zero exception results in odd message

let seconds = Math.round(Math.abs((now.getTime() - d.getTime()) / 1000));

If those values are the same you get a message NAN years until it updates. We're able to generate this message because of some client side updates that remove any delay that would otherwise exist between fetching data on the server and displaying it.

Metadata version mismatch for module /node_modules/time-ago-pipe/time-ago-pipe.d.ts, found version 4, expected 3

Hi, I am using time-ago-pipe version 1.3.2 with angular 4.4. But now to build for production, I receive the following error.

Metadata version mismatch for module /node_modules/time-ago-pipe/time-ago-pipe.d.ts, found version 4, expected 3

Which version of this library will match with angular 4.4

ERROR in No Pipe decorator found on TimeAgoPipe

I've got the aforementioned error when running ng serve --aot
Angular version is 5.1.1.

No error when serving with just ng serve

Add ability to disable to realtime updates

might not be necessary for everyone, so would be good to be able to turn it off

testing component with pipe

Trying to test component but have error
{{[ERROR ->] moment | amTimeAgo }}

The pipe 'amTimeAgo' could not be found ("}}

TestBed.configureTestingModule({
  declarations: [
    Component,
    TimeAgoPipe
  ]
})
  .compileComponents();

}));

How I can test component with it?