Angular4のHTTPでデータが取得できない

以下を参考にAngular4のHTTPについて勉強中です。
https://angular.io/tutorial/toh-pt6
サイトを参考にしてみたのですが★箇所で、ブレイクを張ってみているのですが
herosはからとなってしまいます。
何か設定が足りない箇所はありますでしょうか？

◆hero.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpService } from './http.service';

import { Hero } from './hero';

@Component({
～～
})

export class HeroComponent implements OnInit {


  heros: Hero[] = [];

  constructor(private httpService: HttpService) { }

  ngOnInit(): void {
    this.httpService.get()
      .then(heroes => this.heros = heroes.slice(1, 5));★

  }
}

◆http.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { Hero } from './hero';

@Injectable()
export class HttpService {

  private headers = new Headers({ 'Content-Type': 'application/json' });

  constructor(private http: Http) { }

  get(): Promise<Hero[]> {
    return this.http.get('api/heroes')
      .toPromise()
      .then(response => response.json().data as Hero[])
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

◆hero.ts

export class Hero {
  id: number;
  name: string;
}

◆app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { AppRoutingModule } from './app-routing.module';

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroComponent }      from './hero.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroComponent,
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

◆in-memory-data.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const heroes = [
      { id: 0,  name: 'Zero' },
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' }
    ];
    return {heroes};
  }
}

◆更新（10/3)
karamarimoさまからのご指摘を受け、内容を修正しました。
また、◎箇所が「this.http.get('api/test')」となっていたため、
修正したところデータが取得できました。
◆http.service.ts

  get(): Promise<Hero[]> {
    return this.http.get('api/heroes')◎
      .toPromise()
      .then(response => response.json().data as Hero[])
      .catch(this.handleError);
  }

「this.http.get('XXXX')」で指定するxxxxは
InMemoryDataService とどのように結びついているのでしょうか？