Angular 2 "Expression has changed after it was checked"

Question

I'm using moment in my app and it shows "X Minutes ago" label this way:

{{comment.created_at | amTimeAgo}}

The number of minutes is updated automically (1 minute later it will be X-1 Miuntes ago".

When I'm away from the app, I'm trying to access it but I get the following error:

platform-browser.umd.js:962 ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: '8 Minutes ago'. Current value: '9 Minutes ago'

I read the data (date) once, in a method, from my API.

searchPeople(name)
{
    this.loading = true;
    this.http.get(this.BASE_URL + 'mode=search&name='+name)
      .map((res:Response) => res.json())
      .subscribe(
        data => {       
            this.loading = false;
            this.people = data;
            this.searchedName = name;
        },
        error => {
          console.log(error.text());
        }
      );
}

How I can fix that?

Answer 1

The problem is caused from the pipe amTimeAgo to return differnt output for the same input. Obviously you compare comment.create_at with Date.now() and that results in different output when time goes by.

That's an impure pipe and you need to tell Angular that by setting pure: false:

@Pipe({ 
  name: 'amTimeAgo',
  pure: false
})
class AmTimeAgoPipe {
  ...
}