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
