Упаковка Угловая библиотека с поддержкой i18n

Угловой i18n отличный, и инструменты, такие как ng-packagr, делают упаковку библиотеки компонентов чрезвычайно простой, но их можно комбинировать?

Что делать, если я хочу упаковать и распространять библиотеку компонентов с переводимыми компонентами? Является ли это возможным? Как мне упаковать такую библиотеку? Будут ли файлы переводов отправлены вместе с пакетом или должны быть определены в главном приложении?

Было бы здорово, если бы кто-нибудь мог указать мне на какой-то документ. Спасибо

Ответ 1

Когда вы создаете файл перевода для основного приложения с CLI (с ng xi18n), элементы с атрибутом i18n в библиотеке импортируются в файл перевода. Затем вы можете определить переводы в главном приложении.

Ответ 2

Это можно сделать двумя способами: статически предоставлять ресурсы и связывать во время сборки или настраивать путь перевода во время выполнения.

  1. Чтобы статически включать файлы во время сборки, вы просто используете setTranslations в коде, как указано в https://github.com/ngx-translate/core docs. Затем вы можете просто связать ваши переводы с кодом.

  2. Лучше было бы дать потребителю знать, что использовать. Чтобы правильно указывать путь к файлам перевода (при условии стандартной структуры, где каждый перевод находится в отдельном файле, содержащем язык в имени), вы можете сделать что-то следующим образом:

    interface TranslationsConfig {
      prefix: string;
      suffix: string;
    }
    
    export const TRANSLATIONS_CONFIG = new InjectionToken('TRANSLATIONS_CONFIG');
    
    @NgModule({
      declarations: [],
      imports: [
        NgxTranslateModule,
      ],
      exports: [
        NgxTranslateModule,
      ]
    })
    export class TranslateModule {
      public static forRoot(config: TranslationsConfig): ModuleWithProviders {
        return {
          ngModule: TranslateModule,
          providers: [
            {
              provide: TRANSLATIONS_CONFIG,
              useValue: config
            },
            ...NgxTranslateModule.forRoot({
              loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient, TRANSLATIONS_CONFIG]
            }
          }).providers
        ],
      };
    }
    

    }

Этот код гарантирует, что при сборке библиотеки AOT сможет разрешать типы (следовательно, InjectionToken и т.д.) И позволяет создавать загрузчик пользовательских переводов.

Теперь только вам нужно реализовать фабрику или класс загрузчиков, которые будут использовать конфигурацию! Это мое (я использую PO для моих переводов):

export function HttpLoaderFactory(http: HttpClient, config: TranslationsConfig) {
  return new TranslatePoHttpLoader(http, config.prefix, config.suffix);
}

Пожалуйста, не забудьте экспортировать каждый класс и функцию, которые вы используете в модуле, как обязательное условие для AOT (а библиотеки по умолчанию создаются с AOT).

Чтобы использовать все это решение, где бы вы ни использовали свой основной библиотечный модуль или этот модуль перевода, вы можете просто вызвать TranslateModule.forRoot(/* Your config here */). Если это не основной модуль экспорта, подробнее об использовании иерархических модулей с forRoot здесь:

Как использовать .forRoot() в иерархии модулей функций