Использование Webpack для i18n как в Angular

Question

Я большой поклонник процесса i18n, поставляемого с Angular 2+, в частности следующих двух функций:

1. Возможность создания файлов перевода из аннотированных шаблонов HTML с помощью команды CLI ( ng xi18n ).
2. Возможность замены шаблонов текстов их переводами во время сборки (экономия ресурсов во время выполнения).

Сейчас я работаю над неангулярным проектом и хотел бы реализовать процесс i18n, аналогичный описанному выше. Проект основан на AngularJS и использует пользовательский пакет Webpack. Файлы шаблонов HTML в настоящее время загружаются с помощью веб-пакетов raw loader и упаковываются в виде строк.

Сам Webpack предлагает объединить свои загрузчики HTML и i18n . Хотя это, вероятно, решит (2), но не решит (1), и синтаксис, необходимый в шаблонах, будет довольно далеко от того, который используется в Angular (то есть добавление атрибутов i18n="" к элементам, которые должны быть переведены) .

Есть ли у кого-нибудь опыт решения подобных проблем? Есть ли способ использовать специализированный загрузчик Webpack для этого варианта использования или, может быть, даже небольшую часть системы сборки Angular 2+?

Answer 1

У меня есть опыт реализации этого варианта использования.Вам нужно написать сервис для чтения файла конфигурации, содержащего перевод XML, а затем внедрить его в файл main.ts на этапе начальной загрузки вашего приложения, чтобы он мог прочитать перевод XML

main.ts

        import { platformBrowserDynamic }  from '@angular/platform-browser-dynamic';
        import { getTranslationProviders } from './app/i18n-providers';

        import { AppModule } from './app/app.module';

        getTranslationProviders().then(providers => {
          const options = { providers };
          platformBrowserDynamic().bootstrapModule(AppModule, options);
        });

i18n-provider.ts

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

    export function getTranslationProviders(): Promise<Object[]> {

      // Get the locale id from the global
      const locale = document['locale'] as string;

      // return no providers if fail to get translation file for locale
      const noProviders: Object[] = [];

      // No locale or U.S. English: no translation providers
      if (!locale || locale === 'en-US') {
        return Promise.resolve(noProviders);
      }

      // Ex: 'locale/messages.es.xlf`
      const translationFile = `./locale/messages.${locale}.xlf`;

      return getTranslationsWithSystemJs(translationFile)
        .then( (translations: string ) => [
          { provide: TRANSLATIONS, useValue: translations },
          { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
          { provide: LOCALE_ID, useValue: locale }
        ])
        .catch(() => noProviders); // ignore if file not found
    }

    declare var System: any;

    function getTranslationsWithSystemJs(file: string) {
      return System.import(file + '!text'); // relies on text plugin
    }

тогда в вашем html

    <h1 i18n="User welcome|An introduction header for this sample">Hello i18n!</h1>