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.
-
1can i ask about the up right snippet,what is the name of this plugin ?abdoutelb– abdoutelb2017-06-16 15:26:41 +00:00Commented Jun 16, 2017 at 15:26
-
1it's called InMemoryWebApiModule. In the tutorial tell "Rather than require a real API server, this example simulates communication with the remote server by adding the InMemoryWebApiModule to the module imports, effectively replacing the Http client's XHR backend service with an in-memory alternative." you can see the live example here [link] (angular.io/generated/live-examples/toh-pt6/eplnkr.html) but I think it is different version because I don't see the package.json in project structure.Weanich Sanchol– Weanich Sanchol2017-06-16 15:38:08 +00:00Commented Jun 16, 2017 at 15:38
Add a comment
|
2 Answers
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
}
}
1 Comment
Almir Campos
+1: When I really paid attention to that line I realized that I had written '(heroes)' instead of '{heroes}'. Grrrrr!
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.