Angular 8序列化对象报Converting circular structure to JSON错误如何解决

你遇到的TypeError: Converting circular structure to JSON错误是因为原生JSON.stringify不支持处理存在自引用的循环结构对象，按照优先级推荐以下解决方案：

方案1：自定义原生序列化规则（优先推荐，无第三方依赖） #

直接利用JSON.stringify的第二个replacer参数实现循环引用过滤，可控性最高，不需要引入额外依赖：

// 自定义序列化工具函数，可直接放到公共工具类复用
function stringifyWithoutCircular(target: any, indent?: number): string {
  const visited = new WeakSet();
  return JSON.stringify(target, (key, value) => {
    if (typeof value === 'object' && value !== null) {
      if (visited.has(value)) {
        // 循环引用字段可按需返回，比如返回null、自定义标记或者直接删除
        return null;
      }
      visited.add(value);
    }
    return value;
  }, indent);
}

// 调用示例
const circularObj = { /* 你的带循环引用的结构化对象 */ };
// 序列化
const serializedStr = stringifyWithoutCircular(circularObj, 2);
// 反序列化得到无循环引用的普通对象
const plainObj = JSON.parse(serializedStr);

优势：

• 完全基于原生API实现，无额外包体积开销
• 可以按需自定义循环引用的处理逻辑，适配不同业务场景
• 不受Angular版本限制，兼容性最好

方案2：使用structuredClone原生API #

如果你的项目兼容的浏览器版本支持structuredClone（Chrome 98+/Firefox 94+/Safari 15.4+，后台管理类项目通常满足兼容要求），可以直接通过深拷贝直接得到处理好循环引用的对象，不需要走序列化反序列化流程：

const originObj = { /* 带循环引用的原对象 */ };
// 自动处理循环引用，直接返回深拷贝后的普通对象
const noCircularObj = structuredClone(originObj);

优势：

• 原生API性能优于第三方库实现
• 自动保留循环引用关系，不会丢失对象字段的关联

方案3：第三方库实现（适配低版本兼容场景） #

如果需要兼容低版本浏览器且需要保留完整的引用关系，可使用flatted库，注意必须使用库配套的序列化/反序列化方法，不能混用原生JSON.parse，否则会出现格式错误：

// 导入flatted提供的方法
import { stringify, parse } from 'flatted';

const originObj = { /* 带循环引用的原对象 */ };
// 序列化
const serializedStr = stringify(originObj);
// 反序列化得到保留引用关系的普通对象
const resultObj = parse(serializedStr);

内容的提问来源于stack exchange，提问作者RoyBarOn