angular 4 how to http put with If-Match

Question

My script that shall do the work:

updateTask(task:Task){
    const body = task;
    var headers = new HttpHeaders();
    headers.set('Content-Type', 'application/javascript');
    headers.set('If-Match', task.etag);
    return this.httpc.put(this.resources+'/'+task.id, body, { headers: headers });
}

Could anyone take a look at it and tell me if I did something wrong here please? Never tried it before, actually I am beginner to angular :S ( Back-end is not mine so I can't share with you guys :/ )

httpc is a HttpClient :) Thanks your time and answers in advance! ^^.

Edit 1:

Response > {"error":"If-Match header is missing or invalid"}

Edit2:

Request header

PUT /app/data/schedule/tasks/42615 HTTP/1.1
Host: localhost:3000
Connection: keep-alive
Content-Length: 438
Accept: application/json, text/plain, */*
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
Content-Type: application/json
Referer: http://localhost:3000/portal/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: sid=f5eb691a56bfa7b6db05083023c5f4caf044db47c2f29f644bc80d7bb7dcf1f3

What is the error? What is `this.resources`? What contains `Task`? Is javascript script? It is difficult to help you if we do not have more information. you should think to provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Also try to test your query (in this case put) using a rest client in your browser. To be sure, for example, if the URL is well formatted — JTejedor, Dec 08 '17 at 13:01
I have already tested it without angular. I am just not sure where to set the If-Match part. This is a function of a service but it still does not matter because the main thing is not about what is Task or if the url is correct. I could put a simple number so we could say number insted of Task but this wont change the problem itself. I guess I didnt set the If-Match part correctly. (task.etag is a simple etag string like: "3a62ca468a0c07d6040b30a5a263a19a"). Sorry if I am not clear with this :| Just didn't found any Q or example about put with angular when you need to set the If-Match field. — Bálint Réthy, Dec 08 '17 at 13:43
Your problem is related to `task.etag`, because the value is null or is invalid. Check if the header `If-Match` is well formatted and has a proper value. — JTejedor, Dec 08 '17 at 14:00
It has the value I copy pasted into brackets. I copied the request header from chrome but it shows that my header didn't changed at all. — Bálint Réthy, Dec 08 '17 at 14:03
But. Where is the header `If-Match`, this header is mandatory according to the error — JTejedor, Dec 08 '17 at 14:06
This is that I don't know :S I set it with my script here: headers.set('If-Match', task.etag); and task.etag rlly not null/undef its a string x.x — Bálint Réthy, Dec 08 '17 at 14:10
Ok! Don't worry, try another approach. Try create the header like this: `new HttpHeaders({'Content-Type': 'application/javascript', 'If-Match' : task.etag})` and erase the set methods — JTejedor, Dec 08 '17 at 14:20
Yes! This solved the problem :) From me its ok but still not understand why append / set is not working. Thanks your help and patience JTejedor ^^ — Bálint Réthy, Dec 08 '17 at 14:24

score 2 · Accepted Answer · answered Dec 08 '17 at 14:35

Summarizing the great amount of comments to solve this question. The backend does not accept an HTTP PUT command because the headers are not properly setting. So, to fix this problem, you should add both headers properly in your code. There is several ways. I proposed one, based on constructor, but there is more.

Based on constructor:

const header = 
new HttpHeaders({'Content-Type': 'application/javascript', 'If-Match' : task.etag});

Using append method (as this question suggests):

const headers = new HttpHeaders();
headers.append('Content-Type', 'application/javascript');
headers.append('If-Match', task.etag);

Note the change made in the declaration of header. I propose const instead var.

angular 4 how to http put with If-Match

1 Answers1