Angular 7中使用inMemoryWebApi出现404错误的求助

先帮你梳理下几个关键问题，这些是导致404和数据为空的核心原因：

1. 绝对URL导致内存API未拦截请求 #

你的sbDocFieldService里用了绝对地址"http://fakeUrl.DoesntMatter/api/"，而In-Memory Web API默认只会拦截相对路径的HTTP请求，绝对路径会直接跳过内存API，发送到真实的（不存在的）服务器，这就是404的根源。

修复方法：把SERVER_URL改成相对路径，比如：

SERVER_URL: string = "/api/";

2. 重复导入内存API模块 #

在app.module.ts的imports里，你同时加了InMemoryWebApiModule.forRoot(...)和HttpClientInMemoryWebApiModule.forRoot(...)——这两个其实是同一个模块的不同导出名称（新版本里推荐用HttpClientInMemoryWebApiModule），重复导入会导致冲突。

修复方法：只保留其中一个，推荐保留：

HttpClientInMemoryWebApiModule.forRoot(sbDocFieldDataService, { delay: 100 })

（加delay参数可以模拟真实网络延迟，可选但推荐）

3. 多余的服务注册 #

你的sbDocFieldDataService已经用@Injectable({ providedIn: 'root' })做了根级注册，而且HttpClientInMemoryWebApiModule.forRoot也会自动注册这个服务，所以不需要再把它加到providers数组里，去掉即可：

providers: [
  EventService,
  { provide: SLIMSCROLL_DEFAULTS, useValue: { alwaysVisible : false } }
  // 移除 sbDocFieldDataService
],

4. 组件调用方法的参数不匹配 #

在AnalysisComponent的getAllDocFields里，你调用了this.fieldService.getFieldsForDocument(4)，但你的服务方法getFieldsForDocument并没有定义参数，这会导致后续如果要根据ID过滤数据时出现问题，现在可以先把组件里的调用改成无参数：

this.fieldService.getFieldsForDocument().subscribe(...)

验证修复后的流程 #

1. 启动应用后，内存API会拦截GET /api/docFields的请求
2. 你的sbDocFieldDataService会返回预设的4条数据
3. 组件订阅后就能正确拿到数据，不会再出现404和空数组的情况

最后再检查下createDb的返回格式，你当前的写法return { docFields: docFields };是完全正确的，也可以简写为return { docFields };，两种都没问题。

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