How to solve the circular dependency

I have 3 services:

auth.service.ts, account.service.ts, http.service.ts
​

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.

@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) => {
if (err) {

...

return;
}

this.accountService.createAccount(name, phone, email).subscribe(res => {

...

this.router.navigate(['/auth/confirmation-code']);
});
});


}

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.

@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) => {
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<any> {
return this._http.get(`${this.actionUrl}${request}`)
.map(res => this.extractData(res))
.catch(this.handleError);
}


In my account.service.ts I should use http.service.ts for creating new account.

@Injectable()
export class AccountService {
constructor(public httpService: HttpService) {}

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

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

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
​

I understand that this is circular dependency Error. How to solve it? Best practice? All services fulfill their role and are important.

Continue reading...