Under my Angular6 app , i'm using HttpClient with some headers injection to my htpp calls to fetch data from my backend server :

My service :

@Injectable()
export class LoadUserInfosService {

  public _headers = new HttpHeaders().set('Content-Type', 'application/json');

  constructor(private httpClient: HttpClient) {}

  getUserPnsInfos(cuid): Observable<object> {
    const headers = this._headers.append('login', login);
    return this.httpClient.get(myBackUrl, {headers: headers});
  }
}

My ponent where i'm subscribing to it :

loadUserInfosFromPns(login) {
    this.loadUserInfosService.getUserPnsInfos(login).subscribe(infos => {
      let receivedInfos: any;
        receivedPnsInfos = infos ;
        console.log(receivedPnsInfos);
        if (pnsInfos !== null && receivedPnsInfos.cuid === cuid ) {
        } else {
          this.router.navigate(['unauthorized'], {skipLocationChange: true});
        }
      },
      error => {
        console.log(error);
      });
  }

when running on Chrome or IE11 i'm getting some error refering to my request headers:

TypeError: Cannot read property 'length' of null
    at HttpHeaders.push../node_modules/@angular/mon/fesm5/http.js.HttpHeaders.applyUpdate (http.js:199)
    at http.js:170
    at Array.forEach (<anonymous>)
    at HttpHeaders.push../node_modules/@angular/mon/fesm5/http.js.HttpHeaders.init (http.js:170)
    at HttpHeaders.push../node_modules/@angular/mon/fesm5/http.js.HttpHeaders.forEach (http.js:235)
    at Observable._subscribe (http.js:1445)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:161)
    at subscribeTo.js:21
    at subscribeToResult (subscribeToResult.js:6)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:127)

this error appears only in Chrome and IE11 - while under Firefox the request get well and i'm not getting it

Any ideas , suggestions ?

Under my Angular6 app , i'm using HttpClient with some headers injection to my htpp calls to fetch data from my backend server :

My service :

@Injectable()
export class LoadUserInfosService {

  public _headers = new HttpHeaders().set('Content-Type', 'application/json');

  constructor(private httpClient: HttpClient) {}

  getUserPnsInfos(cuid): Observable<object> {
    const headers = this._headers.append('login', login);
    return this.httpClient.get(myBackUrl, {headers: headers});
  }
}

My ponent where i'm subscribing to it :

loadUserInfosFromPns(login) {
    this.loadUserInfosService.getUserPnsInfos(login).subscribe(infos => {
      let receivedInfos: any;
        receivedPnsInfos = infos ;
        console.log(receivedPnsInfos);
        if (pnsInfos !== null && receivedPnsInfos.cuid === cuid ) {
        } else {
          this.router.navigate(['unauthorized'], {skipLocationChange: true});
        }
      },
      error => {
        console.log(error);
      });
  }

when running on Chrome or IE11 i'm getting some error refering to my request headers:

TypeError: Cannot read property 'length' of null
    at HttpHeaders.push../node_modules/@angular/mon/fesm5/http.js.HttpHeaders.applyUpdate (http.js:199)
    at http.js:170
    at Array.forEach (<anonymous>)
    at HttpHeaders.push../node_modules/@angular/mon/fesm5/http.js.HttpHeaders.init (http.js:170)
    at HttpHeaders.push../node_modules/@angular/mon/fesm5/http.js.HttpHeaders.forEach (http.js:235)
    at Observable._subscribe (http.js:1445)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:161)
    at subscribeTo.js:21
    at subscribeToResult (subscribeToResult.js:6)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:127)

this error appears only in Chrome and IE11 - while under Firefox the request get well and i'm not getting it

Any ideas , suggestions ?

• javascript
• angular
• rest
• google-chrome
• angular-httpclient

Share Improve this question Follow edited Jul 18, 2018 at 13:07 firasKoubaa asked Jul 13, 2018 at 11:21 firasKoubaafirasKoubaa 6,8772929 gold badges8787 silver badges163163 bronze badges 3

• What kind of value hold the login variable (which does not seem to be declared)? And what if you use append instead of set ? – David Commented Jul 13, 2018 at 12:13
• it s a string : example : "fczb1938" – firasKoubaa Commented Jul 13, 2018 at 13:13
• @David same thing for set and append : it goes well with Firefox but not in chrome and IE11 – firasKoubaa Commented Jul 13, 2018 at 13:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 12

It is probably caused because you are settting an undefined / null header in some http request.

I got same problem but when refresh page, I was hit the require API and this issue I have resolved by referring some of the examples and add the below lines to httpClient(http:httpClient)

 return this.http.get('url, {header}).pipe(
        retry(1), catchError(this.handleError)
      )

retry and catch error are imported from rxjs operator

import { catchError, map, retry } from 'rxjs/operators';

handleError is the function to handle the error

This resolve the error for me