Angular 9读取JSON文件AccessToken报错：Cannot read properties of undefined

1. 当前实现方式是否正确？ #

这种分层调用（子组件→模型类→方法→JSON文件）的思路本身没问题，但报错说明具体实现存在细节漏洞——要么JSON读取未完成/失败，要么调用时数据未正确初始化，要么键名/变量名存在拼写错误。不能直接判定方式错误，得结合具体代码细节排查。

2. 正确读取JSON文件的代码示例 #

根据不同运行环境，提供两种常见场景的实现：

前端（Vue/React等）场景 #

方式1：静态导入（适用于src目录下的静态JSON）

// 直接导入JSON文件
import mapReportConfig from './path/to/mapReportConfig.json';

// 模型类实现
class MapReportConfigModel {
  static getMapConfig() {
    return mapReportConfig;
  }
}

// 子组件中调用
const config = MapReportConfigModel.getMapConfig();
console.log(config.accessToken);

方式2：异步fetch读取（适用于public目录下的JSON）

class MapReportConfigModel {
  static async getMapConfig() {
    const res = await fetch('/mapReportConfig.json'); // public目录下直接用根路径
    return res.json();
  }
}

// 子组件中异步调用
async function loadConfig() {
  const config = await MapReportConfigModel.getMapConfig();
  console.log(config.accessToken);
}
loadConfig();

Node.js后端场景 #

const fs = require('fs/promises');

class MapReportConfigModel {
  static async getMapConfig() {
    const fileContent = await fs.readFile('./mapReportConfig.json', 'utf8');
    return JSON.parse(fileContent);
  }
}

// 调用
MapReportConfigModel.getMapConfig().then(config => {
  console.log(config.accessToken);
});

3. 若方式正确，解决报错的步骤 #

针对TypeError: Cannot read properties of undefined (reading 'accesToken')报错，按以下顺序排查：

• 检查键名拼写：报错里写的是accesToken（少了一个s），确认JSON文件里的键名是accessToken还是accesToken，代码变量名必须和JSON键名完全一致。
• 确认数据读取状态：在getMapConfig()方法里打印返回值，看是否拿到了正确的JSON对象，还是返回undefined/null。如果是异步方法，必须用await或.then()等待结果，不能同步直接访问。
• 验证模型类调用方式：如果getMapConfig()是实例方法（非静态方法），必须先实例化MapReportConfigModel再调用：

  // 错误写法：直接调用实例方法
  const config = MapReportConfigModel.getMapConfig();
  // 正确写法：先实例化
  const model = new MapReportConfigModel();
  const config = model.getMapConfig();
  

• 检查文件路径：确认JSON文件的路径是否正确，前端注意相对路径层级，Node.js注意相对于项目根目录的路径。
• 校验JSON格式：确保JSON文件语法正确，没有逗号错误、引号不匹配等问题，否则解析后会返回undefined或抛出语法错误。

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