Angular教程：InMemoryWebApiModule在0.6.0版本抛出500内部服务器错误

我之前也碰到过这个问题，angular-in-memory-web-api从0.5.x升级到0.6.x带来了破坏性的API变更，你的报错正是这些变更和旧代码不兼容导致的。下面是具体的解决步骤：

angular-in-memory-web-api 0.6.x要求你的项目必须是Angular 6及以上版本。如果你的项目还停留在Angular 5或更低版本，有两个选择：

• 降级回0.5.x版本，执行命令：

  npm install angular-in-memory-web-api@~0.5.0 --save
  

• 升级你的Angular项目到6+版本（如果项目允许的话）

如果你的Angular版本符合要求，问题大概率出在模块导入和内存数据服务的写法上，按照以下步骤修改：

1. 更新导入路径 #

0.6.x版本调整了模块的导入路径，把原来的：

import { InMemoryWebApiModule, InMemoryDbService } from 'angular-in-memory-web-api';

改成：

import { InMemoryWebApiModule, InMemoryDbService } from 'angular-in-memory-web-api/http-client';

2. 检查内存数据服务的createDb方法 #

确保你的InMemoryDataService实现的createDb方法返回一个包含API路径键的对象，键名要和你调用的API路径（去掉前缀api/）一致。示例：

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api/http-client';
import { Hero } from './hero';

@Injectable({
  providedIn: 'root',
})
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const heroes = [
      { id: 11, name: 'Dr Nice' },
      { id: 12, name: 'Narco' },
      // 其他英雄数据...
    ];
    // 返回的键名heroes对应API路径api/heroes
    return { heroes };
  }
}

3. 修正AppModule中的模块初始化 #

在AppModule的imports数组里，确保InMemoryWebApiModule.forRoot的调用方式正确，不需要旧版本的额外参数：

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api/http-client';
import { InMemoryDataService } from './in-memory-data.service';

@NgModule({
  imports: [
    HttpClientModule,
    // 正确的初始化方式
    InMemoryWebApiModule.forRoot(InMemoryDataService)
  ],
  // ...其他模块配置
})
export class AppModule { }

确保你的HeroService中调用的API路径和createDb返回的键名匹配（比如api/heroes对应heroes键，模块会自动处理api/前缀）。示例：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { Hero } from './hero';

@Injectable({ providedIn: 'root' })
export class HeroService {
  private heroesUrl = 'api/heroes';  // 这个路径要和createDb返回的键名对应

  constructor(private http: HttpClient) { }

  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        catchError(this.handleError<Hero[]>('getHeroes', []))
      );
  }

  // ...其他方法
}

如果按照以上步骤修改后问题仍存在，建议清理缓存并重新安装依赖：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

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