What is the correct way to make translations available between apps in a microfrontend architecture?

174 views Asked by At

I work on a project built in nx that uses the microfrontend architecture. The application consists of a host app and a series of remote apps in addition to common libraries. The app uses translations, for this purpose I use nxg-translation. In the host app I configure the translation module in app.module.ts

export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
}

TranslateModule.forRoot({
   defaultLanguage: 'en',
   loader: {
     provide:TranslateLoader,
     useFactory: HttpLoaderFactory,
     deps: [HttpClient],
   },
})

in apps/host/src/assets I have created the i18n directory along with the en.json and es.json files

If I use the host app when visiting the remote app, the translations work properly

But I serve a remote app individually, the translations do not work

To solve this behavior I want to use a common library, in which to place the translation .json files and invoke them from all the apps

The first problem I found is that the files to be exported are .json and I don't know how to export these files from the index.ts file of the library

Could you suggest me what is the appropriate approach in this scenario?

Thanks in advance for any ideas

0

There are 0 answers