Ajouter un support multilingue à angulaire

Ces termes peuvent également être familiers dans leurs versions raccourcies: I18N (où 18 est le nombre de lettres entre le premier «I» et la dernière «N» d'internationalisation) et L10N (où 10 est le nombre de lettres entre le «I» et le 'n' de la localisation).

02. Quelle est la localisation?

Il y a plus de 6 000 langues utilisées dans le monde aujourd'hui, dont la plupart ne sont utilisées que par de très petits groupes de personnes. Pourtant, même si nous ne nous concentrons que sur les trois premières langues - Mandarin, espagnol et anglais - il y aura des différences significatives de mise en forme de jour, de structure grammaticale, de pluralisation et de mise en forme du nombre.

Si nous incluons la cinquième langue la plus largement utilisée - arabe - nous rencontrons une autre différence; L'arabe est un script de droite à gauche (RTL) qui signifie que l'interface utilisateur devra également être reflétée.

Donc, pendant la localisation, nous devons envisager des différences de grammaire, de mise en page et de formatage, et bien sûr, nous devons également modifier le texte lui-même. Angular peut aider avec une grande partie de cela, mais vous aurez toujours besoin de traduire manuellement le texte (et de sauvegarder la traduction dans stockage en ligne , donc c'est sécurisé et partageable avec votre équipe).

03. Les locaux en angulaire

Nous devrons localiser pour chaque région que nous devons soutenir. Un local fait référence à l'ensemble général de préférences pour les considérations mentionnées ci-dessus qui ont tendance à être partagées dans une région du monde, généralement un pays. Chaque paramètre local est représenté par un identifiant Locale Unicode, qui spécifie le code de langue et l'extension locale.

Les paramètres régionaux par défaut de l'angulaire sont «EN-US», qui est le code de langue 'fr' (anglais) comme parlé dans la région «US» (États-Unis d'Amérique). Une application localisée pour 'fr-US' sera subtilement différente d'une application localisée pour "EN-GB" qui est l'anglais comme parlé en Grande-Bretagne. Par exemple, aux dates américaines sont (déconcertées) formatées MM / DD / AAAA, alors qu'au Royaume-Uni, nous utilisons l'approche la plus judicieuse DD / MM / AAAA. Cette différence mineure peut entraîner une erreur majeure de la compréhension.

Pour rendre les choses intéressantes localisons notre application de démonstration pour l'arabe comme parlé en Irak, alias «AR-IQ» et anglais comme parlé au Royaume-Uni, aka «EN-GB». Nous utiliserons l'anglais comme défaut de cette époque.

04. Construire la configuration

Notre projet de démonstration a été créé à l'aide de CLI angular, qui inclut une outils utile. Nous allons utiliser le compilateur à l'avance (AOT) pour ce projet afin de pouvoir apporter des modifications au fichier de configuration de la CLI: 'angular.json'. Si vous souhaitez utiliser Just-in-Time (JIT), vous devez configurer des choses légèrement différemment.

Avec une boîte à AOT, vous obtenez une petite application prête-à-go de rendu plus rapide et plus rapide qui charge sans avoir besoin de demandes asynchrones d'aller chercher des objets tels que des modèles et des foyers de style. En conséquence, vous devez créer une version pour chaque paramètre locale et servir la construction appropriée à l'aide de l'URL ou une sorte de logique de détection de langage côté serveur. L'approche la plus simple consiste à créer un répertoire pour chaque paramètre local, par ex. www.example.com/en-gb et www.example.com/ar-iq. Le commerce est que vous ne pouvez pas changer de langue à la volée, mais dans la réalité, il est peu probable que ce soit quelque chose de requis par des utilisateurs réels.

Tout d'abord, nous devons ajouter une configuration de construction pour nos locaux arabes. Dans le fichier JSON recherche l'objet 'architecte.build.configurations'. Ajoutez le bloc suivant pour définir une configuration pour la locale:

 "AR-IQ": {
    "basehref": "/ ar-iq /",
    "Deployurl": "/ ar-iq /",
    "OutputPath": "dist / angulaire-i18n-démo /
ar-iq ",
    "I18NFILE": "SRC / locale / messages.ar-IQ.
XLF ",
    "i18nformat": "XLF",
    "I18Nlocale": "AR-IQ" 

Cette configuration indique à l'angulaire où émettre la construction compilée et laquelle des traductions Fichier et format à utiliser. Il définit également les paramètres régionaux et indique angulaire quel répertoire l'application sera déployée à.

Nous devons également modifier les options par défaut dans «architecte.build.options» pour utiliser la locale «EN-GB». Définissez les propriétés suivantes comme indiqué. Notez que nous permettons à ATOT ici de l'autre côté de la carte afin qu'il soit utilisé pour les constructions de production et de développement:

 "OutputPath": "dist / angulaire-i18n-démo /
EN-GB ",
  "i18nlocale": "EN-GB",
  "Deployurl": "/ fr-gb /",
  "basehref": "/ fr-gb /",
  "AOT": vrai 

L'angulaire prend en charge un certain nombre de locaux. Assurez-vous d'utiliser la valeur correcte de la propriété 'i18nlocale'. Vous pouvez voir la liste complète ici .

Dans les coulisses, les configurations ci-dessus se chargent et lisent l'un de ces fichiers de préférence locale.

05. Servir la configuration

En plus de la configuration de la sortie de construction, nous devons également configurer la configuration de la commande 'NG Servir' pour le développement. Ceci est plus simple car nous pouvons simplement référencer la configuration de construction que nous venons d'ajouter. Dans 'Angular.json' Ajoutez le bloc suivant à "architecte.serve.configurations":

 "AR-IQ": {
    "BrowserSertaget": "Angular-i18n-
Démo: Construire: AR-IQ ",
    "ServerPath": "/ ar-iq /"
  } 

Ici, nous parlons des options de configuration de construction à l'aide de la propriété 'BrowserSertaget', et nous définissons également le "ServerPath". Avant de pouvoir servir ou construire l'application arabe, nous devons créer le fichier de traduction référencé dans la propriété «I18NFILE» ci-dessus. CLI angulaire comprend un outil permettant d'extraire du texte marqué dans un fichier source de traduction de l'industrie.

Nous couvrirons ces fichiers plus détaillés plus loin dans le didacticiel, mais nous devons désormais exporter le fichier de base et vide pour nous permettre de compiler.

Nous utiliserons la commande 'ng xi18n' avec les options suivantes. C'est la seule fois où nous inclurons l'ID locale dans le nom de fichier '-out-file':

 $ ng xi18n --Output-chemin Locale --Out -Out -Out -Out -Out
Messages.ar-iq.xlf --i18n-locale AR-IQ 

Cela devrait créer un fichier dans un répertoire SRC / locale. À partir de maintenant, nous allons toujours émettre le fichier nommé 'Messages.xlf' et le copier manuellement sur la version avec l'identifiant locale dans le nom. La raison en est d'empêcher l'outil d'extraction d'écraser toutes les traductions existantes que nous avons ajoutées au fichier.

06. Switch Configuration

À ce stade, nous pouvons maintenant compiler le projet et voir ce qui se passe, mais nous devons dire à la commande 'NG Servir' quelle configuration à utiliser. Premièrement, jetons un coup d'oeil à la version anglaise. Aucun changement ici car l'anglais est la valeur par défaut:

 $ NG Servir 

Comme vous pouvez le constater, cela ressemble beaucoup à la version originale, qui utilise les paramètres régionaux par défaut de Angular de 'EN-US ». La différence notable est la monnaie spécifie maintenant US $ au lieu de seulement $. D'accord, essayons maintenant la version arabe. Arrêtez la version anglaise et exécutez:

 $ NG Servir --Configuration = AR-IQ 

Comme vous vous attendez, il existe des différences plus évidentes dans cette version, la date est maintenant écrite en arabe. Angular peut faire cela parce que les noms de certaines choses, tels que des mois et des jours, proviennent d'une liste de jeux et ils sont finalement liés à un nombre connu. Tout le reste, cependant, est toujours en anglais.

07. Tuyaux sensibles à la locale

Regardez de plus près le code source de 'app.component.html' et vous verrez que nous utilisons un certain nombre de tuyaux différents. Les tuyaux angulaires suivants sont conscients des paramètres régionaux, ce qui signifie qu'ils adaptent leur sortie basée sur les paramètres régionaux actuels: «Datepipe», «Currencipe», «décimalpipe» et «pourcentagepipe».

Si vous utilisez ces tuyaux soigneusement angulaires traitera de nombreuses jambes de localisation pour vous. Par soigneusement, nous voulons dire utiliser les options prédéfinies disponibles où que vous puissiez le faire. Un bon exemple est le formatage de la date des États-Unis par rapport au Royaume-Uni que nous avons mentionné précédemment. Si vous êtes au Royaume-Uni et que vous souhaitez afficher une date à l'aide du format (sensible) jour-mois-mois-année, vous pourriez être frustré de constater que l'option «Shortdate» prédéfinie rend comme m / d / yy (par exemple, . 10/9/18) et être tenté de coder le format souhaité comme celui-ci:

 {{mydate | Date: 'DD / mm / y'}} 

Mais nous savons maintenant que nous obtenons le format M / D / AA, car Angular utilise le paramètre local «EN-US» par défaut. Donc, au lieu de codage dur, le format, nous devons utiliser l'option «Shortdate» et localiser notre application pour utiliser «EN-GB».

 {{mydate | Date: 'Shortdate'}} 

Il faut un peu plus d'effort de peu, mais nous pouvons ensuite ajouter des locaux au contenu de notre cœur et toujours avoir un format de date convivial.

08. Remplacer les options prédéfinies

Malheureusement, il ne semble pas qu'il soit facile de remplacer un format prédéfini. Par exemple, vous ne pouvez pas simplement décider que vous préférez que le format «ShortDate» soit dd / mm / aaaa au lieu de DD / mm / y car il n'ya aucun moyen de modifier le format au moment de l'exécution. Vous ne pouvez pas également ajouter vos propres options prédéfinies.

Pour ces cas de bord, vous pouvez créer un tuyau de date personnalisé qui enveloppe le «Datepipe» angulaire et gère les formats personnalisés par région. Tout ce qu'il ne reconnaît pas serait transmis au «Datepipe» intégré.

09. Currencype

De l'étagère, le «Currencype» formatera un nombre en dollars américains, coupera deux décimales et ajouter des groupements tels que définis dans les préférences de la locale.

Vous remarquerez que dans nos deux localités, la monnaie est toujours en dollars américains. Il ne passe pas par magiquement à Sterling (GBP) lorsque vous utilisez la locale 'EN-GB'. La raison en est que 10 £ n'est pas identique à 10 $. Vous devez donc spécifier explicitement la monnaie que votre numéro se réfère.

Mettez à jour 'app.component.html' pour utiliser GBP partout. Lorsque vous spécifiez le code de devise, vous devez utiliser la valeur correcte de la norme ISO 4217 (liste disponible en ligne).

Modifiez les deux tuyaux de change en ajoutant ':' GBP '' comme si:

 {{valeur $ | async | Devise: 'GBP'}} 

Et vous allez commencer à voir le symbole £ au lieu de US $.

N'oubliez pas que cela ne fait rien d'intelligent comme convertir automatiquement USD en valeur équivalente en GBP si vous modifiez la monnaie - cela modifie simplement le symbole utilisé.

10. Traduction du workflow

D'accord, nous avons donc que nos deux groupes locaux configurés et angular font de l'autre du travail pour nous sortir de la boîte, mais le texte est toujours en anglais. Angular ne peut pas traduire cela automatiquement, tristement, mais cela peut nous aider avec des parties du flux de travail. C'est ce qui doit arriver:

• Drapeau texte statique dans tous les composants de la traduction
• Exporter un fichier de traduction contenant ce texte statique
• Modifier le fichier de traduction et ajouter les traductions correspondantes
• Fusionner le fichier de traduction traduit dans l'application

Angular nous aide avec les étapes 2 et 4, mais comme des développeurs dont nous avons besoin faire une étape 1 manuellement. L'étape 3 serait généralement complétée par un professionnel de la traduction ou une agence, à l'aide d'un logiciel spécial pour lire et mettre à jour le fichier de traduction.

11. Détails de l'axe

Pour y parvenir, nous devons ajouter un attribut spécial à chaque élément contenant du texte fixe à traduire. Pour être clair si le contenu arrive d'une API, ce n'est pas un texte fixe et que vous auriez besoin de localiser cela dans l'API. Il vous suffit d'ajouter l'attribut lorsque le texte est écrit directement dans le modèle HTML de votre code source. Un point clé ici est que vous devriez essayer de conserver vos fichiers dossiers locale-agnostic - en d'autres termes, évitez de mettre un texte à traduire dans la logique de composant et de la conserver dans les modèles. Sinon, l'outil d'extraction ne sera pas capable de l'extraire. C'est une bonne pratique de toute façon de séparer vos préoccupations - dans la vie et en code.

Ouvrons 'app.component.html' et commencez par le titre "Valeur actuelle". Ajoutez simplement l'attribut 'i18n' à l'élément qui contient directement le texte.

 & lt; div la classe = "meta__title" i18n & gt;
     Valeur actuelle
   & lt; / div & gt; 

Il est important de comprendre que ceci est juste un attribut personnalisé "muet". Ce n'est pas une directive angulaire qui déclenche quoi que ce soit au moment de l'exécution, le compilateur le supprime après la traduction.

Quoi qu'il en soit, voyons ce qui se passe lorsque nous exécutons à nouveau l'outil d'extraction pour régénérer le fichier de traduction. N'oubliez pas que «-Out-file» est juste 'Messages.xlf' maintenant:

 $ ng xi18n --Output-chemin Locale --Out -Out -Out -Out -Out
messages.xlf --i18n-locale AR-IQ 

Ouvrez le fichier XLF de sortie et vous devez voir un nouveau bloc d'unité de traduction qui ressemble à quelque chose comme celui-ci avec quelques informations de contexte supplémentaires:

 & lt; trans-unité ID = "FACE3D45C0F0CD38B726E7798DA15
3E2F8D55551 "DataType =" HTML "& GT;
    & lt; source & gt;
      Valeur actuelle
    & lt; / source & gt; 

Génial, cela signifie que l'outil a ramassé l'attribut «I18N». Cette identification longue est générée par l'outil et restera la même si le texte change. Si vous avez plusieurs instances d'exactement le même texte, ils obtiendrez tous le même identifiant. Ne pas éditer cet identifiant!

Si vous préférez, vous pouvez spécifier un identifiant personnalisé dans l'attribut «I18N». Si vous faites cela, l'identifiant restera le même même si le texte change, vous devez donc vous assurer de ne pas avoir de collisions d'identité dans votre application. Utilisez le préfixe '@@' pour définir un identifiant personnalisé. Ici, l'identifiant deviendra "titre":

 & lt; div class = "meta__title" i18n = "@@ title" & gt;
     Valeur actuelle
   & lt; / div & gt; 

12. Ajouter un contexte

 & lt; div i18n = "Signification | Description @@
personnalisé "& gt; text & lt; / div et gt; 

 & lt; div class = "Meta__title" i18n = "carte
Titre | Valeur en ce moment dans le temps @@ Titre "& GT;
     Valeur actuelle
   & lt; / div & gt; 

 & lt; p i18n = "Valeur de fermeture | Valeur quand le marché
fermé hier @@ fermetingValue "& gt;
Exécutez à nouveau l'outil d'extraction et vous verrez cette nouvelle unité de traduction:
  & lt; ID trans-unité = "ClostingValue"
DataType = "html" & gt;
    & lt; source & gt; hier & amp; la valeur de fermeture des APOS était
& lt; x id = "Interpolation" Equiv-text = "{{{
FermetureValue | Devise: & amp; APOS; GBP & AMP; APOS;
}} "/ & gt; & lt; / source & gt; 

 {{secondes}} {secondes, pluriel, un
{second}, autre {secondes}} 

 là {watchers, pluriel, = 0 {n'est personne} = 1
{est une personne} = 2 {sont deux personnes}
    autres {sont {{watchers}}}}}
Regarder maintenant. 

 & lt; p i18n = "Observateurs | Nombre de personnes
regarder la valeur @@ watchers "& gt; 

 La valeur {TREND $ | async, sélectionnez, up
{Augmentation} Down {Diminué} Stable
    {n'a pas changé}} 

 & lt; div mas = "carte__info" i18n = "valeur
Tendance | Décrit la valeur de changement de valeur @@ Trend "& GT; 

 & lt; div class = "carte__info" i18n = "transactions
Compte | Nombre de transactions aujourd'hui @@
transactions "& gt;
     Transactions: {{{transactions $ | async |
numéro }}
   & lt; / div & gt; 

 $ NG Servir --Configuration = AR-IQ 

 Erreur dans les erreurs d'analyse XLIFF: Message * ID *
manque une traduction ("

 & lt; source & gt; valeur actuelle & lt; / source & gt;
       & lt; cible & gt; texte arabe ici & lt; / cible et gt; 

 & lt; cible et gt; texte arabe ici & lt; x
ID = "Interpolation" Equiv-text = "{{FermerValue
| Devise: & amp; APOS; GBP & AMP; APOS; }} "/> ;.< ;/target> ;

 @HostBinding ('attr.dir') dir = 'ltr'; 

 Constructeur (@Inject (Locale_id) Locale privée: String) {} 

 Si (this.locale.startswith ('ar')) {
     cela.dir = 'rtl';
} 

 $ NG Servir --Configuration = Production-AR-IQ