Angular Academy · Lección

Crear bundles localizados

Generar builds de la aplicación para cada locale

Crear bundles localizados es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 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.

Una compilación por configuración regional

La i18n de Angular se realiza durante la compilación: produce un bundle independiente y completamente optimizado para cada configuración regional, con las traducciones incorporadas. Los usuarios descargan únicamente su idioma, sin coste de traducción en tiempo de ejecución.

Configurar compilaciones localizadas

Con las configuraciones regionales declaradas en angular.json, establezca localize: true en las opciones de compilación para generar todas las configuraciones regionales a la vez.

"build": {
  "options": {
    "localize": true,
    "outputPath": "dist/app"
  }
}

Compilar todas las configuraciones regionales

Ejecute la compilación de producción; la CLI genera una carpeta por configuración regional, cada una con una aplicación completa.

ng build --localize
# dist/app/en/  dist/app/fr/  dist/app/es/

Compilar una sola configuración regional

Para iterar más rápido, puede compilar una sola configuración regional pasando su código.

ng build --localize=fr

Establecer el href base por configuración regional

Cada compilación de una configuración regional puede tener su propio baseHref para servirse desde una subruta como /fr/. Configúrelo para cada configuración regional en angular.json.

"locales": {
  "fr": {
    "translation": "src/locale/messages.fr.xlf",
    "baseHref": "/fr/"
  }
}

Servir una configuración regional específica durante el desarrollo

ng serve sirve una configuración regional cada vez. Pase la configuración o la configuración regional cuyas traducciones quiera previsualizar durante el desarrollo.

ng serve --configuration=fr

Dirigir a los usuarios a su configuración regional

Como cada configuración regional es una carpeta independiente que puede desplegarse, normalmente se utiliza el servidor o una CDN para redirigir a los usuarios a la subruta correcta según su encabezado Accept-Language o un selector de idioma.

$localize en tiempo de ejecución para configuraciones personalizadas

Las configuraciones avanzadas pueden cargar traducciones en tiempo de ejecución con loadTranslations() de @angular/localize antes del bootstrap. Esto sustituye la compilación por configuración regional por un único bundle y un mapa de traducciones descargado.

import { loadTranslations } from '@angular/localize';
loadTranslations(frTranslations);
// then bootstrapApplication(App)

Requisito de polyfill

El uso de $localize requiere el polyfill @angular/localize. Añádalo una vez con la CLI; así se registra el elemento global necesario para la traducción de plantillas etiquetadas.

ng add @angular/localize

El tamaño del bundle se mantiene reducido

Como la traducción se realiza durante la compilación, el bundle en francés contiene únicamente texto en francés, sin otros idiomas ni un motor de traducción enviado al navegador. Por eso la i18n en tiempo de compilación mantiene las aplicaciones ligeras.

Despliegue del resultado

Despliegue todo el directorio dist/app; cada subcarpeta de configuración regional es una aplicación independiente. Configure el servidor para que /fr/ sirva la compilación en francés y que la configuración regional predeterminada se sirva en la raíz o en su propia ruta.

Comprobación rápida

¿Cómo distribuye Angular las traducciones?

Resumen

Establezca localize: true y ejecute ng build --localize para generar una carpeta por configuración regional, cada una con una aplicación completa. Use un baseHref por configuración regional (por ejemplo, /fr/), sirva una sola configuración regional durante el desarrollo con --configuration, añada el polyfill @angular/localize y, opcionalmente, cargue las traducciones en tiempo de ejecución para configuraciones personalizadas.

Preguntas frecuentes

¿La lección «Crear bundles localizados» es gratis?

Sí — el texto completo de «Crear bundles localizados» 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 «Crear bundles localizados»?

Generar builds de la aplicación para cada locale 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 4 de 4.

¿Cuánto tiempo toma la lección «Crear bundles localizados»?

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