我們正在處理多個 Angular MFE 專案(使用 nx),在成功加載主機和遠程模塊并顯示頁面(通過路由)之后,下一步是翻譯。
我有一個正在加載的共享翻譯模塊 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],
});
}
使用 i18Next 選項:
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',
},
};
該模塊在 webpack 中共享 sharedMappings.register(tsConfigPath, ['@tgc/translations'], workspaceRootPath);
并且檔案是通過i18next-http-backend庫加載的。主機正確加載翻譯,但remote模塊未顯示任何翻譯( 'auth:login.title' | i18nextCap)
我發現了一些類似的問題,但它只包含資產問題,例如
uj5u.com熱心網友回復:
我剛剛發現我必須使某個檔案可共享:
'angular-i18next': { singleton: true, strictVersion: true, requiredVersion: 'auto' },

轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/416552.html
標籤:
