angularangular-pipeangular18

json pipe not found in Angular 18


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.


Solution

  • 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.