Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unable to make http request with Angular 2 rc5

I've just upgraded to Angular 2 RC 5 and for a reason I can't figure out, I cannot make any http request (ie. the request is never made / doesn't show up in browser logs).

This is code that worked until today's upgrade.

console.log("Let's call github");
let url = 'https://raw.githubusercontent.com/angular/angular/master/LICENSE';
return this.get(url).do(d=>console.log('success'));

When my component calls the function containing this code, Let's call github is output, but then the request is not made. I'm sure that Observable and Http from @angular/http are imported properly since this same code worked this morning. My first thought was that I was missing the HttpModule, but I've confirmed that I import it into my main AppModule

In fact, if I comment out the HttpModule import, it makes no difference I can see. The error is the same, as follows:

Exception: TypeError: this._body is null

Here is an excerpt of the stack trace (at the bottom is the line calling the function quoted above): enter image description here

like image 371
BeetleJuice Avatar asked Aug 12 '16 02:08

BeetleJuice


People also ask

How do I make an HTTP request in angular?

Modern browsers support two different APIs for making HTTP requests: the XMLHttpRequest interface and the fetch () API. The HttpClient in @angular/common/ http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers.

What is httpclient API in angular 12?

This step by step guide helps you ascertain the usage, implementation, on top of that, the benefits of HttpClient API in the Angular 12 application. It also enables you to answer how to make HTTP (HTTP POST, GET, PUT, and DELETE) Requests. Angular is a powerful and profound framework to makes the frontend job easy for frontend developers.

How to handle multiple asynchronous requests with angular's HTTP service?

Fetching numerous asynchronous requests and managing them can be tricky but with the Angular's Http service and a little help from the included RxJS library, it can be accomplished in just a few of lines of code. There are multiple ways to handle multiple requests; they can be sequential or in parallel. In this post, we will cover both.

How do I connect to back end services in angular?

Communicating with backend services using HTTP link Most front-end applications need to communicate with a server over the HTTP protocol, in order to download or upload data and access other back-end services. Angular provides a client HTTP API for Angular applications, the HttpClient service class in @angular/common/ http.


Video Answer


1 Answers

Update 2016-08-12

This has been addressed and will probably be fixed in the next release. A current workaround is to skip the content-type setting on GET requests, or to explicitly set body='' as a request option.

Link: Gihub discussion

Original answer

The error seems to be with a block of code in a function I run before each http request. Because the API I interact with expects JSON content, I have the following (options refers to the RequestOptions object used with every request):

//set content to JSON
if(!options.headers.has("Content-Type")){
    options.headers.append("Content-Type", "application/json")
}

If I comment out these lines, the request is made successfully. So I'm thinking that starting with Angular 2 rc 5, this block throws an error if the request body is empty (as is the case with my get request from the OP).

If my intuition is correct, this change in behavior is caused by this commit (new to rc 5)

fix(http): convert objects passed to requests into a string

I bet that when I set the content-type header, Angular tries to be helpful and stringify the request body for me. Of course there is none with a GET, hence the error.

like image 148
BeetleJuice Avatar answered Oct 08 '22 16:10

BeetleJuice