Angular In-Memory Web API 404错误排查求助

• 已完整观看并遵循In-memory web API相关视频的所有操作步骤，但调用接口时仍返回404错误，自行排查及搜索资料后未解决问题。
• 附带相关代码文件：组件TS、组件HTML、InMemoryDataService、数据服务、模型类、模块文件。
• 额外疑问：在InMemoryDataService中添加的console.log(users)语句未在浏览器控制台输出，这种情况是否正常？

相关代码片段 #

模型类（示例：user.model.ts） #

// 请粘贴你的模型代码

InMemoryDataService #

// 请粘贴你的InMemoryDataService代码
// 示例：
import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const users = [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' }
    ];
    console.log(users); // 此处日志未输出
    return { users };
  }
}

数据服务（示例：user.service.ts） #

// 请粘贴你的数据服务代码

组件TS（示例：user.component.ts） #

// 请粘贴你的组件逻辑代码

组件HTML（示例：user.component.html） #

<!-- 请粘贴你的组件HTML代码 -->

模块文件（示例：app.module.ts） #

// 请粘贴你的模块配置代码

排查方向 #

1. 检查依赖安装与模块配置
   确认已执行npm install angular-in-memory-web-api --save，且在模块中正确导入并配置：

   import { HttpClientModule } from '@angular/common/http';
   import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
   import { InMemoryDataService } from './in-memory-data.service';
   
   @NgModule({
     imports: [
       HttpClientModule,
       // 注意forRoot的配置，不要重复导入该模块
       HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 0 })
     ]
   })
   export class AppModule { }
   

2. 验证请求路径匹配性
   请求URL需与InMemoryDataService返回的键名一致，比如返回{ users }，则请求路径应为'/api/users'（默认前缀是/api，可通过配置修改），路径拼写错误会直接导致404。

3. 关于console.log(users)未输出的问题
   这种情况不正常，说明InMemoryDataService的createDb方法未被执行，可能原因：

   • 模块中HttpClientInMemoryWebApiModule配置错误，导致服务未初始化；
   • HTTP请求发起时机早于In-memory服务初始化（可尝试添加delay配置，或确保请求在组件ngOnInit中触发）；
   • InMemoryDataService未添加@Injectable()装饰器（部分版本要求必须添加）。

4. 确认请求工具正确性
   必须使用Angular的HttpClient发起请求，废弃的Http无法被In-memory Web Api拦截，会直接请求真实后端导致404。

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