CODEWITHSUNDEEP
javascriptangularnpm
Weanich Sanchol
Weanich Sanchol

Reputation: 164

angular-in-memory-web-api page not found in Angular 4.2.2 CLI web-api

I'm learning Angular framework (using version 4.2.2) and follow the tutorial Tour of Heroes. In the HTTP section,The tutorial use angular-in-memory-web-api for simulate web api server and I try to use it but it's not working. The message from the browser's console tell me Response with status: 404 Not Found for URL: api/heroes I installed angular-in-memory-web-api by node install npm i angular-in-memory-web-api and this is my code (it's same as the tutorial)implement in-memory-web-api for api/heroes import module what I miss from the project.

Upvotes: 3

Views: 1424

Answers (2)

panwiktor
panwiktor

Reputation: 41

Check app/in-memory-data.service.ts, where createDb() method returns api endpoints. Returned object uses ES6 syntax Object destructuring, which binds heroes array to a "heroes" field in the object.

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}; // !!!pay attention to this line; it creates api/heroes rest endpoint
  }
}

Upvotes: 4

Weanich Sanchol
Weanich Sanchol

Reputation: 164

In the morning it can run successfully. In the picture(import module), I deleted option {apiBase:""} in InMemoryWebApiModule when imports it and reorder HttpModule and InMemoryWebApiModule.

Upvotes: 0

Related Questions