Calling REST api from angular2

Question

I've finished the angular2 heroies tutorial https://angular.io/docs/ts/latest/tutorial/ and now I'am trying to call a ral REST api that i've made with Node, Postgresql and Express.

The angular2 code calling the API looks like this:

...

export class HeroService{

  private heroesUrl = 'http://192.168.4.13:3000/api/boxes'; //URL til api
  private headers = new Headers({'Content-Type': 'application/json'});
  constructor(private http: Http) {}

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

...

The browser console shows:

An error occurred Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…} EXCEPTION: Uncaught (in promise): Response with status: 404 Not Found for URL: null

Picture from REST API

And I can see that my API isen't being called. Any ideas to what I'am missing out?

Best regards.

The error message suggests that you got the URL wrong, i.e. it returns 404. If you are also trying to call .json() on the response then it will fail because the content is not JSON. What is the API URL that you are trying to call? How did you define that API at the server side? — Nikola Stojiljkovic
– Nikola Stojiljkovic, Commented Dec 12, 2016 at 12:34
Unfortunately the API isen't public available, but I've updated my post with a picture, so that you can see the structure of the result from the API. — Tony
– Tony, Commented Dec 12, 2016 at 12:46
This might be silly, but have you tried removing the http:// part from the URL? Also, can you open the browser console, select the network tab and refresh the page where you expect this to be called. That might help with understanding the problem better. — Nikola Stojiljkovic
– Nikola Stojiljkovic, Commented Dec 12, 2016 at 12:48
Then it results in a http 500: Uncaught (in promise): Response with status: 500 Internal Server Error for URL: null — Tony
– Tony, Commented Dec 12, 2016 at 12:52
Can you post the pictures of the browser console -> network with this API call selected? Also, how are you running the angular2 server? Is it served by the same backend, i.e. do they have the same domain? — Nikola Stojiljkovic
– Nikola Stojiljkovic, Commented Dec 12, 2016 at 12:59

Tony · Accepted Answer · 2016-12-12 13:31:37Z

1

I figurd out that I needed to remove these lines for the backend to be called:

// Imports for faking the http service - in-memory web api
import { InMemoryWebApiModule }  from 'angular-in-memory-web-api';
import { InMemoryDataService }   from './in-memory-data.service';

I thought that Angular2 would ignore them when not being used, but the caused the new backend API not to being called.

answered Dec 12, 2016 at 13:31

Tony

1772 gold badges4 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Calling REST api from angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related