Совместное использование экземпляра i18next между приложениями без переопределения

Question

В настоящее время я работаю над интернационализацией системы, построенной с использованием single-spa (микрофронтенды), с приложениями, написанными на Angular и React. Я начал использовать i18next, и все идет хорошо, однако я обнаружил проблему при попытке разделить зависимость i18next между всеми приложениями.

Когда два приложения монтируются одновременно в представлении, тот, который загружает последний, переопределяет экземпляр i18next, и, таким образом, переводы для первого никогда не обнаруживаются, поскольку они не были загружены на последний.

Заранее спасибо!

Answer 1

Лучше что I18nextбудет инициализирован на оболочке уровне с пространствами имен оболочки, и каждый внутренний спа добавит его пространств имен к общему примеру.

Таким образом, у вас не будет дублирования экземпляра и кода.

Ты можешь использовать [i18next.addResourceBundle][1], чтобы добавить ресурсы перевода, связанные с текущим внутренним приложением.

i18next.addResourceBundle('en', 'app1/namespace-1', {
// ----------------------------------^ nested namespace allow you to group namespace by inner apps, and avoid namespace collisions
  key: 'hello from namespace 1'
});

Передайте экземпляр i18next в качестве свойств внутреннему приложению.

// root.application.js

import {i18n} from './i18n';
// ------^ shells i18next configured instance

singleSpa.registerApplication({
  name: 'app1',
  activeWhen,
  app,
  customProps: { i18n, lang: 'en' }
});

// app1.js

export function mount(props) {
  const {i18n, lang} = props;

  i18n.addResourceBundle(lang, 'app1/namespace-1', {
    key: 'hello from namespace 1',
  });
  return reactLifecycles.mount(props);
}

Надеюсь, идея понятна:][1]: https://www.i18next.com/how-to/add-or-load-translations