appending header in HttpHeaders from '@angular/common/http' doesn't work

[riyasat]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When we use:

let header = new HttpHeaders();
header.append('abc','22');
console.log(header.get('abc'));

In console we get null

Expected behavior

We should see 22 in console

Minimal reproduction of the problem with instructions

Plunker gives error when I import HttpClientModule. But here are the steps using angular cli

1. ng new httptest -si
2. cd httptest
3. edit package.json
4. replace all old angular version to current angular version which is 4.4.0-RC.0
5. ssave
6. npm install
7. edit app.module.ts

   - import { HttpClientModule } from '@angular/common/http';
   - imports:[HttpClientModule] //Added into existing import

8. edit app.component.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
export class AppComponent {
  title = 'app';
  constructor(private http:HttpClient) {
    this.displayHeaders();
  }
  displayHeaders(){
    let header = new HttpHeaders();
    header.append('abc','22');
    

    console.log(header.get('abc'));
  }

}

9. ng serve -o
10. Check the console for output

What is the motivation / use case for changing the behavior?

no change in expected behavior. We need exact same behavior as 4.3.4

Environment

Angular version: 4.4.0-RC.0

yes it is.
Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.0.0
- Platform:  Windows

Others:

[aurelmegn]

Hi
I have the same issue too, I was oblige to put the result in a variable and use it like:

let header = new HttpHeaders();
let other_header = header.append('abc','22');
console.log(other_header.get('abc')) // output 22

[trotyl]

Working as expected, HttpHeaders is immutable.

[riyasat]

@trotyl I didn't understand your comment. What is expected behaviour for you? for me if we use header.append('abc','22') it should add header to header collection under the hood right ? or I miss understood that?

@shiftSh is not strange? if we have to declare another variable then why should we use header.append why not use

let headerAbc = new HttpHeaders({'abc':'22'});
let headerAbc2 = new HttpHeaders({'abc2':'22'});

I have found Workaround for this problem which is

 
let headers = new HttpHeaders(
{'abc':'22',
'abc2':'111',
'abc4':'444'}
);

console.log(headers.get('abc4'));//output 444

[trotyl]

#18012 (comment)

<!-- Please search GitHub for a similar issue or PR before submitting -->

[jotatoledo]

Do some more research before creating an issue.

https://stackoverflow.com/questions/45286764/angular-4-3-httpclient-doesnt-send-header/45286959#45286959

[riyasat]

@trotyl thanks for pointing me to httpparam bug.
I did searched for http header problems before submitting the issue. Now I see that @alxhub checkin changed the syntax of httpheaders and params. Now append in both cases doesn't work.
According to @cexbrayat

This was fixed by #18490 and released in 5.0.0-beta.6

So should we start using beta and leave the stable version which in this case (common/http) is not stable :)

If we cannot use functions that are on instance of that class why do they exist?

@jotatoledo accepted solution at stackoverflow.
const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');
will not work when adding params or headers with for loop ?

let headers = new HttpHeaders();
for(let i=0;i<=5;i++){
headers.append(i.toString(),i.toString())
}

[trotyl]

The original issue is not a bug, it is fixed for:

whereas the old Http service allowed to use a simple object literal

But nothing changed for HttpParams#append since it's working pretty well.

[riyasat]

If it's working then Perfect.
Do you have working sample link for us?
I followed the documentation https://angular.io/guide/http#configuring-other-parts-of-the-request which only works for one header but not for multiple headers.
Thanks in advance.

[riyasat]

@trotyl @jotatoledo Here is a plunker link with reported bug. If any one can fix would be really nice. May be I am doing something wrong here.
https://plnkr.co/edit/VlaQAG4QLa9z3PS8fKMl

Hope that will help if that's a bug.

[cexbrayat]

Append returns a clone of the headers

angular/packages/common/http/src/headers.ts

Lines 118 to 120 in fa6b802

	append(name: string, value: string|string[]): HttpHeaders {
	return this.clone({name, value, op: 'a'});
	}

So you need to store the result of the append otherwise it will have no effect, something like headers = headers.append(i.toString(),i.toString()); in your plunkr.

Headers and params are immutable in common/http, so this works as intended.

[riyasat]

@cexbrayat thanks for clarifying the concept behind append. For me this sounds bit odd because append means add or extend something to the existing object in context not clone that object in context and return. But I think it's like "Orange is new Black" phrase.

It would be much nicer to create JSON object and pass it to constructor.

let headerJson = {
'abc':'1',
'abc2':'2'
}
let headers = new HttpHeaders(headerJson );

Well anyway, I hope this discussion will help someone like me to figure-out that how it is meant to be working.

👍

[hassanasad]

Just to clarify for others, if you want to use append method of HttpHeaders, use it like:

let headers = new HttpHeaders();
headers = headers.append('Authorization', this.authHeader);
headers = headers.append('Accept', 'application/json');
headers = headers.append('Content-Type', 'application/json');

Unfortunately append doesn't work like one would expect.

[kenisteward]

I don't get how this is working for anyone atm.

swagger-api/swagger-codegen#7342

this issue has this same idea in it and we are properly doing headers=headers.set(); however this.init() is never called when you just do a set which is never setting the internal headers. Am I missing something?

[kenisteward]

Turns out the person still had remnants of the old http module. All is well.