In a clean project in Angular 18 the pipe "json" is not working.
import {Component} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';
@Component({
selector: 'app-root',
standalone: true,
template: `
Hello world!
<p>{{ person | json }}</p>
`,
})
export class PlaygroundComponent {
person = {
name: "Alan",
position: "full-stack developer",
salary: 2000
};
}
bootstrapApplication(PlaygroundComponent);
I get the following error:
✘ [ERROR] NG8004: No pipe found with name 'json'. [plugin angular-compiler]
This code worked perfectly in previews versions of Angular.
There are no examples of json pipe in the Angular 18 official docs.
You need to add JsonPipe
to your component's imports
:
@Component({
selector: 'app-root',
standalone: true,
imports: [JsonPipe],
template: `
Hello world!
<p>{{ person | json }}</p>
`,
})
In previous versions of Angular this wasn't necessary, because for all generated modules CommonModule
was imported, which includes a basic set of pipes & directives, such as *ngIf
or json
. However this isn't included anymore by default, in order to encourage usage of control flow. For more details, check the pull request which removed CommonModule
from the schematics.