Angular使用InMemoryDbService报api/[something] not found问题排查

报错是多个代码错误+可能的版本适配问题共同导致的，按影响优先级排序：

• 内存API路径大小写不匹配：angular-in-memory-web-api 对数据集名称大小写严格敏感，你在InMemoryDataService.createDb()中返回的数据集key是大写开头的Things，但请求路径写的是全小写的api/things，框架匹配不到对应数据集，直接返回404。
• 代码存在多处命名/语法错误：
  • thing-list.component.ts中注入的服务实例名是小写开头的thingService，ngOnInit里错写成大写开头的ThingService，编译阶段就会触发属性不存在错误
  • 服务中定义的列表查询方法是getThingsList，组件调用时错写成getThingList，方法名不匹配
  • subscribe回调内仅引用了this.Things属性，没有把接口返回值赋值给该属性，即使接口请求成功，页面也拿不到数据
  • thing.service.ts中类型导入错误：写的是import { Things} from './thing';，实际Thing接口定义在./thing/thing路径下，不存在名为Things的导出项，TS编译会报错
• 版本适配问题：Angular 14对应适配的angular-in-memory-web-api版本为0.14.x，如果安装了0.15+或0.13及以下版本，会出现请求拦截器不生效、请求直接透传报404的问题。

按以下顺序修改即可：

1. 统一数据集key和请求路径的大小写，推荐全小写符合REST规范：

   // in-memory-data.service.ts
   createDb() {
     const things: Thing[] = MockThings;
     return { things }; // key改为全小写，和api/things路径对应
   }
   

2. 修复服务中的类型导入错误：

   // thing.service.ts
   // 修正导入路径和类型名
   import { Thing } from './thing/thing';
   

3. 修复组件中的调用和赋值逻辑：

   // thing-list.component.ts
   ngOnInit(): void {
     // 修正服务实例名、方法名，补全赋值逻辑
     this.thingService.getThingsList().subscribe(thingList => this.Things = thingList);
   }
   

4. 校验依赖版本，执行以下命令查看已安装版本：

   npm list angular-in-memory-web-api
   

   如果版本不是0.14.x，执行命令重装适配版本：

   npm uninstall angular-in-memory-web-api
   npm install angular-in-memory-web-api@0.14.0 --save
   

5. 确认模块导入顺序：HttpClientInMemoryWebApiModule必须放在HttpClientModule之后导入，你当前app.module.ts中的顺序符合要求，无需调整；如果ThingService是声明在ThingsModule的providers数组中，需确认ThingsModule也已导入HttpClientModule，避免HTTP客户端初始化失败。

修复完成后重启ng serve，打开浏览器网络面板查看api/things请求返回200状态、控制台正常打印mock列表数据即为修复成功。

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