TypeError: Invalid attempt to spread non-iterable instance in Angular 10 with string http header

[Borosh]

🐞 bug report

Affected Package

The issue is caused by package @angular/common/http

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular v9

Description

Our interceptor - which worked before - at Angular version 10 started to cause some issues. The source of the issues is the setHeaders property of the update object in the clone() function. According to the http.d.ts file it expects [name: string]: string | string[];, but if I pass in a single string, I will get the following error: TypeError: Invalid attempt to spread non-iterable instance, which is coming from the http module.

If I wrap that string into [], everything starts to work.

🔥 Exception or Error

TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at _nonIterableSpread (nonIterableSpread.js:2)
    at _toConsumableArray (toConsumableArray.js:6)
    at HttpHeaders.applyUpdate (headers.ts:227)
    at headers.ts:191
    at Array.forEach ()
    at HttpHeaders.init (headers.ts:191)
    at HttpHeaders.forEach (headers.ts:256)
    at Observable._subscribe (xhr.ts:98)
    at Observable._trySubscribe (Observable.ts:238)
    at Observable.subscribe (Observable.ts:219)

🌍 Your Environment

Angular Version:

@angular-devkit/architect         0.1001.6
@angular-devkit/build-angular     0.1001.6
@angular-devkit/build-optimizer   0.803.29
@angular-devkit/core              10.1.6
@angular-devkit/schematics        10.1.6
@angular/cdk                      10.2.4
@angular/cli                      10.1.6
@angular/material                 10.2.4
@schematics/angular               10.1.6
@schematics/update                0.1001.6
rxjs                              6.6.3
typescript                        4.0.3

[JoostK]

Hi @Borosh,

could you please share a runnable reproduction that shows this issue?

[gkapris]

https://stackblitz.com/edit/angular-spread-non-iterable

Implementation of the issue in two ways.

1. the request in an service file
2. the request in an interceptor

In both implementations the code works fine.
I look forward to your comments

[gkalpak]

Thx for looking into this @gkapris. I also looked at the source code and it seems that the header value is always coerced to an array if it is a string. Based on that, I'll go ahead and close this issue as non-reproducible.

If you are still running into the problem, @Borosh, please open a new issue providing a minimal reproduction.

[Borosh]

Sorry guys. Totally forgot about this...Thank you very much @gkapris for the help. Probably it was something else then...we don't had a few updates, and we don't have the issue anymore. In the meantime we just wrapped it into an array.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}