Lab 24 : Internationalisation (i18n)

📖 Ressources

• Référence i18n

🚀 Code de départ

album-wholesale-v17-signal-pre-jest

Dans ce lab, vous ajouterez la prise en charge multi-langues à l’application album wholesale en utilisant le système i18n natif d’Angular. Vous marquerez les chaînes pour la traduction, extrairez un fichier de messages XLIFF, fournirez une traduction française et construirez un bundle localisé.

📝 Instructions

Étape 1 : Marquer les chaînes dans les templates

Ajoutez l’attribut i18n aux éléments texte :

<!-- Texte simple -->
<h1 i18n="@@app.title">Album Store</h1>

<!-- Avec description pour les traducteurs -->
<p i18n="Nombre d'albums|Affiche le nombre d'albums@@album.count">
  Albums disponibles
</p>

<!-- Traduction d'attribut -->
<input
  type="search"
  i18n-placeholder="@@search.placeholder"
  placeholder="Rechercher des albums…"
/>

<!-- Bouton -->
<button i18n="@@cart.add">Ajouter au panier</button>

Marquez au moins 5 chaînes dans l’application.

Étape 2 : Configurer la locale source

Dans angular.json, ajoutez la configuration i18n :

{
  "projects": {
    "album-wholesale": {
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf"
          }
        }
      }
    }
  }
}

Étape 3 : Extraire le fichier de messages

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

Cela génère src/locale/messages.xlf. Ouvrez le fichier — vous verrez chaque chaîne marquée comme une <trans-unit>.

Étape 4 : Créer la traduction française

Copiez le fichier source et renommez-le :

cp src/locale/messages.xlf src/locale/messages.fr.xlf

Ouvrez messages.fr.xlf et ajoutez des éléments <target> pour chaque unité :

<trans-unit id="app.title" datatype="html">
  <source>Album Store</source>
  <target>Boutique d'Albums</target>
</trans-unit>

<trans-unit id="cart.add" datatype="html">
  <source>Add to cart</source>
  <target>Ajouter au panier</target>
</trans-unit>

<trans-unit id="search.placeholder" datatype="html">
  <source>Search albums…</source>
  <target>Rechercher des albums…</target>
</trans-unit>

Traduisez toutes les unités extraites.

Étape 5 : Utiliser les expressions pluriel et select

<!-- Pluriel -->
<p i18n="@@cart.items">
  {itemCount, plural,
    =0 {Aucun article dans le panier}
    =1 {1 article dans le panier}
    other {{{itemCount}} articles dans le panier}
  }
</p>

<!-- Select (genre ou catégorie) -->
<span i18n="@@album.type">
  {albumType, select,
    vinyl {Disque vinyle}
    cd {Disque compact}
    other {Numérique}
  }
</span>

Ajoutez les traductions françaises pour ces expressions dans messages.fr.xlf :

<trans-unit id="cart.items" datatype="html">
  <source>
    {itemCount, plural,
      =0 {No items in cart}
      =1 {1 item in cart}
      other {{{itemCount}} items in cart}
    }
  </source>
  <target>
    {itemCount, plural,
      =0 {Aucun article}
      =1 {1 article}
      other {{{itemCount}} articles}
    }
  </target>
</trans-unit>

Étape 6 : Construire avec la localisation

Configurez la cible de build dans angular.json :

"build": {
  "configurations": {
    "fr": {
      "localize": ["fr"]
    },
    "production": {
      "localize": true
    }
  }
}

Construisez toutes les locales :

ng build --localize

Inspectez le dossier dist/ — vous devriez voir les sous-dossiers browser/en-US/ et browser/fr/.

Étape 7 : Servir et vérifier

Servez le build français localement :

cd dist/album-wholesale/browser/fr
npx http-server -p 8080

Ouvrez http://localhost:8080 et vérifiez que toutes les chaînes marquées apparaissent en français.