Angular新手求助：用json-server模拟SP API构建POC仪表盘遇问题

嘿，刚接触Angular就搞仪表盘+mock数据，这步子迈得不小嘛😉。既然用json-server代替SP REST API没拿到预期输出，咱们从最基础的点开始排查——新手踩的坑大多都是基础配置或代码细节问题：

别先揪着Angular代码不放，先单独验证mock数据源：

• 直接用浏览器/Postman访问你的json-server接口（比如http://localhost:3000/你的数据节点），看能不能返回结构正确的JSON数据。
• 排查json-server的基础问题：
  • 检查db.json格式是否合法，有没有漏写逗号、括号不匹配这类低级语法错误；
  • 启动命令是否正确，比如json-server --watch db.json --port 3000，注意端口别和Angular默认的4200冲突；
  • 确认代码里请求的路径和db.json里的节点名完全一致，比如db里是"dashboardMetrics": [...]，请求路径就得是/dashboardMetrics。

这是新手最容易忽略的环节：

• 必须在AppModule（或对应的feature module）里导入HttpClientModule！没导入的话，HttpClient根本无法工作，控制台会直接报错。
• 看dashboard.service.ts里的请求代码，比如：

  // 正确的请求写法示例
  getDashboardData() {
    return this.http.get('http://localhost:3000/dashboardMetrics');
  }
  

  要注意：
  • 请求地址要和json-server的地址完全匹配，包括端口、路径；
  • 跨域问题：如果Angular跑在4200，json-server在3000，浏览器会触发CORS限制。解决办法是启动json-server时加--cors参数：json-server --watch db.json --port 3000 --cors。

就算service写对了，组件里没正确订阅也拿不到数据：

• 错误示例（只调用方法不订阅，请求根本不会触发）：

  this.dashboardService.getDashboardData(); // 白忙活！
  

• 正确示例（订阅并处理数据，同时捕获错误）：

  this.dashboardService.getDashboardData().subscribe({
    next: (data) => {
      this.dashboardData = data;
      console.log('拿到的原始数据：', data); // 先打日志确认数据结构
    },
    error: (err) => {
      console.error('请求出错了：', err); // 一定要看错误信息，这是排错关键！
    }
  });
  

  另外，推荐用async管道代替手动订阅，更简洁还能避免内存泄漏：

  // 组件里定义可观察对象
  dashboardData$ = this.dashboardService.getDashboardData();
  // 模板里直接用管道
  // <div *ngFor="let item of dashboardData$ | async">{{item.name}}</div>
  

打开F12的Console标签，红色报错是最直接的线索：

• HttpClient is not provided in any module：没导入HttpClientModule；
• CORS policy：跨域问题，加--cors参数；
• 404 Not Found：请求路径错误，或者json-server里没有对应的数据节点；
• SyntaxError: Unexpected token < in JSON at position 0：返回的不是JSON（大概率是404的HTML页面），说明请求路径错了。

如果这些排查完还是没解决，把dashboard.service.ts、dashboard.component.ts的关键代码，还有db.json的结构，以及控制台的错误信息贴出来，咱们再精准定位！

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