Упаковка Угловая библиотека с поддержкой 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() в иерархии модулей функций