Angular Academy · Leçon

Créer des bundles localisés

Produisez des versions de l’application pour chaque langue

Créer des bundles localisés est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 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.

Une compilation par langue

Le système i18n d’Angular fonctionne lors de la compilation : il produit un paquet entièrement optimisé et distinct pour chaque langue, avec les traductions intégrées. Les utilisateurs ne téléchargent que leur langue, sans coût de traduction à l’exécution.

Configurer les compilations localisées

Une fois les langues déclarées dans angular.json, définissez localize: true dans les options de compilation pour générer toutes les langues en une seule fois.

"build": {
  "options": {
    "localize": true,
    "outputPath": "dist/app"
  }
}

Compiler toutes les langues

Exécutez la compilation de production ; la CLI génère un dossier par langue, chacun contenant une application complète.

ng build --localize
# dist/app/en/  dist/app/fr/  dist/app/es/

Compiler une seule langue

Pour accélérer les itérations, vous pouvez compiler une seule langue en transmettant son code.

ng build --localize=fr

Définir le base href par langue

Chaque compilation par langue peut avoir son propre baseHref afin d’être servie depuis un sous-chemin comme /fr/. Configurez-le sous chaque langue dans angular.json.

"locales": {
  "fr": {
    "translation": "src/locale/messages.fr.xlf",
    "baseHref": "/fr/"
  }
}

Servir une langue précise en développement

ng serve sert une seule langue à la fois. Transmettez la configuration ou la langue dont vous souhaitez prévisualiser les traductions pendant le développement.

ng serve --configuration=fr

Rediriger les utilisateurs vers leur langue

Comme chaque langue correspond à un dossier distinct pouvant être déployé, vous utilisez généralement le serveur ou un CDN pour rediriger les utilisateurs vers le sous-chemin approprié en fonction de leur en-tête Accept-Language ou d’un sélecteur de langue.

$localize à l’exécution pour les configurations personnalisées

Les configurations avancées peuvent charger les traductions à l’exécution avec loadTranslations() depuis @angular/localize, avant l’amorçage. Cette approche remplace la compilation par langue par un paquet unique accompagné d’une table de traductions récupérée séparément.

import { loadTranslations } from '@angular/localize';
loadTranslations(frTranslations);
// then bootstrapApplication(App)

Exigence de polyfill

L'utilisation de $localize nécessite le polyfill @angular/localize. Ajoutez-le une seule fois avec le CLI ; il enregistre la variable globale nécessaire à la traduction des modèles balisés.

ng add @angular/localize

La taille du paquet reste réduite

Comme la traduction s'effectue au moment de la compilation, le paquet français contient uniquement le texte français, sans aucune autre langue ni moteur de traduction envoyé au navigateur. C'est pourquoi l'internationalisation à la compilation permet de conserver des applications légères.

Déployer le résultat

Déployez l'intégralité du répertoire dist/app ; chaque sous-dossier de langue est une application autonome. Configurez votre hôte afin que /fr/ serve la version française et que la langue par défaut soit servie à la racine ou sur son propre chemin.

Vérification rapide

Comment Angular fournit-il les traductions ?

Récapitulatif

Définissez localize: true et exécutez ng build --localize pour générer un dossier par langue, chacun contenant une application complète. Utilisez un baseHref propre à chaque langue (par exemple /fr/), servez une seule langue en développement avec --configuration, ajoutez le polyfill @angular/localize et, si nécessaire, chargez les traductions à l'exécution pour les configurations personnalisées.

Questions Fréquemment Posées

La leçon « Créer des bundles localisés » est-elle gratuite ?

Oui — le texte complet de « Créer des bundles localisés » 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 « Créer des bundles localisés » ?

Produisez des versions de l’application pour chaque langue 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 4 sur 4.

Combien de temps prend la leçon « Créer des bundles localisés » ?

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