Angular Tour of Heroes教程：InMemory Web API遇HTTP 500错误

Hey there! I’ve hit this exact snag while working through the HTTP section of Tour of Heroes, so let’s break down the most likely fixes for your issue:

1. Check Version Compatibility Between Angular and InMemory Web API #

This is the #1 culprit for the "Object(...) is not a function" error. The angular-in-memory-web-api package has strict version matching with Angular:

• For Angular 12+, use angular-in-memory-web-api@0.12.x or newer
• Older Angular versions require older corresponding packages

First, check your package.json to see the installed version. If it’s mismatched, update it with:

npm install angular-in-memory-web-api@latest --save

2. Verify Your InMemoryDataService Implementation #

Double-check that your service correctly implements the InMemoryDbService interface and uses the right syntax:

• Make sure you implement InMemoryDbService and define the createDb() method (not a property!)
• The createDb() method must return an object with your dataset key (in this case, heroes)

Here’s the correct implementation example:

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

@Injectable({ providedIn: 'root' })
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const heroes = [
      { id: 11, name: 'Dr Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' }
      // Add other sample heroes here
    ];
    return { heroes }; // Critical: key must match your API endpoint ('api/heroes')
  }

  // Optional: Auto-generate IDs for new heroes (as per the tutorial)
  genId(heroes: Hero[]): number {
    return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11;
  }
}

3. Confirm AppModule Setup #

Ensure you’ve imported and configured the modules in the right order (HttpClientModule first, then InMemoryWebApiModule):

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

import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
// Import other components as needed

@NgModule({
  declarations: [AppComponent, HeroesComponent],
  imports: [
    BrowserModule,
    HttpClientModule, // Must come before InMemoryWebApiModule
    InMemoryWebApiModule.forRoot(InMemoryDataService, { dataEncapsulation: false })
    // dataEncapsulation: false ensures responses match the tutorial's expected format (no wrapping object)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Check HeroService HTTP Calls #

Make sure your HeroService is using the correct endpoint and injecting HttpClient properly:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Hero } from './hero';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class HeroService {
  private heroesUrl = 'api/heroes'; // Matches the key returned by InMemoryDataService

  constructor(private http: HttpClient) { }

  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl);
  }
}

After checking these points, restart your dev server (ng serve) and refresh the browser. This should resolve the 500 errors and load your hero data correctly.

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