My use case:
I have two injectable services, user & company service.
The user service depends on the company service to get the data of a company on authentication (not when the service is built) and the company service needs the user service to get some user data for some side-effects when updating a company.
This obviously creates circular dependency which normally wouldn't even compile but I got around it via injector and a setTimeout to get the user service reference in the next event loop:
private userService: UserService;
constructor(private readonly injector: Injector) {
setTimeout(() => this._inject_user_service());
}
private _inject_user_service(): void {
this.userService = this.injector.get<UserService>(UserService);
}
This works but then in the console there'll be warnings:
Circular dependency detected:
company.service.ts -> user.service.ts -> company.service.ts
Circular dependency detected:
user.service.ts -> company.service.ts -> user.service.ts
Now I'm not entirely sure on the consequences of deploying this to production. I'm fully aware that this would be highly problematic if Component A would depend on Component B to be instantiated and vice versa.
But in this case its two global singleton services that reference each other when components use one of their methods.
Is this just bad desing or is there an actual proper way of doing this in angular?