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.

You can use Injector for this. Inject it via constructor as usual, and then when you will need some service that leads to the circular dependency, get that service from it.

class HttpService {
  constructor(private injector: Injector) { }

  doSomething() {
    const auth = this.injector.get(AuthService);
    // use auth as usual
  }
}

@deprecated from v4.0.0 use Type or InjectionToken

const auth = this.injector.get(AuthService);

Works on Angular 10:

const AuthService = this.injector.get<AuthService>(AuthService);

Just wanted to share a scenario that happened with me (maybe it could help someone). So I was getting the same circular dependency error and a Null Injector error too. The only thing that made my head spin was that I just had a single service and there was no literal circular dependency.

So I just tried to look the Null Injector error, the issue was that in my app.module I hadn't imported HttpClientModule. Once I imported that in imports array both error got fixed.

How to solve the circular dependency

Related

Recent Posts