Transfer data between two angular apps in nx workspace

Question

Is it possible to transfer data between two angular apps in a nx-workspace

We can share data between libraries by using a shared-library. I tried to create two angular apps in a nx-workspace and i am trying to share data between them..

Answer 1

When you're talking about two different Angular applications running separately in the browser, they can't directly share data through services because they're different instances running in the browser.

Are these two app served from the same domain?

If so you could used localStorage or seassionStorage.

// In app1
localStorage.setItem('formData', JSON.stringify(data));

// In app2
const formData = JSON.parse(localStorage.getItem('data'));

Btw: I would use NGRX or NGXS for state management. I mostly prefer NGXS.

Otherwise you need to create server-side comunication.

One application could communicate using an HTTP request, while the other application listens and retrieves the data using WebSockets.

Answer 2

If you are running 2 different nx apps, you cannot share data. They are two different environments. To share data you either need to do through server (maybe websockets if you need realtime). If it's same domain, you could use localStorage but I am pretty sure you can't listen for changes to localstorage realtime. Also depends on if you are running apps as seperate environments, because you could use microfrontend approach where you have multiple apps but its same environment in browser (tab/window). In this case you could share data because both apps would have same window object. You could also setup redux or similar data store that can be used as communication between the two. But this is under assumption that both apps run in same page. There is no much cases where you want microfrontend approach because libs approach is enough seperation in most cases. One reason would be if you have multiple MS and each wants to host their own part of "frontend" instead of having one place from where you serve whole frontend.