How to share LocalStorage from Remote apps into Host in Native Federation and Angular 18

I have a monorepo with three standalone Angular 18 applications, each with its own library. In the libraries of the remote apps, I use NgRx, and when I run each app on its own, everything works fine, with data being stored in localStorage.I’m using native-federation to set up a microfrontend architecture for these apps.

For example, the shell (host) runs on port localhost:4200, App1 on port localhost:4201, and App2 on port localhost:4202. The problem appears when I load app1 port 4201 from the host port 4200: localStorage isn’t updated.Because the port number is different. each application has its own state, I don’t want them to share state.

However, when I use a remote app inside the host, I need somehow to update LocalStorage for each app in Host so the remote app can read the LocalStorage data and use it.

import {
ActionReducer,
ActionReducerMap,
MetaReducer,
provideState,
} from '@ngrx/store';
import { localStorageSync } from 'ngrx-store-localstorage';

import { TaskReducer } from './reducer/Task.reducer';
import { toolboxReducer } from './reducer/toolbox.reducer';

export const reducers: ActionReducerMap<any> = {
currentTask: currentTaskReducer,
toolbox: toolboxReducer,
};

export function localStorageSyncReducer(
reducer: ActionReducer<any>,
): ActionReducer<any> {
return localStorageSync({
// add keys to sync with local storage
keys: ['currentTask', 'toolbox'],
rehydrate: true,
})(reducer);
}

export const metaReducers: Array<MetaReducer<any, any>> = [
localStorageSyncReducer,
];


I’m using "@angular-architects/native-federation": "^18.2.2". Does anyone know of an example that demonstrates how to handle this scenario?

Continue reading...