0

I want to use moment.js for displaying the age of a marker shown in google map in my ionic 2 app. I have installed moment.js as 

npm install --save angular2-moment

The doc of angular2-moment explains how to use amTimeAgo from template. But I couldn't find anything about using it from type script file. So I decided to try it myself.

First I imported TimeAgo pipe in my app.module.ts and provided it

import { TimeAgoPipe } from "angular2-moment";

...........

providers: [
   .............
   TimeAgoPipe
]

But when I create a constructor of this TimeAgoPipe as below by importing this file in a component I get the following error.

CODE : 

import { TimeAgoPipe } from "angular2-moment";
...........
constructor(private timeAgoPipe: TimeAgoPipe) {}

ERROR :

Uncaught (in promise): Error: No provider for ChangeDetectorRef

Dijish U.K
  • 159
  • 1
  • 22

1 Answers1

-2

You need to add

import { ChangeDetectorRef } from '@angular/core';

In module and provide it.

FierceDev
  • 685
  • 6
  • 13
  • Where should I add it? app.module.ts? – Dijish U.K Jul 25 '17 at 12:17
  • Yes, in app.module.ts – FierceDev Jul 25 '17 at 12:20
  • still showing same error – Dijish U.K Jul 25 '17 at 12:22
  • You add ChangeDetectorRef in providers? – FierceDev Jul 25 '17 at 12:24
  • unable to add ChangeDetectorRef in provider. It showing error when I am adding it to provider. – Dijish U.K Jul 25 '17 at 12:34
  • Ok, remove import ChangeDetectorRef. Try to move TimeAgoPipe from providers to declarations – FierceDev Jul 25 '17 at 12:50
  • When I moved TimeAgPipe from providers to declaration I get the following error : Uncaught Error: Type TimeAgoPipe is part of the declarations of 2 modules: MomentModule and AppModule! Please consider moving TimeAgoPipe to a higher module that imports MomentModule and AppModule. You can also create a new NgModule that exports and includes TimeAgoPipe then import that NgModule in MomentModule and AppModule. – Dijish U.K Jul 26 '17 at 04:19
  • Moment module include TimeAgPipe, then you can use it without import – FierceDev Jul 26 '17 at 05:11
  • How do i use TimeAgoPipe without importing it – Dijish U.K Jul 26 '17 at 05:21
  • Try to import TimeAgPipe in component , and use it – FierceDev Jul 26 '17 at 05:23
  • Now app is not showing any error during the initialization of TimeAgoPipe, but I am unable to use transform method of TimeAgoPipe variable. It returns the error - TypeError: Cannot call method 'transform' of undefined – Dijish U.K Jul 26 '17 at 05:43
  • It worked for me when I used momen.js rather than angular2moment by following the tutorial - https://medium.com/@jek.bao.choo/steps-to-add-moment-js-to-angular-cli-f9ab28e48bf0 – Dijish U.K Jul 26 '17 at 06:10
  • 1
    @DijishU.K Using moment directly is exactly what is suggested in duplicate question. You won't be able to use the pipe directly for the reasons mentioned there, neither you should. – Estus Flask Jul 26 '17 at 10:48
  • Importing something in your `AppModule` won't do anything at all, also, you shouldn't have to provide the ChangeDetectorRef, there is most likely something else wrong in the OP – Johan Aspeling Feb 24 '21 at 07:45