Angular Academy · Leçon

Extraire et traduire les messages

Générez et renseignez les fichiers de traduction

Extraire et traduire les messages est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Du texte marqué aux fichiers de traduction

Une fois le texte marqué avec i18n, Angular peut regrouper chaque message dans un fichier source de traduction. Les traducteurs renseignent chaque langue cible, puis la compilation réintègre ces traductions. Cette leçon présente l’extraction et le format de fichier.

Exécuter ng extract-i18n

La commande de la CLI ng extract-i18n analyse votre application à la recherche de messages marqués et écrit un fichier source de traduction (par défaut messages.xlf).

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

Choisir le format et le chemin de sortie

Vous pouvez choisir le format et la destination. XLIFF (xlf) est le format par défaut ; XLIFF 2 et le format arb fondé sur JSON sont également pris en charge.

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

Anatomie d’un fichier XLF

Chaque message marqué devient un trans-unit avec une source (votre texte original) et une target vide que le traducteur doit renseigner.

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

Créer des fichiers par langue

Copiez messages.xlf dans un fichier pour chaque langue cible, nommez-les avec le code de langue, puis traduisez les cibles.

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

Renseigner les traductions

Le traducteur remplace chaque target vide par le texte traduit, en conservant le même id afin qu’Angular sache à quelle source il correspond.

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

Les espaces réservés doivent être conservés

Les interpolations apparaissent sous forme de balises d’espace réservé <x>. Les traducteurs doivent les conserver, mais peuvent les réordonner pour respecter la grammaire de la langue cible.

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

Réextraire après des modifications

Lorsque vous ajoutez ou modifiez du texte marqué, exécutez de nouveau ng extract-i18n. Les identifiants personnalisés @@ conservent les traductions existantes ; les identifiants générés automatiquement peuvent changer et nécessiter une nouvelle traduction.

Configurer les langues dans angular.json

Enregistrez chaque langue et son fichier de traduction dans la configuration i18n du projet afin que la compilation sache où les trouver.

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

Gérer les traductions manquantes

Vous pouvez indiquer à la compilation comment traiter les messages non traduits : error fait échouer la compilation, warning consigne un avertissement et utilise le texte source, tandis que ignore reste silencieux. Utilisez error dans la CI pour détecter les éléments manquants.

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

Utiliser les outils de traduction

XLIFF est une norme du secteur : les plateformes de traduction professionnelles (ainsi que des outils comme Crowdin ou Lokalise) peuvent importer le fichier extrait et exporter les traductions terminées dans le même format.

Vérification rapide

Que produit ng extract-i18n ?

Récapitulatif

Exécutez ng extract-i18n pour regrouper le texte marqué dans un fichier source XLIFF composé de trans-unit. Copiez-le pour chaque langue, renseignez les target en conservant les espaces réservés, enregistrez les langues dans angular.json et définissez i18nMissingTranslation pour détecter les éléments manquants. Les identifiants stables @@ protègent les traductions lors des modifications.

Questions Fréquemment Posées

La leçon « Extraire et traduire les messages » est-elle gratuite ?

Oui — le texte complet de « Extraire et traduire les messages » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Extraire et traduire les messages » ?

Générez et renseignez les fichiers de traduction Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Extraire et traduire les messages » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy