Internationaliser (i18n) avec Angular
Créez un nouveau composant :
ng g component components/component
Créez votre template HTML. Il faut ajouter i18n pour identifier l'élément à traduire.
<h1 i18n="@@title">Un super titre</h1>
@@title est l'identifiant de la traduction.
Générez un fichier de traduction :
ng xi18n
Vous pouvez aussi utiliser l'option --output-path pour enregistrer le fichier dans un dossier spécifique.
ng xi18n --output-path src/locale
Vous pouvez changer de nom du fichier avec l'option --out-file.
ng xi18n --out-file source.xlf
Le nom est messages par défaut.
Vous pouvez changer le format du fichier. XLIFF 1.2 (default) ou XLIFF 2 ou XML Message Bundle (XMB)
ng xi18n --i18n-format=xlf
ng xi18n --i18n-format=xlf2
ng xi18n --i18n-format=xmb
Vous pouvez préciser la langue source de votre application en utilisant l'option --i18n-locale
ng xi18n --i18n-locale fr
Angular n'utilise pas la propriété source-language mais certains logiciels de traductions l'utilisent.
Enfin, vous pouvez bien sur cumuler toutes les options :
ng xi18n --output-path src/locale --out-file source.xlf --i18n-format=xlf --i18n-locale fr
Une fois le fichier généré, vous pouvez remarquer l'élément trans-unit. A l’intérieur, on trouve la balise source qui sera importante pour la suite.
Créez un fichier dans le même répertoire que le fichier généré en ajoutant l'extension du pays. Par exemple :
messages.en.xlf
Vous pouvez consulter la liste des extensions supportées sur le dépôt d'Angular
Copiez collez le contenu du fichier généré dans le nouveaux fichier. Ajoutez la balise target en dessous de la balise source.
Le fichier source ressemble à ça :
<?xml version="1.0" encoding="UTF-8" ?> <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2"> <file source-language="fr" datatype="plaintext" original="ng2.template"> <body> <trans-unit id="title" datatype="html"> <source>Un super titre</source> <context-group purpose="location"> <context context-type="sourcefile">src/app/components/component/component.component.html</context> <context context-type="linenumber">1</context> </context-group> </trans-unit> </body> </file> </xliff>
Le fichier .en doit ressembler à ça :
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="fr" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="title" datatype="html">
<source>Un super titre</source>
<target>A super title</target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/component/component.component.html</context>
<context context-type="linenumber">1</context>
</context-group>
</trans-unit>
</body>
</file>
</xliff>
Ensuite, il faut modifier le fichier angular.json pour que l'application prenne en compte la traduction.
...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": { ... },
"configurations": {
"fr": {
"aot": true,
"outputPath": "dist/nom-du-projet-en/",
"i18nFile": "messages.en.xlf",
"i18nFormat": "xlf",
"i18nLocale": "en",
"i18nMissingTranslation": "error",
}
// ...
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-project:build"
},
"configurations": {
"production": {
"browserTarget": "my-project:build:production"
},
"en": {
"browserTarget": "nom-du-projet:build:fr"
}
}
},
Vous pouvez ensuite démarrer le serveur en utilisant une certaine configuration :
ng serve --configuration=en
Vous pouvez consulter la documentation i18n d'angular.
Commentaires
Enregistrer un commentaire