Angular 8 : TypeError: Found non-callable @@iterator

Question

When i'am sending http get request then i'am getting these error TypeError: Found non-callable @@iterator,but it works in Angular 7 not in Angular 8.

My Component file
From component.ts file i have called service getCodes()

onSubmit(){
 this.service.getCodes('localhost/Aggregator/getCodes').subscribe (result=>{
 }, error =>{
    console.log(error);
 })
}

My Interceptor file
When i 'am sending request then that time i have passed these header through interceptor

@Injectable()
    export class Interceptor implements HttpInterceptor {
      sessionParam:any = {
        userParam: {
          'a':66,
          'b':101,
          'c':'0201',
          'd':'Y',
          'e':'Y',
          'h':'2019/02/22',
          'f':'Y',
          'g':12
        }
      }

      intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let headers = new HttpHeaders();
        for (var val in this.sessionParam) {
          Object.keys(this.sessionParam[val]).forEach(key => {
            headers = headers.append(key,this.sessionParam[val][key]);
          });
        }
        request = request.clone({
          headers: headers
        })
        return next.handle(request);
      }
    }

My Service file

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { delay, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class ProvidersService {

  constructor(private http:HttpClient) { }

  public getCodes(url, apiParam=null):Observable<any>
  {
    return this.http.get(url, {params: apiParam});
  }
}

I'am getting following error

TypeError: Found non-callable @@iterator
at HttpHeaders.applyUpdate (http.js:301)
at http.js:245
at Array.forEach (<anonymous>)
at HttpHeaders.init (http.js:241)
at HttpHeaders.forEach (http.js:339)
at Observable._subscribe (http.js:1826)
at Observable._trySubscribe (Observable.js:42)
at Observable.subscribe (Observable.js:28)
at subscribeTo.js:20
at subscribeToResult (subscribeToResult.js:7)

any solutions ?

Answer 1

This error occurs when you set headers non-string values. In order to solve convert all header values to string.

Answer 2

I have upgraded from A7 to A8 and experienced same issue.

In my case the code was failing on a row where I used destructuring assignment:

return this.fooPipe.transform(foo, ...args);

-> Error: Found non-callable @@iterator

It has helped me to change tsconfig.json from:

"target": "es2015"

to

"target": "es5"