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.
Then there are three strategies you can use: Look for small pieces of code that can be moved from one project to the other. Look for code that both libraries depend on and move that code into a new shared library. Combine projectA and projectB into one library.
In software engineering, a circular dependency is a relation between two or more modules which either directly or indirectly depend on each other to function properly. Such modules are also known as mutually recursive.
This circular relationship caused a problem and webpack could not resolve the dependencies correctly. Our solution was to upgrade our modules to use ES6 import/exports. This enabled us to reuse the react components and avoid circular dependencies while moving us closer to ES standards.
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 } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With