Volver a la página principal
jueves 14 noviembre 2024
18

Cómo instalar y configurar i18n en Angular

Configurar i18n (internacionalización) en Angular es esencial para crear aplicaciones que puedan ser traducidas fácilmente a varios idiomas. Angular proporciona un conjunto de herramientas robusto para manejar la internacionalización, incluyendo el módulo @angular/localize y soporte para la extracción de cadenas de texto, plantillas de traducción y construcción de archivos específicos por idioma. A continuación, te guiaré paso a paso para configurar i18n en un proyecto Angular y hacer que tu aplicación sea multilingüe.

Paso 1: Crear un nuevo proyecto en Angular (si es necesario)

Si aún no tienes un proyecto, crea uno ejecutando el siguiente comando en la terminal: 

ng new mi-proyecto

Este comando genera una nueva aplicación Angular con toda la estructura básica necesaria. Si ya tienes un proyecto, puedes omitir este paso.

Paso 2: Instalar el paquete de internacionalización

Angular ofrece el paquete @angular/localize para gestionar la internacionalización en la aplicación. Instálalo ejecutando el siguiente comando en la terminal: 

ng add @angular/localize

Este comando también configura automáticamente el proyecto para utilizar las herramientas de internacionalización de Angular. 🛠️

Paso 3: Marcar el contenido para traducción

El siguiente paso es indicar qué texto debe traducirse. Angular permite marcar cadenas de texto con la directiva i18n, la cual se añade en el código HTML de la aplicación.

Por ejemplo: 

<h1 i18n>Bienvenido a nuestra aplicación</h1>
<p i18n>Esta es una aplicación traducible usando Angular i18n</p>

Al añadir i18n como atributo, Angular sabe que ese texto deberá traducirse a otros idiomas. Además, puedes incluir un descripción y un significado opcional, lo cual es útil para el contexto del traductor. Ejemplo: 

<h1 i18n="meaning|description">Bienvenido</h1>

Ejemplo completo de marcado 

<button i18n="Acción para enviar el formulario|Botón de enviar">Enviar</button>

Paso 4: Extraer el archivo de mensajes

Para que puedas traducir el contenido de la aplicación, debes extraer todas las cadenas de texto marcadas con i18n. Esto generará un archivo XML que contiene todas las cadenas a traducir, junto con un contexto y un identificador único.

Ejecuta el siguiente comando en la terminal para crear el archivo de mensajes: 

ng extract-i18n

Este comando genera un archivo llamado messages.xlf en la carpeta raíz del proyecto. Este archivo tiene todas las cadenas de texto en XML, lo cual es estándar para la mayoría de herramientas de traducción.

El contenido de messages.xlf se ve así: 

<trans-unit id="welcomeMessage" datatype="html">
  <source>Bienvenido a nuestra aplicación</source>
  <target>Welcome to our application</target>
</trans-unit>
💡 Consejo: Puedes cambiar la ubicación y el formato de messages.xlf mediante las opciones --outputPath y --format del comando ng extract-i18n.

Paso 5: Crear archivos de traducción

Para añadir más idiomas, crea copias de messages.xlf y nómbralas de acuerdo con los códigos de idioma que quieres soportar. Por ejemplo, para inglés y francés, crea los siguientes archivos:

  • messages.en.xlf
  • messages.fr.xlf

Luego, abre cada archivo y reemplaza el contenido en <target> con la traducción correspondiente. Por ejemplo:

messages.en.xlf 

<trans-unit id="welcomeMessage" datatype="html">
  <source>Bienvenido a nuestra aplicación</source>
  <target>Welcome to our application</target>
</trans-unit>

messages.fr.xlf 

<trans-unit id="welcomeMessage" datatype="html">
  <source>Bienvenido a nuestra aplicación</source>
  <target>Bienvenue dans notre application</target>
</trans-unit>

Paso 6: Configurar los idiomas en Angular

Para que Angular sepa que debe construir versiones específicas del proyecto para cada idioma, configura los ajustes en angular.json.

En el archivo angular.json, busca la sección projects -> tu-proyecto -> i18n y agrega los idiomas de la siguiente manera: 

"i18n": {
  "sourceLocale": "es",
  "locales": {
    "en": "src/locale/messages.en.xlf",
    "fr": "src/locale/messages.fr.xlf"
  }
}

Aquí, sourceLocale es el idioma original del proyecto, mientras que locales define la ruta a los archivos de traducción de otros idiomas.

Paso 7: Configurar la construcción específica para cada idioma

Para compilar la aplicación en diferentes idiomas, es necesario configurar los "build configurations" en angular.json. Dentro de la sección de configuraciones del proyecto (projects -> tu-proyecto -> architect -> build -> configurations), agrega una configuración para cada idioma, de la siguiente manera: 

"en": {
  "localize": ["en"],
  "outputPath": "dist/mi-proyecto/en"
},
"fr": {
  "localize": ["fr"],
  "outputPath": "dist/mi-proyecto/fr"
}

Cada configuración especifica el idioma (localize) y la carpeta donde se guardará la salida de la compilación (outputPath).

Paso 8: Compilar la aplicación para cada idioma

Finalmente, para compilar el proyecto en diferentes idiomas, ejecuta el siguiente comando: 

ng build --localize

Este comando generará carpetas de salida para cada idioma configurado en el archivo angular.json. Cada carpeta contendrá la aplicación traducida y lista para ser desplegada en el idioma correspondiente. 🌍

Compilar solo en un idioma específico

Si necesitas compilar únicamente en un idioma, puedes usar el siguiente comando, especificando el idioma con la opción --configuration: 

ng build --configuration=en

Esto generará la aplicación solo en inglés.

Paso 9: Seleccionar el idioma dinámicamente (opcional)

Por defecto, Angular solo permite la carga de un idioma a la vez en el momento de compilación. Si necesitas cambiar de idioma dinámicamente en la aplicación, puedes considerar usar bibliotecas de terceros como ngx-translate, que permiten la traducción sin necesidad de recompilar.

Conclusión

Configurar i18n en Angular puede parecer un proceso complejo, pero la flexibilidad y control que ofrece es enorme, sobre todo para aplicaciones que requieren soportar múltiples idiomas y culturas. Con esta configuración básica de Angular i18n, puedes comenzar a traducir tu aplicación y expandir tu audiencia a nivel global. 🌎✨

Etiquetas:
angular
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer