how to use NGX-translate in NX workspace with dynamic angular mfe with standalone api

595 Views Asked by At

I would like to use "ngx-translate" library into a nx workspace configured as dynamic angular MFE with standalone api. What I want to achieve is having a "shared-assets" buildable library and each application has their own "assets/i18n".

What I succeed is having assets in "shared-assets" library and exposing them and the SHELL app is capable of fetching his own assets (apps/shell/assets/i18n) and the assets contained in "shared-assets" library (libs/shared-assets/src/assets/i18n). I saw them in the network tab.

But ONCE i visit a remote app, this one doesn't fetch his own assets...

There is the setup of shell and remote-app:

//bootstrap.ts

export function httpLoaderFactory(http: HttpBackend) {
  return new MultiTranslateHttpLoader(http, [
    { prefix: '/assets/i18n/core/', suffix: '.json' },
    { prefix: '/assets/i18n/', suffix: '.json' },
  ]);
}

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(BrowserModule),
    provideHttpClient(),
    importProvidersFrom([BrowserAnimationsModule]),
    provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
    importProvidersFrom(
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: httpLoaderFactory,
          deps: [HttpBackend],
        }
      })
    ),
  ],
}).catch((err) => console.error(err));

//project.json

"assets": [
  "apps/shell/src/favicon.ico",
  "apps/shell/src/assets",
  {
    "input": "libs/shared-assets/src/assets/i18n",
    "glob": "**/*.json",
    "output": "assets/i18n/core"
  }
],

If someone has any idea ?

0

There are 0 best solutions below