intlayer_with_angular_21.md

createdAt

2025-04-18

updatedAt

2026-05-31

title

Angular 21 i18n - Guía completa para traducir tu aplicación

description

Sin más i18next. La guía 2026 para crear una aplicación Angular 21 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento.

keywords

Internacionalización

Documentación

Intlayer

Angular

JavaScript

slugs

doc

environment

angular

applicationTemplate

https://github.com/aymericzip/intlayer-angular-21-template

applicationShowcase

https://intlayer-angular-21-template.vercel.app/

history

version	date	changes
8.9.0	2026-05-04	Actualizar el uso de la API useIntlayer de Solid al acceso directo a propiedades

version	date	changes
8.0.0	2026-01-26	Lanzamiento de versión estable

version	date	changes
8.0.0	2025-12-30	Añadir comando init

version	date	changes
5.5.10	2025-06-29	Historial inicial

Traduce tu sitio Angular 21 (Vite) usando Intlayer | Internacionalización (i18n)

Tabla de Contenidos

¿Por qué Intlayer en lugar de alternativas?

En comparación con soluciones principales como ngx-translate o angular-l10n, Intlayer es una solución que viene con optimizaciones integradas como:

Intlayer está optimizado para funcionar perfectamente con Angular al ofrecer alcance del contenido a nivel de componente, traducciones cargadas de forma diferida y todas las funciones necesarias para escalar la internacionalización (i18n).

En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a reducir el tamaño de su bundle y de sus páginas hasta en un 50%.

Determinar el alcance del contenido de su aplicación facilita el mantenimiento para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está completamente escrito para garantizar la precisión de su contenido.

La ubicación conjunta de contenido reduce el contexto necesario para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una CLI para comprobar si faltan traducciones,LSP, MCP y agent skills, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.

Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un compilador para automatizar la extracción de contenido, así como una plataforma web para ayudar a traducir en segundo plano.

La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.

Más que una simple solución i18n, Intlayer proporciona un [editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) y un CMS completo para ayudarle a administrar su contenido multilingüe en tiempo real, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.

Guía Paso a Paso para Configurar Intlayer en una Aplicación Angular

Ver la Plantilla de Aplicación en GitHub.

Instala los paquetes necesarios usando npm:

npm install intlayer angular-intlayer
npm install @angular-builders/custom-esbuild --save-dev
npx intlayer init

pnpm add intlayer angular-intlayer
pnpm add @angular-builders/custom-esbuild --save-dev
pnpm intlayer init

yarn add intlayer angular-intlayer
yarn add @angular-builders/custom-esbuild --save-dev
yarn intlayer init

bun add intlayer angular-intlayer
bun add @angular-builders/custom-esbuild --dev
bun x intlayer init

intlayer

El paquete central que proporciona herramientas de internacionalización para la gestión de configuraciones, traducción, declaración de contenido, transpilación y comandos CLI.
angular-intlayer El paquete que integra Intlayer con la aplicación Angular. Proporciona proveedores de contexto y hooks para la internacionalización en Angular.
@angular-builders/custom-esbuild Requerido para personalizar la configuración esbuild de Angular CLI.

Crea un archivo de configuración para establecer los idiomas de tu aplicación:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Tus otros idiomas
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

A través de este archivo de configuración, puedes establecer URLs localizadas, redirección de middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, desactivar los logs de Intlayer en la consola y más. Para obtener una lista completa de los parámetros disponibles, consulta la documentación de configuración.

Para integrar Intlayer con la CLI de Angular, necesitas usar un constructor (builder) personalizado. Esta guía asume que estás usando Vite/esbuild (por defecto para proyectos Angular 21).

Primero, modifica tu angular.json para usar el constructor esbuild personalizado. Actualiza las configuraciones build y serve:

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-esbuild:application", // replace "@angular/build:application"
          "options": {
            "define": {
              "process.env": "{}",
            },
            "plugins": ["./esbuild.plugins.ts"],
            "browser": "src/main.ts",
            // ...
          },
        },
        "serve": {
          "builder": "@angular-builders/custom-esbuild:dev-server", // replace "@angular/build:dev-server"
          "options": {
            "prebundle": {
              "exclude": [
                "intlayer",
                "angular-intlayer",
                "@intlayer/config/built",
                "@intlayer/core"
              ]
          },
        },
      },
    },
  },
}

Asegúrate de reemplazar your-app-name con el nombre real de tu proyecto en angular.json.

Luego, crea un archivo esbuild.plugins.ts en la raíz de tu proyecto:

import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";

export default [intlayerEsbuildPlugin()];

La función intlayerEsbuildPlugin configura esbuild con Intlayer. Inyecta el plugin para manejar los archivos de declaración de contenido y establece las configuraciones para un rendimiento óptimo.

Usuarios de NX: Los constructores de Angular de NX cargan archivos de complementos a través de la resolución ESM nativa de Node y no compilan archivos de complementos de TypeScript sobre la marcha. Use un archivo .mjs en su lugar y actualice la referencia de plugins en angular.json en consecuencia:
import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";

export default [intlayerEsbuildPlugin()];
Luego, en angular.json, apunte a "./esbuild.plugins.mjs" en lugar de "./esbuild.plugins.ts".

Crea y gestiona tus declaraciones de contenido para almacenar las traducciones:

import { t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: t({
      en: "Hello",
      fr: "Bonjour",
      es: "Hola",
    }),
    congratulations: t({
      en: "Congratulations! Your app is running. 🎉",
      fr: "Félicitations! Votre application est en cours d'exécution. 🎉",
      es: "¡Felicidades! Tu aplicación está en ejecución. 🎉",
    }),
    exploreDocs: t({
      en: "Explore the Docs",
      fr: "Explorer les Docs",
      es: "Explorar los Docs",
    }),
    learnWithTutorials: t({
      en: "Learn with Tutorials",
      fr: "Apprendre avec les Tutoriels",
      es: "Aprender con los Tutorios",
    }),
    cliDocs: "CLI Docs",
    angularLanguageService: t({
      en: "Angular Language Service",
      fr: "Service de Langage Angular",
      es: "Servicio de Lenguaje Angular",
    }),
    angularDevTools: "Angular DevTools",
    github: "Github",
    twitter: "Twitter",
    youtube: "Youtube",
  },
} satisfies Dictionary;

export default appContent;

Tus declaraciones de contenido pueden definirse en cualquier lugar de tu aplicación siempre que estén incluidas en el directorio contentDir (por defecto, ./src). Y que coincidan con la extensión del archivo de declaración de contenido (por defecto, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

Para más detalles, consulta la documentación de declaración de contenido.

Para utilizar las características de internacionalización de Intlayer en toda tu aplicación Angular, necesitas proveer Intlayer en la configuración de tu aplicación.

import { ApplicationConfig } from "@angular/core";
import { provideRouter } from "@angular/router";
import { provideIntlayer } from "angular-intlayer";
import { routes } from "./app.routes";

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideIntlayer(), // Añade el proveedor de Intlayer aquí
  ],
};

Luego, puedes usar la función useIntlayer dentro de cualquier componente.

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  content = useIntlayer("app");
}

Y en tu plantilla:

<div class="content">
  <h1>{{ content().title }}</h1>
  <p>{{ content().congratulations }}</p>
</div>

El contenido de Intlayer se devuelve como una Señal (Signal), por lo que accedes a los valores llamando a la señal: content().title.

Para cambiar el idioma de tu contenido, puedes usar la función setLocale proporcionada por la función useLocale. Esto te permite establecer el idioma de la aplicación y actualizar el contenido en consecuencia.

Crea un componente para cambiar entre idiomas:

import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { useLocale } from "angular-intlayer";

@Component({
  selector: "app-locale-switcher",
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="locale-switcher">
      <select
        [value]="locale()"
        (change)="setLocale($any($event.target).value)"
      >
        @for (loc of availableLocales; track loc) {
          <option [value]="loc">{{ loc }}</option>
        }
      </select>
    </div>
  `,
})
export class LocaleSwitcherComponent {
  localeCtx = useLocale();

  locale = this.localeCtx.locale;
  availableLocales = this.localeCtx.availableLocales;
  setLocale = this.localeCtx.setLocale;
}

Luego, usa este componente en tu app.component.ts:

import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { useIntlayer } from "angular-intlayer";
import { LocaleSwitcherComponent } from "./locale-switcher.component";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet, LocaleSwitcherComponent],
  templateUrl: "./app.component.html",
  styleUrl: "./app.component.css",
})
export class AppComponent {
  content = useIntlayer("app");
}

Configurar TypeScript

Intlayer utiliza el aumento de módulos para aprovechar los beneficios de TypeScript y hacer que tu base de código sea más sólida.

Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados.

{
  // ... Tus configuraciones existentes de TypeScript
  "include": [
    // ... Tus configuraciones existentes de TypeScript
    ".intlayer/**/*.ts", // Incluir los tipos autogenerados
  ],
}

Configuración Git

Se recomienda ignorar los archivos generados por Intlayer. Esto te permite evitar subirlos a tu repositorio de Git.

Para hacer esto, puedes añadir las siguientes instrucciones a tu archivo .gitignore:

# Ignorar los archivos generados por Intlayer
.intlayer

Extensión de VS Code

Para mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la Extensión oficial de Intlayer para VS Code.

Instalar desde el Marketplace de VS Code

Esta extensión proporciona:

Autocompletado para las claves de traducción.
Detección de errores en tiempo real para traducciones faltantes.
Vistas previas en línea del contenido traducido.
Acciones rápidas para crear y actualizar fácilmente las traducciones.

Para más detalles sobre cómo usar la extensión, consulta la documentación de la Extensión de VS Code de Intlayer.

Ir más allá

Para ir más allá, puedes implementar el editor visual o externalizar tu contenido usando el CMS.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Traduce tu sitio Angular 21 (Vite) usando Intlayer | Internacionalización (i18n)

Tabla de Contenidos

¿Por qué Intlayer en lugar de alternativas?

Guía Paso a Paso para Configurar Intlayer en una Aplicación Angular

Configurar TypeScript

Configuración Git

Extensión de VS Code

Ir más allá

Uh oh!

FilesExpand file tree

intlayer_with_angular_21.md

Latest commit

History

intlayer_with_angular_21.md

File metadata and controls

Traduce tu sitio Angular 21 (Vite) usando Intlayer | Internacionalización (i18n)

Tabla de Contenidos

¿Por qué Intlayer en lugar de alternativas?

Guía Paso a Paso para Configurar Intlayer en una Aplicación Angular

Configurar TypeScript

Configuración Git

Extensión de VS Code

Ir más allá