title: How to solve the circular dependency
body: <p>I have 3 services:</p>
  
  <blockquote>
    <p>auth.service.ts, account.service.ts, http.service.ts</p>
  </blockquote>
  
  <p>While user signup I should create new account therefore I imported account.service.ts to auth.service.ts. I should do it because I use signup form data for creating a new account.</p>
  
  <pre><code>@Injectable()
  export class AuthService {
    constructor(public accountService: AccountService) {}
  
    signUp(name: string, phone: string, email: string, password: string): void {
  
      ...
  
    userPool.signUp(phone, password, attributeList, null, (err: any, result: any) =&gt; {
    if (err) {
  
      ...
  
      return;
    }
  
    this.accountService.createAccount(name, phone, email).subscribe(res =&gt; {
  
      ...
  
      this.router.navigate(['/auth/confirmation-code']);
    });
  });
  </code></pre>
  
  <p>}</p>
  
  <p>So as I use AWS Cognito I should add an authorization token from auth.service.ts to http.service.ts
      therefore I imported auth.service.ts to http.service.ts.</p>
  
  <pre><code>@Injectable()
  export class HttpService {
    private actionUrl: string;
    private headers: Headers;
    private options: RequestOptions;
  
    constructor(
      public _http: Http,
      public authService: AuthService 
    ) {
      this.actionUrl = 'https://example.com/dev';
      this.headers = new Headers();
  
      this.authService.getAuthenticatedUser().getSession((err: any, session: any) =&gt; {
        if(err) return;
        this.headers.append('Authorization', session.getIdToken().getJwtToken());
      });
  
      this.headers.append('Content-Type', 'application/json');
      this.headers.append('Accept', 'application/json');
      this.headers.append('Access-Control-Allow-Headers', 'Content-Type, X-XSRF-TOKEN');
      this.headers.append('Access-Control-Allow-Origin', '*');
  
      this.options = new RequestOptions({ headers: this.headers });
    }
  
      get(request: string): Observable&lt;any&gt; {
          return this._http.get(`${this.actionUrl}${request}`)
              .map(res =&gt; this.extractData(res))
              .catch(this.handleError);
     }
  </code></pre>
  
  <p>In my account.service.ts I should use http.service.ts for creating new account.</p>
  
  <pre><code>@Injectable()
  export class AccountService {
    constructor(public httpService: HttpService) {}
  </code></pre>
  
  <blockquote>
    <p>WARNING in Circular dependency detected:
    src/app/core/services/account.service.ts -> src/app/core/services/http.service.ts -> src/app/core/services/auth.service.ts -> src/app/core/services/account.service.ts</p>
    
    <p>WARNING in Circular dependency detected:
    src/app/core/services/auth.service.ts -> src/app/core/services/account.service.ts -> src/app/core/services/http.service.ts -> src/app/core/services/auth.service.ts</p>
    
    <p>WARNING in Circular dependency detected:
    src/app/core/services/http.service.ts -> src/app/core/services/auth.service.ts -> src/app/core/services/account.service.ts -> src/app/core/services/http.service.ts</p>
  </blockquote>
  
  <p>I understand that this is circular dependency Error.
  How to solve it? Best practice? 
  All services fulfill their role and are important.</p>