Angular 'values Is Undefined' Subscribing To Mapped Http Response (request Not Being Made?)

I have a simple login form component (LoginComponent) that calls the submitLogin method. import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/fo

Solution 1:

The stacktrace I got in the console after replicating your code led me to the 'lazyInit' function within the headers code of Angular's httpClient module (node_modules\@angular\common\esm5\http\src\headers.js).

In the second line of the function, it iterates over the values of the header you're submitting, and you can see the values variable on the third. There it gets one of the headers and accesses it's values. Next it converts it to an array, if it's a string, and then checks it's length - at this point you get the exception.

If you look at your API service, there's two headers you're submitting:

'Content-Type': 'application/json',
'Cookie': this.cookies

And earlier, you define the cookies variable like this:

private cookies: string;

Since you don't assign a value, it defaults to undefined, which is then the value of your 'Cookie' header, which is not a string and also doesn't have a length property, so it's throwing an Exception.

Answer :

Changing the initial definition of cookies to

private cookies = '';

fixes this.

Solution 2:

If any undefined is passed to the headers to the HTTP call this can happen and it may cause other calls to be broken if header is common. Initialize the values with a default empty value. This error message is hard to debug.