Angular circular dependency warning

Been in that situation a couple of times. I end up with the same solution everytime and it scaled very well for me, so here it goes.

You will need a service (as suggested by others), but also an, let's call it, impartial player. The idea is to use the service as the communication/messaging buffer between the two interdependent components to help break the cross reference. For the sake of an example, let's assume the "App.Component".

The component and responsibilities:

Modal.Service: Receives messages to execute actions. It could be through single method receiving a string or object indicating the action or multiple methods for every action. Implementation details is up to you.

App.Component: Gets the ModalService injected and subscribes to the message event. Based on the action message, then activates the corresponding modal.

Chat.Component: Gets the Modal.Service injected and sends a message indicating the action to be performed, i.e. show the profile.

Profile.Component: Gets the Modal.Service injected and sends a message indicating the action to be performed, i.e. send a message.

This scales very well and the service can be used as a communication buffer between several other modules and/or components.