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

Updated code to use external Web Api

private headers = new Headers({'Content-Type': 'application/json'});
// private heroesUrl = 'api/heroes';  // URL to web api
private heroesUrl = 'http://localhost/WebApi2/api/hero';  // URL to web api

constructor(private http: Http) { }

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

Now I want to update it to use an external Web Api2 and get the error below.

EXCEPTION: Uncaught (in promise): Response with status: 404 Not Found for URL: http://localhost/WebApi2/api/hero" An error occurred Object { _body: Object, status: 404, ok: false, statusText: "Not Found", headers: Object, type: null, url: "http://localhost/WebApi2/api/hero" }

I have looked at this solution but it does not work for me. Angular2 http get request results into 404

Error on import

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

Http/Http/node_modules/@angular/http/index"' has no exported member 'JSONP_PROVIDERS'.

Could anyone point me in the correct direction, example of calling Web Api2 from Angular2?

That resource doesn't exist on the server. So, either you're using the wrong URL, or it's a server issue, which has nothing to do with Angular. — JB Nizet, Feb 18 '17 at 22:38
The Plunker link you provided doesn't contain any of your code. Update it to an absolute link — ThunderStruct, Feb 18 '17 at 22:43
Does Angular 2 itself has Promise methods or you're trying to use ES6 (TypeScript ) Promise? — Mohammad Kermani, Feb 19 '17 at 07:58

score 12 · Accepted Answer · edited May 23 '17 at 12:32

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:

In your project root directory, expand node_modules and delete the angular-in-memory-web-api directory
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",
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
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';
Still in src/app/app.module.ts, remove this line of code from the @NgModule annotation: InMemoryWebApiModule.forRoot(InMemoryDataService),
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.

Thanks mtchuente for all your help. – mark s Apr 03 '17 at 05:43 — mark s, Apr 03 '17 at 05:43
Merci beaucoup, vous venez de me sauvez-là ! – Anwar Abdelkabir Sep 27 '18 at 10:17 — Anwar Abdelkabir, Sep 27 '18 at 10:17

score 3 · Answer 2 · answered Jul 20 '17 at 07:49

3

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.

answered Jul 20 '17 at 07:49

esseara

834
5
27
47

2

omg thank you! Had the exact same issue. They should really update the documentation. – JP Lew Sep 02 '17 at 04:57
Truly helpful indeed. Just using the backticks => ` instead of single quotes did the trick. Thanks a ton~ – Harshith Rai Jun 24 '19 at 06:37

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

2 Answers2

Linked