¿Cómo dividir su archivo i18n por módulo cargado lento con ngx-translate?

tl; dr Verifique la sección de resumen al final

Después de unos meses de trabajar en mi aplicación Angular, mis archivos i18n tienen más de 800 líneas cada uno, casi imposible de mantener y se volverán cada vez más difíciles con el tiempo. La mejor solución a este problema sería tener un archivo i18n por módulo (de hecho 2, tengo que admitir francés e inglés).

Ambiente:

@ angular / núcleo @ 4.4.3
@ ngx-translate / core @ 8.0.0
@ ngx-translate / http-loader @ 2.0.0

El principio

Para poder cargar un archivo json junto con un módulo con carga lenta, debe usar el aislamiento de propiedad como sugiere la documentación. Aislar su TranslateModule le permitirá crear una nueva instancia de TranslateService y, con ella, una nueva instancia de HttpLoader con una ruta diferente a los archivos i18n.

Ahora, la mayor diferencia que debe tener en cuenta es que cuando cambia el idioma, debe cambiarlo para todas las instancias del Servicio de traducción. Esto le indicará al servicio que busque el archivo json de cada módulo con carga lenta para el idioma que desee.

En mi código, uso Redux (ngrx-platform) para comunicar el cambio de idioma entre todos mis módulos.

Múltiples solicitudes?

Nota: debe tener esto en cuenta: ¡esto aumentará significativamente la cantidad de solicitudes realizadas a su servidor! si tiene 10 módulos, ¡son 10 solicitudes solo para traducciones!

Pero en 2017, eso ya no es un problema ...

  • Use Http 2
  • Use sw-precache de Google para generar un archivo de manifiesto
  • Use Idle-Preload como estrategia de carga diferida
  • Use la representación del lado del servidor si aún no está satisfecho

El impacto en su rendimiento debería ser insignificante.

Estructura de carpetas

Mi carpeta de activos para archivos i18n se ve así:

bienes/
└── i18n /
   ├── aplicación /
   │ ├── en.json
   │ └── fr.json
   └── inicio /
       ├── en.json
       └── fr.json

la aplicación contiene traducciones básicas de i18n, como: menú, encabezado, pie de página y otras carpetas como inicio, que contienen traducciones de i18n para el módulo de carga diferida.

Código

AppModule

Primero prepare su AppModule para llamar a forRoot () de TranslateModule y para cargar su aplicación principal de archivos i18n / (en | fr) .json

AppComponent

AppComponent es su componente raíz, donde el usuario puede configurar el idioma haciendo clic en un botón en el encabezado. Luego, envía la información del idioma a su tienda para que sus otros módulos sepan que el idioma ha cambiado y deben cambiar el idioma de su instancia de TranslateService.

HomeModule (módulo con carga lenta)

En este módulo, declare una nueva instancia de TranslateHttpLoader para obtener sus archivos i18n en casa / (en | fr) .json

InicioComponente

Lo único que queda es llamar al uso () de su instancia de TranslateService, cada vez que cambia el idioma, en todos los componentes de los módulos con carga lenta suscribiéndose a la propiedad de idioma actual de su tienda.

Resumen

¡Eso es! Ahora está configurado para dividir su gran archivo i18n en uno más pequeño que lo ayudará a mantener fácilmente su archivo de traducción.

Para resumir:

  1. En su AppModule, llame a forRoot ()
  2. En todos sus módulos con carga lenta, llame a forChild () con isolated: true y cree una nueva instancia de TranslateHttpLoader con la ruta a los archivos i18n para el módulo
  3. En todas las llamadas de componentes principales de su módulo de carga diferida, use () de TranslateService cada vez que el usuario cambie el idioma