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 angular mfe assets issue. The translation files are also exported as assets in the project.json
hope the issue is clear, if not I always can add a example code here.
