JSON pipe in Angular 2 is not working - json

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 {
}

Answer 4

This can also occur if you declare your component in a Lazy module and try to add the component to a route that hasn't caused that module to be loaded.
eg. I just had this error with:
children: [
{
path: 'editor',
loadChildren: () => from(import(/* webpackChunkName: "editor" */ '../editor/editor.module').then(m => m.EditorModule))
},
{
path: 'multi-preview',
component: MultiPreviewerComponent // declared in Editor.module (lazy loaded)
}
]

Answer 5

For me,
I had to add it on the under the providers in the app.module.ts
#NgModule({
providers: [
{ provide: JsonPipe }, <-- This is important !!!!