title: Cannot read property 'length' of null on Angular Service method call?
body: <p>I'm modifying an existing Angular project (not mine), adding a new call to my external API.</p>
  
  <p>This is the service method: </p>
  
  <pre class="lang-js prettyprint-override"><code>getUserName(): Observable&lt;any&gt; {
      return this.http.get&lt;any&gt;(environment.apiUrl + URLS.USER_NAME)
  }
  </code></pre>
  
  <p>And I use it on <strong>appcomponent.ts</strong> as following:</p>
  
  <pre class="lang-js prettyprint-override"><code>this.userService.getUserName().subscribe((name) =&gt; { 
    this.user = name
  })
  </code></pre>
  
  <p>When executing I get the following error: </p>
  
  <blockquote>
    <p>core.js:1673 ERROR TypeError: <strong>Cannot read property 'length' of null</strong>
        at <strong>HttpHeaders</strong>.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.applyUpdate
    (http.js:199)
        at http.js:170
        at Array.forEach ()
        at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.init
    (http.js:170)
        at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.forEach
    (http.js:235)
        at <strong>Observable._subscribe</strong> (http.js:1435)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe
    (Observable.js:43)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe
    (Observable.js:29)
        at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call
    (map.js:18)
        at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe
    (Observable.js:24)</p>
  </blockquote>
  
  <p>It seems to be a headers problem or some subscribe/observable error, but I can't find where the error is.</p>
  
  <ul>
  <li>Is there something wrong with my code?</li>
  <li>It could be an existing interceptor that is modifying the request?</li>
  </ul>
  
  <p>Note that the exception is thrown before making the request, so it must be a client problem when creating that request.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>This is the only interceptor I found:</p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class TenantHttpInterceptor implements HttpInterceptor {
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
      if (req.url.indexOf(environment.apiTFSmin) === -1) {
        let tenantReq = req.clone({ headers: req.headers.set('current', sessionStorage.getItem('current')) })
        if (sessionStorage.getItem('tenant') != null &amp;&amp; sessionStorage.getItem('newTenant') == null) {
          tenantReq = tenantReq.clone({ headers: tenantReq.headers.append('Tenant', sessionStorage.getItem('tenant')) })
        } else if (sessionStorage.getItem('newTenant') != null) {
          tenantReq = tenantReq.clone({ headers: tenantReq.headers.append('Tenant', sessionStorage.getItem('newTenant')) })
          sessionStorage.removeItem('newTenant')
        }
        if (req.method === 'POST' || req.method === 'PUT') {
          tenantReq = tenantReq.clone({ headers: tenantReq.headers.append('Content-Type', 'application/json') })
        }
        return next.handle(tenantReq)
      } else {
        const tenantReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + btoa('pescanilla-ext:m12345678*')) })
        // const tenantReq = req.clone()
        return next.handle(tenantReq)
      }
    }
  }
  </code></pre>