Angular Academy · Lección

Extraer y traducir mensajes

Generar y completar archivos de traducción

Extraer y traducir mensajes es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Del texto marcado a los archivos de traducción

Una vez marcado el texto con i18n, Angular puede recopilar cada mensaje en un archivo fuente de traducción. Los traductores completan cada idioma de destino y la compilación integra de nuevo esas traducciones. En esta lección se explican la extracción y el formato de archivo.

Ejecutar ng extract-i18n

El comando de la CLI ng extract-i18n busca los mensajes marcados en la aplicación y escribe un archivo fuente de traducción (de forma predeterminada, messages.xlf).

ng extract-i18n
# generates messages.xlf in the project root

Elegir el formato y la ruta de salida

Puede elegir el formato y el destino. XLIFF (xlf) es el formato predeterminado; también se admiten XLIFF 2 y arb, basado en JSON.

ng extract-i18n --format=xlf2 --output-path=src/locale

Anatomía de un archivo XLF

Cada mensaje marcado se convierte en un trans-unit con un source (el texto original) y un target vacío que el traductor debe completar.

<trans-unit id="homeTitle" datatype="html">
  <source>Welcome to our store</source>
  <target></target>
</trans-unit>

Crear archivos por configuración regional

Copie messages.xlf en un archivo por cada configuración regional de destino, asígnele el nombre del código de configuración regional y traduzca los textos de destino.

src/locale/messages.xlf       # source
src/locale/messages.fr.xlf    # French
src/locale/messages.es.xlf    # Spanish

Completar las traducciones

El traductor reemplaza cada target vacío por el texto localizado y conserva el mismo id para que Angular sepa con qué texto de origen se corresponde.

<trans-unit id="homeTitle">
  <source>Welcome to our store</source>
  <target>Bienvenue dans notre boutique</target>
</trans-unit>

Los marcadores de posición deben conservarse

Las interpolaciones aparecen como etiquetas de marcador de posición <x>. Los traductores deben conservarlas, aunque pueden cambiarlas de orden para adaptarlas a la gramática del idioma de destino.

<source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source>
<target>Bonjour, <x id="INTERPOLATION"/> !</target>

Volver a extraer después de los cambios

Cuando añada o modifique texto marcado, vuelva a ejecutar ng extract-i18n. Los identificadores personalizados @@ conservan las traducciones existentes; los identificadores generados automáticamente pueden cambiar y requerir una nueva traducción.

Configurar las configuraciones regionales en angular.json

Registre cada configuración regional y su archivo de traducción en la configuración i18n del proyecto para que la compilación sepa dónde encontrarlos.

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

Gestionar las traducciones que faltan

Puede indicar a la compilación cómo tratar los mensajes sin traducir: error hace que falle la compilación, warning registra una advertencia y utiliza el texto de origen, e ignore no muestra ningún mensaje. Use error en CI para detectar las traducciones que faltan.

"options": { "i18nMissingTranslation": "error" }

Trabajar con herramientas de traducción

XLIFF es un estándar del sector, por lo que las plataformas profesionales de traducción (y herramientas como Crowdin o Lokalise) pueden importar el archivo extraído y exportar las traducciones completadas de nuevo en el mismo formato.

Comprobación rápida

¿Qué produce ng extract-i18n?

Resumen

Ejecute ng extract-i18n para recopilar el texto marcado en un archivo fuente XLIFF compuesto por elementos trans-unit. Cópielo para cada configuración regional, complete los target conservando los marcadores de posición, registre las configuraciones regionales en angular.json y establezca i18nMissingTranslation para detectar las traducciones que faltan. Los identificadores estables @@ protegen las traducciones frente a las modificaciones.

Preguntas frecuentes

¿La lección «Extraer y traducir mensajes» es gratis?

Sí — el texto completo de «Extraer y traducir mensajes» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Extraer y traducir mensajes»?

Generar y completar archivos de traducción Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Extraer y traducir mensajes»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy