How to communicate between micro front end applications angular

Question

I have 3 independent angular application running using MFE architecture. I want to communicate each other . What is the best approach to communicate between each other other than using local storage.

All these apps are running and managed by different repositories and deployed independently

I have tried different approach like local storage, library etc. but since all the applications are independently deployed its not working as expected.

Answer 1

so far I have found

dispatchEventFromHostFn() {
const customEvent = new CustomEvent("testEventFromHost", { detail: { data: "testEventFromHost" } });
dispatchEvent(customEvent);

Then listen it in the remote app

 // observable, so we can unsubscribe
fromEvent(window, "testEventFromHost").subscribe((res) => {
  console.log("!!fromEvent testEventFromHost", res);
});