title: Usage of a service from angular HttpInterceptor
body: <p>I am trying to use a singleton service from a HttpInterceptor in order to have an automatic busy loading indicator.</p>
  
  <p>The problem however is that the interceptor works without the service, but not using the service.</p>
  
  <p>I am referencing the service as follows in the constructor of the HttpInterceptor:</p>
  
  <pre><code>constructor(private htbs: HttpBusyService) {}
  </code></pre>
  
  <p>In the app module the service and the HttpInterceptor are provided like this:</p>
  
  <pre><code>providers: [
      HttpBusyService,
      { provide: LocationStrategy, useClass: HashLocationStrategy},
      { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
      MessageService,
      ConfirmationService,
  ]
  </code></pre>
  
  <p>The error i am getting is:</p>
  
  <pre><code>Uncaught Error: Can't resolve all parameters for AuthInterceptor: (?).
      at syntaxError (compiler.js:485)
      at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15664)
      at CompileMetadataResolver._getTypeMetadata (compiler.js:15499)
      at CompileMetadataResolver._getInjectableMetadata (compiler.js:15479)
      at CompileMetadataResolver.getProviderMetadata (compiler.js:15839)
      at eval (compiler.js:15750)
      at Array.forEach (&lt;anonymous&gt;)
      at CompileMetadataResolver._getProvidersMetadata (compiler.js:15710)
      at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15278)
      at JitCompiler._loadModules (compiler.js:34226)
  </code></pre>
  
  <p>I have no clue where to look. I obviously am doing something wrong, because i saw other interceptors using singletons.
  I am using angular 5.1.0-rc.1 but 5.0.0 had the same problem</p>
  
  <p>Any help is much appreciated</p>
  
  <p>Jan</p>
  
  <p>PS1 I have seen <a href="https://stackoverflow.com/questions/46006203/angular-http-interceptor-that-uses-a-service">Angular HTTP Interceptor that uses a Service</a>? but the answer doesn't help<br>
  PS2 I tried rearranging the providers  </p>
  
  <p>EDIT: The Interceptor</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler, HttpEvent,     HttpEventType, HttpErrorResponse } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import { HttpBusyService } from './http-busy.service';
  import 'rxjs/add/operator/do';
  import 'rxjs/add/operator/catch';
  import 'rxjs/Observable';
  import 'rxjs/add/observable/throw';
  
  export class AuthInterceptor implements HttpInterceptor {
  
    constructor(private htbs: HttpBusyService) {}
  
    intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;HttpEventType.Response&gt;&gt; {
    // this.htbs.start();
  const authReq = req.clone({
    setHeaders: { 'X-AUTH-TOKEN': sessionStorage.getItem('token') }
  });
  return next
  .handle(authReq)
  .do((ev: HttpEvent&lt;any&gt;) =&gt; {
    if (ev instanceof HttpResponse) {
      console.log('processing response', ev);
    }
  })
  .catch(response =&gt; {
    // if (response instanceof HttpErrorResponse) {
      console.log('Processing http error', response);
    // }
  
    return Observable.throw(response);
  });
    }
  }
  </code></pre>
  
  <p>and the busy service:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class HttpBusyService {
    public busy = false;
    private count = 0;
    constructor() { }
    public start() {
      this.count++;
      this.busy = true;
    }
    public finish() {
      this.count--;
      if (this.count &lt;= 0) {
        this.count = 0;
        this.busy = false;
      }
    }
  }
  </code></pre>