Angular 18中json管道无法找到问题求助

Angular 18 启用了standalone 优先模式，原有的JsonPipe（即json管道）不再默认全局可用。在旧版本中，JsonPipe包含在CommonModule里，默认模块式项目会自动导入CommonModule所以能直接使用；但在 standalone 组件中，必须显式导入所需的管道才能正常调用。

解决步骤 #

1. 从@angular/common包中导入JsonPipe
2. 在组件的imports数组中添加JsonPipe

修改后的完整代码 #

import {Component} from '@angular/core';
import {bootstrapApplication} from '@angular/platform-browser';
// 导入 JsonPipe
import { JsonPipe } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  // 在 imports 中添加 JsonPipe
  imports: [JsonPipe],
  template: `
    Hello world!
    <p>{{ person | json }}</p>
  `,
})
export class PlaygroundComponent {
  person = {
    name: "Alan",
    position: "full-stack developer",
    salary: 2000
  };
}

bootstrapApplication(PlaygroundComponent);

补充说明 #

如果是模块式项目（非standalone架构），需确保所在模块导入了CommonModule（或BrowserModule，后者包含CommonModule），但Angular 18默认创建standalone项目，因此更推荐上述显式导入的方式。

内容的提问来源于stack exchange，提问作者Luis José Sánchez