(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;

  constructor(
    private auth: AuthService,
    @Inject(UserService) private userService: UserService,
    @Inject(HttpClient) private http: HttpClient,
    private auth0: Auth0Service
  ) {}

  onLogin(credentials) {
    const sendReq = this.userService.login(credentials);
}

I've added UserService in providers in App.module

Here's the UserService

@Injectable()
export class UserService {
  constructor(
    @Inject(Auth0Service) private authService: Auth0Service,
    protected http: HttpClient // @Inject(HttpClient) protected http: HttpClient
  ) {}
  login(credentials): Observable<any> {
    console.log(credentials);
    console.log(credentials.username);
    this.http
      .post("http://localhost:3000/api/Users/login", {
        username: credentials.username,
        password: credentials.password
      })
      .subscribe(
        data => {
          console.log(data);
        },
        err => {
          console.log("Something went wrong!");
          console.log(err);
        }
      );
    return credentials;
    // this.auth.login(credentials);
  }
}

Here's the console

    at MergeMapSubscriber._innerSub (mergeMap.js:138)
    user.service.ts:14 
{username: "hamzakpt", password: "hamza"}
    user.service.ts:15
 hamzakpt
    user.service.ts:26 Something went wrong!

    user.service.ts:27
 TypeError: Cannot read property 'length' of null
        at HttpHeaders.applyUpdate (http.js:308)
        at eval (http.js:255)
        at Array.forEach (<anonymous>)
        at HttpHeaders.init (http.js:255)
        at HttpHeaders.forEach (http.js:354)
        at Observable.eval [as _subscribe] (http.js:2153)
        at Observable._trySubscribe (Observable.js:172)
        at Observable.subscribe (Observable.js:160)
        at subscribeToResult (subscribeToResult.js:23)
        at MergeMapSubscriber._innerSub (mergeMap.js:138)

The same get request works in LoginComponent but not in UserService. UserService is global service while Login is in a different module.

I've also added HTTPClientModule in app.module and Login Module.

Solution 1

Don't set Null value in Header

This problem may occur due to null value in header i.e.

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

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

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

Solution 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);
        })
}

Comments

[Alamgir Qazi]

It's giving me this error [ts] Type 'Subscription' is not assignable to type 'Observable<any>'. Property '_isScalar' is missing in type 'Subscription'.

[Alamgir Qazi]

that was caused by a typo. It's giving the same response again

[Alamgir Qazi]

I've figured out the problem. I can't make any http request in the service. Doesn't have anything to do with the code. Maybe some problem with injecting a service?

[Aman Thakur]

Is your problem solved with the above solution? I am also facing the same issue. But on a GET function call not post.

[sneha mahalank]

@Chandru - even I am facing the same issue and I want to subscribe in service itself not in component, so how do I solve this issue.

[Tšeliso Molukanele]

OMG!!! thank you. How on earth are we supposed to know that? Perhaps it would be better for the 'error' to be detected and reported with correct meaning at time of setting the null.