title: (TypeError: Cannot read property 'length' of null at HttpHeaders.applyUpdate) Angular 5, Http Client
body: <p>I'm getting this reponse when making an http request in service. </p>
  
  <p>Here's the Login component</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>I've added UserService in providers in App.module</p>
  
  <p>Here's the UserService</p>
  
  <pre><code>@Injectable()
  export class UserService {
    constructor(
      @Inject(Auth0Service) private authService: Auth0Service,
      protected http: HttpClient // @Inject(HttpClient) protected http: HttpClient
    ) {}
    login(credentials): Observable&lt;any&gt; {
      console.log(credentials);
      console.log(credentials.username);
      this.http
        .post("http://localhost:3000/api/Users/login", {
          username: credentials.username,
          password: credentials.password
        })
        .subscribe(
          data =&gt; {
            console.log(data);
          },
          err =&gt; {
            console.log("Something went wrong!");
            console.log(err);
          }
        );
      return credentials;
      // this.auth.login(credentials);
    }
  }
  </code></pre>
  
  <p>Here's the console</p>
  
  <pre><code>    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 (&lt;anonymous&gt;)
          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)
  </code></pre>
  
  <p>The same get request works in LoginComponent but not in UserService. UserService is global service while Login is in a different module. </p>
  
  <p>I've also added HTTPClientModule in app.module and Login Module. </p>