title: Angular 4: Cannot instantiate cyclic dependency! InjectionToken_HTTP_INTERCEPTORS
body: <p>I know, this question may sound duplicate and I have tried everything found on stackover flow unable to resolve this problem, so <em>please bear with me</em></p>
  
  <p>To make you able to reproduce the error I am providing you the whole code thought this </p>
  
  <p><a href="https://github.com/bansalvks/simpleAngular4App" rel="noreferrer"><strong>Github Repo</strong></a></p>
  
  <p><strong>Problem</strong></p>
  
  <p>I am getting the following error:</p>
  
  <blockquote>
    <p>Provider parse errors:↵Cannot instantiate cyclic dependency!
    InjectionToken_HTTP_INTERCEPTORS ("[ERROR ->]"): in NgModule AppModule
    in ./AppModule@-1:-1</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/qt9Y6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qt9Y6.png" alt="enter image description here"></a></p>
  
  <p><strong>Information about the scenario (Notes)</strong></p>
  
  <p><strong>Note 1</strong>
  File: <a href="https://github.com/bansalvks/simpleAngular4App/blob/master/src/app/shared/interceptors/response-interceptor/response-interceptor.service.ts" rel="noreferrer">response-interceptor.service.ts</a></p>
  
  <p>Path: <code>./src/app/shared/interceptors/response-interceptor/</code></p>
  
  <p>I am intercepting the <code>HTTPClient</code> responses to check the <code>401</code> error and when the error comes I need to ask user to re-login.</p>
  
  <p>To show the re-login prompt to user I have made a <code>global-functions-services</code> that has a function 'relogin'</p>
  
  <p><strong>Note 2</strong>
  File: <a href="https://github.com/bansalvks/simpleAngular4App/blob/master/src/app/shared/services/helper-services/global-function/global-function.service.ts" rel="noreferrer">global-function.service.ts</a></p>
  
  <p>Path: <code>./src/app/shared/services/helper-services/global-function/</code></p>
  
  <p>Here is the place where this all started to happen...
  As soon as I am injecting the <code>PersonService</code></p>
  
  <pre><code>  constructor(
      public dialog: MatDialog,
      private _personService: PersonService
    ) { }
  </code></pre>
  
  <p>I am getting this error and in <a href="https://github.com/bansalvks/simpleAngular4App/blob/master/src/app/shared/services/api-services/person/person.service.ts" rel="noreferrer">PersonService</a> I cannot find any <code>import</code> that can cause the issue.</p>
  
  <p><strong>PersonService</strong>:<br>
  <code>./src/app/shared/services/api-services/person/person.service.ts</code></p>
  
  <pre><code>import { IRequest } from './../../../interfaces/I-request';
  import { environment } from 'environments/environment';
  import { Injectable } from '@angular/core';
  
  // for service
  import 'rxjs/add/operator/map'
  import 'rxjs/add/operator/toPromise';
  
  // models
  import { Person } from 'app/shared/models/person';
  import { RequestFactoryService, REQUEST_TYPES } from 'app/shared/factories/request-factory/request-factory.service';
  
  @Injectable()
  export class PersonService {
    private _requestService: IRequest;
  
    constructor(
      _requestFactoryService: RequestFactoryService
    ) {
      this._requestService = _requestFactoryService.getStorage(REQUEST_TYPES.HTTP);
    }
  
    public signup(record): Promise&lt;Person&gt; {
      let url = environment.api + 'person/public/signup';
  
      return this._requestService.post(url, record)  as Promise&lt;Person&gt;;;
    }
  
    public authenticate(code: string, password: string): Promise&lt;Person&gt; {
      let url = environment.api + 'auth/signin';
  
      let postData = {
        code: code,
        password: password
      }
  
      return this._requestService.post(url, postData) as Promise&lt;Person&gt;;
    }
  }
  </code></pre>
  
  <p><strong>Request</strong> </p>
  
  <p>Please suggest a solution for this, I have already wasted 2 days to figure out the issue but no luck.</p>
  
  <p>Many thanks!! in advance</p>