i18n Angular avec Transloco : guide de configuration et de traduction
De l'installation à la production : configurez Transloco, gérez les pluriels avec la syntaxe ICU, ajoutez des replis linguistiques intelligents et automatisez les traductions avec l'IA.
Installer Transloco
Transloco est la bibliothèque i18n tierce la plus populaire pour Angular. Elle offre le chargement des traductions à l'exécution, la prise en charge du format de message ICU, des portées à chargement différé, ainsi qu'une API de modèle claire avec directives structurelles et pipes.
npm install @jsverse/translocoConfigurer Transloco
Enregistrez Transloco dans la configuration de votre application. Vous devez fournir les langues disponibles, définir une langue par défaut et configurer le chargeur de traductions. Transloco prend en charge aussi bien les composants standalone (Angular 14+) que le modèle NgModule.
Composants standalone (recommandé)
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import {
provideTransloco,
TranslocoHttpLoader,
} from '@jsverse/transloco';
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideTransloco({
config: {
availableLangs: ['en', 'de', 'ja', 'es', 'fr'],
defaultLang: 'en',
fallbackLang: 'en',
reRenderOnLangChange: true,
prodMode: true,
},
loader: TranslocoHttpLoader,
}),
],
};Modèle NgModule
// app.module.ts
import { NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {
TranslocoModule,
TRANSLOCO_LOADER,
TranslocoHttpLoader,
provideTransloco,
} from '@jsverse/transloco';
@NgModule({
imports: [TranslocoModule],
providers: [
provideTransloco({
config: {
availableLangs: ['en', 'de', 'ja', 'es', 'fr'],
defaultLang: 'en',
fallbackLang: 'en',
reRenderOnLangChange: true,
prodMode: true,
},
loader: TranslocoHttpLoader,
}),
],
})
export class AppModule {}Créer des fichiers de traduction
Créez un fichier JSON par langue dans src/assets/i18n/. Utilisez des clés imbriquées pour organiser les chaînes par fonctionnalité. Transloco utilise le format de message ICU pour les pluriels et les variables.
// assets/i18n/en.json
{
"nav": {
"home": "Home",
"about": "About",
"settings": "Settings"
},
"greeting": "Hello, {{ name }}!",
"cart": {
"itemCount": "{count, plural, one {# item} other {# items}}"
}
}
// assets/i18n/de.json
{
"nav": {
"home": "Startseite",
"about": "Uber uns",
"settings": "Einstellungen"
},
"greeting": "Hallo, {{ name }}!",
"cart": {
"itemCount": "{count, plural, one {# Artikel} other {# Artikel}}"
}
}Utiliser les traductions dans les modèles et les services
Transloco propose trois façons de traduire dans les modèles : la directive structurelle (*transloco), le pipe (| transloco) et le service (TranslocoService) pour le code TypeScript. La directive structurelle est recommandée dans la plupart des cas, car elle crée un seul abonnement et met la fonction de traduction à disposition de tout le bloc de modèle.
Traduction dans les modèles
<!-- Using the transloco directive (recommended) -->
<ng-container *transloco="let t">
<h1>{{ t('greeting', { name: userName }) }}</h1>
<nav>
<a routerLink="/">{{ t('nav.home') }}</a>
<a routerLink="/about">{{ t('nav.about') }}</a>
</nav>
</ng-container>
<!-- Using the transloco pipe -->
<h1>{{ 'greeting' | transloco:{ name: userName } }}</h1>
<!-- Using the structural directive with read -->
<ng-container *transloco="let t; read: 'nav'">
<a routerLink="/">{{ t('home') }}</a>
<a routerLink="/about">{{ t('about') }}</a>
</ng-container>Traduction via le service (TypeScript)
import { Component, inject } from '@angular/core';
import { TranslocoService } from '@jsverse/transloco';
@Component({
selector: 'app-notification',
template: '<span>{{ message }}</span>',
})
export class NotificationComponent {
private translocoService = inject(TranslocoService);
message = '';
showSuccess() {
// Translate in TypeScript
this.message = this.translocoService.translate('notifications.saved');
}
switchLanguage(lang: string) {
this.translocoService.setActiveLang(lang);
}
}Gérer les pluriels avec le format de message ICU
Transloco utilise le format de message ICU pour les pluriels et les expressions select. ICU gère automatiquement les règles de pluriel complexes — arabe (6 formes), russe (3 formes), japonais (1 forme) — le tout à partir d'une seule chaîne de message. Définissez vos règles de pluriel dans les fichiers de traduction, et Transloco sélectionne la forme correcte à l'exécution.
// assets/i18n/en.json
{
"cart": {
"itemCount": "{count, plural, one {# item} other {# items}}",
"emptyMessage": "Your cart is empty"
},
"notifications": {
"unread": "{count, plural, =0 {No new notifications} one {# new notification} other {# new notifications}}"
}
}
// assets/i18n/ar.json — Arabic has 6 plural forms
{
"cart": {
"itemCount": "{count, plural, zero {لا عناصر} one {عنصر واحد} two {عنصران} few {# عناصر} many {# عنصرًا} other {# عنصر}}"
}
}
// Template usage:
// <span>{{ t('cart.itemCount', { count: cartItems.length }) }}</span>Replis linguistiques intelligents avec angular-locale-chain
Par défaut, Transloco se rabat sur votre langue par défaut lorsqu'une clé de traduction est manquante. Un utilisateur pt-BR voit alors de l'anglais au lieu de traductions pt-PT pourtant parfaitement valables. angular-locale-chain corrige ce problème en fusionnant en profondeur les traductions d'une chaîne de repli configurable avant de les transmettre à Transloco. Chaque clé est ainsi renseignée : aucune lacune, aucune traduction manquante.
npm install angular-locale-chain// app.config.ts — with angular-locale-chain
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import {
provideTransloco,
TranslocoHttpLoader,
TRANSLOCO_LOADER,
TRANSLOCO_FALLBACK_STRATEGY,
} from '@jsverse/transloco';
import {
LocaleChainLoader,
LocaleChainFallbackStrategy,
} from 'angular-locale-chain';
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(),
provideTransloco({
config: {
availableLangs: ['en', 'fr', 'fr-CA', 'pt', 'pt-BR', 'de', 'de-AT'],
defaultLang: 'en',
fallbackLang: 'en',
reRenderOnLangChange: true,
prodMode: true,
},
}),
{
provide: TRANSLOCO_LOADER,
useFactory: () => {
const inner = new TranslocoHttpLoader();
return new LocaleChainLoader(inner, {
defaultLocale: 'en',
});
},
},
{
provide: TRANSLOCO_FALLBACK_STRATEGY,
useFactory: () => new LocaleChainFallbackStrategy(),
},
],
};Structure de fichiers recommandée
my-angular-app/
├── src/
│ ├── assets/
│ │ └── i18n/
│ │ ├── en.json # Source language
│ │ ├── de.json # German
│ │ ├── ja.json # Japanese
│ │ ├── es.json # Spanish
│ │ └── fr.json # French
│ ├── app/
│ │ ├── app.config.ts # Transloco provider config
│ │ ├── app.component.ts
│ │ └── components/
│ │ └── lang-switcher/
│ │ └── lang-switcher.component.ts
│ └── main.ts
├── angular.json
└── package.jsonAutomatiser les traductions
Une fois votre configuration Transloco terminée, traduisez vos fichiers de langue à l'aide de l'IA. Dans votre IDE, demandez à votre assistant IA de traduire votre fichier JSON source, ou utilisez le CLI i18n Agent dans votre pipeline CI/CD pour une localisation entièrement automatisée.
# In your IDE, ask your AI assistant:
> Translate src/assets/i18n/en.json to German, Japanese, and Spanish
✓ de.json created (1.2s)
✓ ja.json created (1.5s)
✓ es.json created (1.1s)
# Or use the CLI in CI/CD:
npx i18n-agent translate src/assets/i18n/en.json --lang de,ja,esAutomatiser la qualité des traductions
Pièges courants
Les traductions affichent des clés brutes
Les clés à portée limitée ne se résolvent pas
Avertissements dans la console en production
Un flash de traductions apparaît lors de la navigation entre les routes
Les utilisateurs régionaux voient l'anglais au lieu de la locale parente
Essayez i18n Agent maintenant
Déposez votre fichier de traduction ici
JSON, YAML, PO, XML, CSV, Markdown, Properties
ou cliquez pour parcourir
Langues cibles
Repli linguistique avec angular-locale-chain
Lorsqu'une clé de traduction est manquante dans une langue régionale comme pt-BR, le TranslocoLoader d'Angular passe directement à la langue par défaut au lieu de vérifier d'abord la langue parente pt.
npm install angular-locale-chainimport { LocaleChainLoader } from 'angular-locale-chain';
new LocaleChainLoader(innerLoader, {
fallbacks: {
'pt-BR': ['pt', 'en'],
'zh-Hant-HK': ['zh-Hant', 'zh', 'en'],
},
defaultLocale: 'en',
});Consultez notre guide de repli de locale pour découvrir la liste complète des frameworks pris en charge et les 75 chaînes intégrées. Learn more →