El i18n de Angular es excelente, y herramientas como ng-packagr hacen que el empaquetado de la biblioteca de componentes sea extremadamente fácil, pero ¿se pueden combinar?
¿Qué pasa si quiero empaquetar y distribuir una biblioteca de componentes con componentes traducibles? ¿Es posible? ¿Cómo empaqueto una biblioteca de este tipo? ¿Se enviarán los archivos de traducción junto con el paquete o se deben definir en la aplicación principal?
Sería genial si alguien pudiera señalarme algún doc. Gracias
Cuando genera un archivo de traducción para la aplicación principal con la CLI (con ng xi18n ), los elementos con el atributo i18n en la biblioteca se importan en el archivo de traducción. A continuación, puede definir las traducciones en la aplicación principal.
Hay dos formas de hacerlo: proporcionar los activos de forma estática y agruparlos en tiempo de compilación o configurar la ruta de traducción en tiempo de ejecución.
Para incluir archivos de forma estática en el momento de la compilación, solo use setTranslations en el código, como se menciona en https://github.com/ngx-translate/core docs. Luego, puede empaquetar sus traducciones con el código.
Mejor sería dejar que el consumidor sepa qué usar. Para poder proporcionar correctamente la ruta a los archivos de traducción (suponiendo una estructura estándar, donde cada traducción reside en un archivo separado que contiene el idioma en el nombre), puede hacer lo siguiente:
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 ], }; }}
Este código asegura que al crear la biblioteca, AOT podrá resolver tipos (por lo tanto, InjectionToken , etc.) y permite crear un cargador de traducciones personalizado.
¡Ahora solo depende de usted implementar la fábrica o clase de cargador que usará la configuración! Este es el mío (estoy usando órdenes de compra para mis traducciones):
export function HttpLoaderFactory(http: HttpClient, config: TranslationsConfig) { return new TranslatePoHttpLoader(http, config.prefix, config.suffix); }Recuerde exportar cada clase y función que esté utilizando en el módulo, ya que es un requisito previo para AOT (y las bibliotecas se crean con AOT de forma predeterminada).
Para usar esta solución completa, donde sea que use su módulo de biblioteca principal o este módulo de traducción, puede simplemente llamar a TranslateModule.forRoot(/* Your config here */) . Si este no es el módulo principal exportado, más sobre el uso de módulos jerárquicos con forRoot aquí:
Cómo usar .forRoot() dentro de la jerarquía de módulos de características