TypeError: Found non-callable @@iterator - Migration of Angular 7 to 8 (upgrading Ionic: 4.6.0 > 4.7.1)

Troubleshoot migration problems

TypeError: Found non-callable @@iterator

TypeError: Found non-callable @@iterator

The non-descriptive error message Found non-callable @@iterator, for new Angular 8 user like me, has made the upgrading journey a difficult experience.

And my finding, the cause of the problem above is due to the way interceptor written in Angular 7.

Causes: HttpRequest's headers "set"

I noticed the use of request.headers.set() causing the issue above. My sample code (causes):

intercept(req: HttpRequest, next: HttpHandler): Observable> {
  let headers = req.headers;
  const sampleToken = 'SAMPLE_TOKEN';
  headers = req.headers.set('Authorization', sampleToken);

  return next.handle(req.clone({ headers }));
}

After multiple trial and error, the only way to resolve is avoid using the same way to add header with such solution.

Solution: Headers modification

- on one single header modification, do the following

const yourToken = 'YOUR_TOKEN';
const apiReq = req.clone({
  headers: new HttpHeaders({'Authorization', yourToken})
});
return next.handle(apiReq);

- on multiple headers modification, do the following

const headers = { Authorization: authToken };
const apiReq = req.clone({
  setHeaders: headers
});
return next.handle(apiReq);

P/S: header value must be in string value