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

Question

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

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

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

Answer 1

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

Answer 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() в иерархии модулей функций