(TypeError: Cannot read property 'length' of null at HttpHeaders.applyUpdate) Angular 5, Http Client

Question

I\'m getting this reponse when making an http request in service.

Here\'s the Login component

export class LoginComponent {
  credentials: Credentials;
         


        

Answer 1

Don't set Null value in Header

I faced this kind of issue. The problem was in header, I was pushing null value i.e.

cloned = req.clone({
    headers: req.headers.append('token', token) // token is null
})

to fix this, I check token before setting into header i.e.

if (token) {
    cloned = req.clone({
        headers: req.headers.append('token', token)
    })
}

Answer 2

try like this :

service.ts

login(credentials): Observable<any> {
    return this.http.post("http://localhost:3000/api/Users/login", {
        username: credentials.username,
        password: credentials.password
    }).map(data => data.json())
}

component.ts

onLogin(credentials) {
    this.userService.login(credentials)
        .subscribe(data => {
            console.log('data', data);
        }, (error) => {
            console.log('error', error);
        })
}