HttpClient: ERROR TypeError: CreateListFromArrayLike called on non-object

[dgroh]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

After adding headers to the cloned request and calling .get I get the following exception:

This is my interceptor:

  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    let request = req.clone({
      setHeaders: {
        ModuleId: this.dnnContext.moduleId,
        TabId: this.dnnContext.tabId
      }
    });

    // Pass on the cloned request instead of the original request.
    return next.handle(request);
  }

@Injectable()
export class ContractService {
  constructor(private httpClient: HttpClient) { }

  public getContracts(): Observable<any> {
    return this.httpClient.get("The Api Url");
  }
}

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: 4.3.6


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[imaksp]

Faced similar issue & found that this error only occurs if you pass Number type value in header
so convert it to string while passing:

const authReq = req.clone({
  headers: req.headers.set('ModuleId', this.dnnContext.moduleId.toString()).set('TabId', this.dnnContext.tabId.toString())
});
// Pass on the cloned request instead of the original request.
return next.handle(authReq);

[dgroh]

@aks0020 it doesn't make sense. It's type safe, if I try to pass a number, it won't transpile at all.

So, in my case it's a string.

[imaksp]

it is type safe but in my case it was coming from global state(class which has 'any' type property)
so it was allowing any type value & it was number
const profileIdHeader = this.appState.userProfile.profileId;
& as it is any type it was not giving any compile error adding toString() fixed for me.

in short if you declare const num:any = 0; & pass num var in header it won't give you compile error, & instead throws same error that you defined in issue

[imaksp]

I suggest you to try passing static string val "test" in both your headers. if you are still facing issue with static val & then your case might be different.

[dgroh]

In my case is already coming as a string, because the types of tabId and moduleId are already string so I think in my case is something different, unfortunately!

[imaksp]

ok then you should try with only one header with fixed val & then 2 headers (req.headers.set('ModuleId', this.dnnContext.moduleId).set('TabId', this.dnnContext.tabId)), just try to narrow down issue as I am not getting any errors with similar code(https://angular.io/guide/http#setting-new-headers) & with 2 string headers now. you might have some other issue with header value like its length/format/encoding.

[dgroh]

Thanks @aks0020 - I created a project apart. as I could not find the issue and it's working now. Closing the issue!

[dgroh]

Wow, @aks0020 you were completely right. The ids were coming in as numeric...

[jagomf]

@aks0020 you made my day!
That causes all sorts of weird and non-sense problems, been looking around for days..!

However, @dgroh I think you should not close this issue, but add the new info. I still believe this should be fixed to avoid getting the TypeError: CreateListFromArrayLike called on non-object.

[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.}