intlayer_with_angular_21.md

createdAt

2025-04-18

updatedAt

2026-05-31

title

Angular 21 i18n - Guide complet pour traduire votre application

description

Oubliez i18next. Le guide 2026 pour créer une application Angular 21 multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances.

keywords

Internationalisation

Documentation

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	Mise à jour de l'utilisation de l'API Solid useIntlayer pour l'accès direct aux propriétés

version	date	changes
8.0.0	2026-01-26	Sortie de la version stable

version	date	changes
8.0.0	2025-12-30	Ajout de la commande init

version	date	changes
5.5.10	2025-06-29	Historique initial

Traduisez votre site Angular 21 (Vite) avec Intlayer | Internationalisation (i18n)

Table des matières

Pourquoi Intlayer plutôt que des alternatives ?

Par rapport aux solutions principales telles que ngx-translate ou angular-l10n, Intlayer est une solution dotée d'optimisations intégrées telles que :

Intlayer est optimisé pour fonctionner parfaitement avec Angular en offrant une portée du contenu au niveau des composants, des traductions chargées à la demande (lazy-loading) et toutes les fonctionnalités nécessaires pour mettre à l'échelle votre internationalisation (i18n).

Au lieu de charger de lourds fichiers JSON dans vos pages, ne chargez que le contenu strictement nécessaire. Intlayer vous aide à réduire la taille de votre bundle et de vos pages jusqu'à 50 %.

Déclarer le contenu directement au plus près de vos composants facilite la maintenance des applications de grande envergure. Vous pouvez dupliquer ou supprimer le dossier d'une fonctionnalité sans le fardeau mental de devoir passer en revue toute votre base de code de contenu. De plus, Intlayer est entièrement typé pour garantir l'exactitude de vos traductions.

La colocalisation du contenu réduit le contexte nécessaire aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une CLI pour vérifier les traductions manquantes, un LSP, un MCP et des agent skills, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.

Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un compilateur pour automatiser l'extraction de contenu, ainsi qu'une plateforme web pour vous aider à traduire en arrière-plan.

Associer de gros fichiers JSON à vos composants peut ralentir les performances et impacter la réactivité. Intlayer optimise le chargement du contenu directement au moment du build.

Bien plus qu'une simple solution i18n, Intlayer propose un éditeur visuel auto-hébergé et un CMS complet pour gérer votre contenu multilingue en temps réel. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.

Guide étape par étape pour configurer Intlayer dans une application Angular

Voir Modèle d'Application sur GitHub.

Installez les paquets nécessaires en utilisant 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

Le paquet principal qui fournit les outils d'internationalisation pour la gestion de la configuration, la traduction, la déclaration de contenu, la transpilation, et les commandes CLI.
angular-intlayer Le paquet qui intègre Intlayer avec l'application Angular. Il fournit des fournisseurs de contexte et des hooks pour l'internationalisation Angular.
@angular-builders/custom-esbuild Requis pour personnaliser la configuration esbuild d'Angular CLI.

Créez un fichier de configuration pour configurer les langues de votre application :

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

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Vos autres langues
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Via ce fichier de configuration, vous pouvez configurer les URL localisées, la redirection de middleware, les noms de cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les journaux Intlayer dans la console, et plus encore. Pour une liste complète des paramètres disponibles, consultez la documentation de configuration.

Pour intégrer Intlayer avec Angular CLI, vous devez utiliser un builder personnalisé. Ce guide suppose que vous utilisez Vite/esbuild (par défaut pour les projets Angular 21).

D'abord, modifiez votre angular.json pour utiliser le builder esbuild personnalisé. Mettez à jour les configurations build et 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"
              ]
          },
        },
      },
    },
  },
}

Assurez-vous de remplacer your-app-name par le nom réel de votre projet dans angular.json.

Ensuite, créez un fichier esbuild.plugins.ts à la racine de votre projet :

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

export default [intlayerEsbuildPlugin()];

La fonction intlayerEsbuildPlugin configure esbuild avec Intlayer. Elle injecte le plugin pour gérer les fichiers de déclaration de contenu et configure les éléments pour des performances optimales.

Utilisateurs de NX : Les builders Angular de NX chargent les fichiers de plug-in via la résolution ESM native de Node et ne compilent pas les fichiers de plug-in TypeScript à la volée. Utilisez plutôt un fichier .mjs et mettez à jour la référence plugins dans angular.json en conséquence :
import { intlayerEsbuildPlugin } from "angular-intlayer/esbuild";

export default [intlayerEsbuildPlugin()];
Ensuite, dans angular.json, pointez vers "./esbuild.plugins.mjs" au lieu de "./esbuild.plugins.ts".

Créez et gérez vos déclarations de contenu pour stocker les traductions :

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;

Vos déclarations de contenu peuvent être définies n'importe où dans votre application dès qu'elles sont incluses dans le répertoire contentDir (par défaut, ./src). Et qu'elles correspondent à l'extension de fichier de déclaration de contenu (par défaut, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

Pour plus de détails, consultez la documentation sur les déclarations de contenu.

Pour utiliser les fonctionnalités d'internationalisation d'Intlayer dans votre application Angular, vous devez fournir Intlayer dans la configuration de votre application.

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(), // Ajoutez le fournisseur Intlayer ici
  ],
};

Ensuite, vous pouvez utiliser la fonction useIntlayer dans n'importe quel composant.

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");
}

Et dans votre modèle :

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

Le contenu Intlayer est retourné sous forme de Signal, donc vous accédez aux valeurs en appelant le signal : content().title.

Pour changer la langue de votre contenu, vous pouvez utiliser la fonction setLocale fournie par la fonction useLocale. Cela vous permet de définir la langue de l'application et de mettre à jour le contenu en conséquence.

Créez un composant pour basculer entre les langues :

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;
}

Ensuite, utilisez ce composant dans votre 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");
}

Configurer TypeScript

Intlayer utilise l'augmentation de module pour tirer parti de TypeScript et rendre votre base de code plus robuste.

Assurez-vous que votre configuration TypeScript inclut les types autogénérés.

{
  // ... Vos configurations TypeScript existantes
  "include": [
    // ... Vos configurations TypeScript existantes
    ".intlayer/**/*.ts", // Inclure les types autogénérés
  ],
}

Configuration Git

Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les commiter dans votre dépôt Git.

Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier .gitignore :

# Ignorer les fichiers générés par Intlayer
.intlayer

Extension VS Code

Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'extension officielle Intlayer VS Code Extension.

Installer depuis le VS Code Marketplace

Cette extension fournit :

L'autocomplétion pour les clés de traduction.
La détection d'erreurs en temps réel pour les traductions manquantes.
Des aperçus en ligne du contenu traduit.
Des actions rapides pour créer et mettre à jour facilement les traductions.

Pour plus de détails sur l'utilisation de l'extension, consultez la documentation de l'extension VS Code Intlayer.

Aller plus loin

Pour aller plus loin, vous pouvez implémenter l'éditeur visuel ou externaliser votre contenu en utilisant le CMS.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Traduisez votre site Angular 21 (Vite) avec Intlayer | Internationalisation (i18n)

Table des matières

Pourquoi Intlayer plutôt que des alternatives ?

Guide étape par étape pour configurer Intlayer dans une application Angular

Configurer TypeScript

Configuration Git

Extension VS Code

Aller plus loin

Uh oh!

FilesExpand file tree

intlayer_with_angular_21.md

Latest commit

History

intlayer_with_angular_21.md

File metadata and controls

Traduisez votre site Angular 21 (Vite) avec Intlayer | Internationalisation (i18n)

Table des matières

Pourquoi Intlayer plutôt que des alternatives ?

Guide étape par étape pour configurer Intlayer dans une application Angular

Configurer TypeScript

Configuration Git

Extension VS Code

Aller plus loin