title: How can I get current language from TranslateService to use in an HttpInterceptor
body: <p>I have noticed that Angular doesn't add the <code>Accept-Language</code> header to requests and I would like to be able to check the language on the backend.</p>
  
  <p>I was trying to do the following:</p>
  
  <p><em>version 1:</em></p>
  
  <pre class="lang-js prettyprint-override"><code>import { TranslateService } from '@ngx-translate/core';
  import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs';
  
  @Injectable()
  export class AuthInterceptor implements HttpInterceptor {
  
      constructor(
          private translateService: TranslateService
      ) {}
  
      intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
          console.debug("Request intercepted by AuthInterceptor.");
          return next.handle(
              req.clone({
                  headers: req.headers.append(
                      "Accept-Language", this.translateService.currentLang
                  )
              })
          );      
      }
  }
  </code></pre>
  
  <p><em>version 2:</em></p>
  
  <pre class="lang-js prettyprint-override"><code>import { TranslateService } from '@ngx-translate/core';
  import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
  import { Injectable, Injector } from '@angular/core';
  import { Observable } from 'rxjs';
  
  @Injectable()
  export class AuthInterceptor implements HttpInterceptor {
  
      constructor(
          private injector: Injector
      ) {}
      intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
          console.debug("Request intercepted by AuthInterceptor.");
          return next.handle(
              req.clone({
                  headers: req.headers.append(
                      "Accept-Language", this.injector.get(TranslateService).currentLang
                  )
              })
          );        
      }
  }
  </code></pre>
  
  <p>But none of this work. I assume that the TranslateService can't be used here, like in a component. If so, then how can I get the selected language and use it in the interceptor?</p>
  
  <hr>
  
  <p><strong>Update:</strong>
  With version 1, I get the following error:</p>
  
  <pre><code>ERROR TypeError: Cannot read property 'length' of undefined
      at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.applyUpdate (http.js:200)
      at http.js:171
      at Array.forEach (&lt;anonymous&gt;)
      at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.init (http.js:171)
      at HttpHeaders.push../node_modules/@angular/common/fesm5/http.js.HttpHeaders.forEach (http.js:236)
      at Observable._subscribe (http.js:1436)
      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 subscribeTo.js:21
      at subscribeToResult (subscribeToResult.js:11)
  </code></pre>