3

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?

Improve this question
4
  • 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. Commented Feb 18, 2017 at 22:38
  • The Plunker link you provided doesn't contain any of your code. Update it to an absolute link Commented Feb 18, 2017 at 22:43
  • Does Angular 2 itself has Promise methods or you're trying to use ES6 (TypeScript ) Promise? Commented Feb 19, 2017 at 7:58
  • The resource does exist I have tested it in IIS. Commented Feb 19, 2017 at 20:12

2 Answers 2

Reset to default
12

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks mtchuente for all your help.
Merci beaucoup, vous venez de me sauvez-là !
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.

Improve this answer

2 Comments

omg thank you! Had the exact same issue. They should really update the documentation.
Truly helpful indeed. Just using the backticks => ` instead of single quotes did the trick. Thanks a ton~

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.