Angular MFE - WebPack5 - Module Federation - I18N translations-CodePudding

We are working with multiple angular MFE projects (with nx), after successfully loading the host and remote modules and showing the page (through routes), the next step was translations.

I have a shared translations module that is loading angular-i18next

import { CommonModule } from '@angular/common';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { I18NextModule } from 'angular-i18next';
import { I18N_PROVIDERS } from './i18next.config';

@NgModule({
  imports: [CommonModule, I18NextModule.forRoot()],
  providers: [I18N_PROVIDERS],
})
export class UtilTranslationsModule {

  // I setup the module providers for the root application.
  static forRoot(): ModuleWithProviders<UtilTranslationsModule> {

    return ({
      ngModule: UtilTranslationsModule,
      providers: [I18N_PROVIDERS],
    });

  }

with the i18Next options:

import { APP_INITIALIZER, LOCALE_ID } from '@angular/core';

import { defaultInterpolationFormat, I18NextModule, I18NEXT_SERVICE, ITranslationService } from 'angular-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';
import { Languages } from './languages.constant';

/*
 * Platform and Environment providers/directives/pipes
 */
const i18nextOptions = {
  whitelist: Object.values(Languages),
  fallbackLng: 'en',
  debug: false, // true, // set debug?
  returnEmptyString: false,
  ns: ['common', 'error', 'auth'],
  defaultNS: 'common',
  interpolation: {
    format: I18NextModule.interpolationFormat(defaultInterpolationFormat),
  },
  // backend plugin options
  backend: {
    loadPath: 'locales/{{lng}}/{{ns}}.json',
    addPath: 'locales/add/{{lng}}/{{ns}}',
    crossDomain: true,
  },
  // lang detection plugin options
  detection: {
    // order and from where user language should be detected
    order: ['localStorage', 'cookie'],

    // keys or params to lookup language from
    lookupCookie: 'lang',

    // cache user language on
    caches: ['localStorage', 'cookie'],

    // optional expire and domain for set cookie
    cookieMinutes: 10080, // 7 days
    cookieDomain: 'I18NEXT_LANG_COOKIE_DOMAIN',
  },
};

the module is shared in webpack sharedMappings.register(tsConfigPath, ['@tgc/translations'], workspaceRootPath);

and the files are loaded through the i18next-http-backend library. The host loads the translations correctly but the remote module isnt showing any translations ( 'auth:login.title' | i18nextCap)

I have found some similar issues but it only contains the assets issue, like

CodePudding user response：

I just found out that i had to make a certain file shareable:

'angular-i18next': { singleton: true, strictVersion: true, requiredVersion: 'auto' },