Angular MFE - WebPack5 - 模块联盟 - I18N 翻译

Question

我们正在处理多个 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)

我发现了一些类似的问题，但它只包含资产问题，例如。翻译文件也作为资产导出到 project.json

希望问题很清楚，否则我总是可以在此处添加示例代码。

Answer 1

我刚刚发现我必须将某个文件设为可共享：

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

Angular MFE - WebPack5 - 模块联盟 - I18N 翻译

Angular MFE - WebPack5 - Module Federation - I18N translations

i18next

webpack

angular

micro-frontend

webpack-module-federation