title: Angular 5 Http Interceptors error when injecting service
body: <p>I am receiving the following strange dependency injection behavior when using custom HttpInterceptors in angular 5+.</p>
  
  <p>The following simplified code works fine:</p>
  
  <pre><code>    export class AuthInterceptor implements HttpInterceptor {
          constructor(private auth: AuthService) {}
  
          intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
              const token = this.auth.getToken();
              return next.handle(req);
          }
      }
      export class AuthService {
          token: string;
          constructor() {
            console.log('AuthService.constructor');
          }
      }
  </code></pre>
  
  <p>HOWEVER....</p>
  
  <p>When the <code>AuthService</code> has 1 or more dependencies on its own e.g.</p>
  
  <pre><code>   export class AuthService {
        token: string;
        constructor(private api: APIService) {
           console.log('AuthService.constructor');
        }
     }
  </code></pre>
  
  <p>angular is trying to repeatedly create new instances of <code>AuthService</code> until I receive the following errors:</p>
  
  <p>The log is displaying the <code>AuthService.constructor</code> message ~400 times</p>
  
  <p>and</p>
  
  <blockquote>
    <p><code>Cannot instantiate cyclic dependency! HTTP_INTERCEPTORS ("[ERROR
    -&gt;]"): in NgModule AppModule</code></p>
  </blockquote>
  
  <p>and </p>
  
  <blockquote>
    <p>app.component.html:44 ERROR RangeError: Maximum call stack size
    exceeded</p>
  </blockquote>
  
  <p>I then tried injecting the service using the Injector class - </p>
  
  <pre><code> export class AuthService {
        token: string;
        api: APIService;
        constructor(private injector: Injector) {
           this.api = this.injector.get(APIService);
           console.log('AuthService.constructor');
        }
     }
  </code></pre>
  
  <p>but getting the same error (maximum call stack size).</p>
  
  <p>The <code>APIService</code> is a simple service that only injects the <code>HttpClient</code> in its constructor.</p>
  
  <pre><code>@Injectable()
  export class APIService {
      constructor(private http: HttpClient) {}
  }
  </code></pre>
  
  <p>Lastly, when I inject the <code>AuthService</code> into the Interceptor using the <code>Injector</code>, the error disappears but the AuthService is being instantiated 200+ times:</p>
  
  <pre><code>export class AuthInterceptor implements HttpInterceptor {
      auth: AuthService;
      constructor(private injector: Injector) {}
      intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
             this.auth = this.auth || this.injector.get(AuthService);
             const token = this.auth.getToken();
             return next.handle(req);
          }
      }
  </code></pre>
  
  <p>Looking at the official documentation and other example it seems as it is technically possible to inject services into the Http Interceptors. Is there any limitation or any other setup that might be missing?</p>