HttpClientInMemoryWebApiModule配置双模拟数据库报错求助

看起来你在使用Angular的In-Memory Web API模拟两个数据集时遇到了配置冲突，我来帮你一步步解决：

问题根源分析 #

1. 404错误：当你分别配置两个模拟服务时，第二个服务会覆盖第一个的路由配置，导致其中一个API路径无法被识别。
2. TS2554参数错误：HttpClientInMemoryWebApiModule.forRoot()方法仅接受1-2个参数（第一个是自定义的InMemoryDbService类，第二个是可选的配置对象），传入多个服务类会触发类型错误。

正确配置方案 #

要模拟多个数据集，你需要创建一个单一的自定义InMemoryDbService，将两个数据集都包含在其中，而不是分开配置。

步骤1：创建统一的模拟数据服务 #

新建一个app-in-memory-data.service.ts文件，实现InMemoryDbService接口并返回包含两个数据集的对象：

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';

@Injectable({
  providedIn: 'root'
})
export class AppInMemoryDataService implements InMemoryDbService {
  createDb() {
    // 模拟emotions数据集
    const emotions = [
      { id: 1, label: 'Happy', intensity: 0.8 },
      { id: 2, label: 'Sad', intensity: 0.6 }
    ];
    // 模拟faces数据集
    const faces = [
      { id: 1, type: 'Smile', emotionId: 1 },
      { id: 2, type: 'Frown', emotionId: 2 }
    ];
    // 返回包含两个数据集的对象
    return { emotions, faces };
  }
}

步骤2：在AppModule中配置单一服务 #

修改app.module.ts，只将这个统一的服务传入forRoot()方法：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
// 导入InMemory Web API模块和自定义服务
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { AppInMemoryDataService } from './app-in-memory-data.service';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    // 仅传入统一的模拟服务，可选添加配置参数（如延迟）
    HttpClientInMemoryWebApiModule.forRoot(AppInMemoryDataService, { delay: 100 })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

验证调用 #

现在你可以正常访问两个模拟API了：

• 获取emotions：GET /api/emotions
• 获取faces：GET /api/faces

这样既不会出现参数错误，也不会有404找不到路径的问题。

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