Angular2 404 Not Found for URL: http://localhost/WebApi2/api/hero

Question

I have tried the http Angular 2 and TypeScript example on https://angular.io/docs/ts/latest/tutorial/toh-pt6.html it works. https://embed.plnkr.co/?show=preview

Upda

Answer 1

I had the same issue, after some frustrating researches I solved the 404 error thanks to this. The order of imports matters.
Hope it helps someone.

Answer 2

I personnaly fought with this for over two weeks before I landed on a post by @mp-loki -- Angular 2 HTTP GET 404 Not Found for URL -- here on stackoverflow: The credit therefore really goes to him (or her, to be safe).

On the Angular setup page (https://angular.io/docs/ts/latest/guide/setup.html), you are greeted with this sentence: "Install the Angular QuickStart seed for faster, more efficient development on your machine."

You probably followed the instructions on that setup page and your project is therefore based on the Angular QuickStart Seed.

There's nothing wrong with that, only that the tutorial given by Angular uses an in-memory web api, and that intercepts all requests to another web api, whether you make a direct call to the in-memory web api from your project code or not.

To make requests to a different web api, you therefore have to disconnect from the in-memory web api. How? Just follow the steps below:

1. In your project root directory, expand node_modules and delete the angular-in-memory-web-api directory
2. Still in your project root directory, open the package.json file and remove the following line from the list of dependencies: "angular-in-memory-web-api": "~0.2.4",
3. In the src/app directory, if the following files exit, or any files related to in-memory, delete them: in-memory-data.service.ts, in-memory-data.service.js, and in-memory-data.service.js.map
4. Open src/app/app.module.ts and remove the following from the list of imports: import { InMemoryWebApiModule } from 'angular-in-memory-web-api';, and import { InMemoryDataService } from './in-memory-data.service';
5. Still in src/app/app.module.ts, remove this line of code from the @NgModule annotation: InMemoryWebApiModule.forRoot(InMemoryDataService),
6. At this stage you should be able to make requests to your web api, but most likely the object returned doesn't have a data property, so you remove it from your service file: Replace:

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

with

getHeroes(): Promise<Hero[]> {
   return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json() as Hero[])
               .catch(this.handleError);
}

I hope this helps.