JSON pipe in Angular 2 is not working

Question

When I try to pipe my data by JSON pipe I get the following error in the console:

Unhandled Promise rejection: Template parse errors:
The pipe 'json' could not be found (...

What am I doing wrong?

Answer 1

Most likely you forgot about importing CommonModule:

import { CommonModule } from '@angular/common';


@NgModule({
    ...
    imports: [ CommonModule ]
    ...
})

As noted in the comments, do this in the module where you're using the json pipe.

Answer 2

In my case CommonModule was added, but the component was not part of declaration of any module

(I was creating component dynamically by using ContainerRef)

Answer 3

Your parent Module of the component should be like this.

import {NgModule} from '@angular/core';
import {AuditTrailFilterComponent} from './components/audit-trail-filter/audit-trail-filter.component';

import {CommonModule} from '@angular/common'; <-- This is important !!!!

@NgModule({
  imports: [
    CommonModule, <-- This is important !!!!
  ],
  declarations: [AuditTrailFilterComponent],
  exports: [
    AuditTrailFilterComponent
  ]
})
export class AuditTrailModule {
}