web-dev-qa-db-fra.com

Angular2 i18n à ce stade?

Nous avons décidé d'essayer et nous avons lancé un nouveau projet en utilisant Angular2. Jusqu'ici tout va bien, mais nous sommes actuellement confrontés à un problème. À ce stade, quelle est la bonne approche d’i18n pour Angular2? Nous avons un peu étudié et trouvé ceci:

Cependant, le dernier engagement date de plus de 5 mois ... Ne ressemble pas à un développement actif. 

Quelqu'un a essayé d'utiliser angular-translate ou angular-gettext? Ou peut-être qu'avec Angular2, il vaut mieux envelopper quelque chose de JS comme i18next? Quelqu'un pourrait-il partager ses pensées? Peut-être que vous avez rencontré le même problème? 

internationalizationangular
42
Adam Nowaczyk

Plunk a été mis à jour à Angular 2 Final: https://plnkr.co/edit/4euRQQ . Les choses semblent fonctionner comme en RC7.

La nouvelle section i18n a été ajoutée à la documentation officielle Angular 2. En gros, il explique en détail ce qui se passe dans le plan ci-dessus.

XLIFF est le seul format de traduction, pas de support json . Un fichier source de traduction (xliff, xlf) doit être créé avec ng-xi18n outil:

package.json:

"scripts": {
  "i18n": "ng-xi18n", 
  ...
}

et

npm run i18n

Voir la section Fusion de traduction pour plus d'informations sur la fusion d'une traduction dans un modèle de composant. C'est fait en utilisant le plug-in SystemJS Text.

Un autre exemple utilisant Gulp http://www.savethecode.com/angular2-i18n-native-support/

Personnel plus ancien: Mise à jour basée sur RC7 et liens fournis par Herman Fransen:

J'ai créé un exemple Plunkr minimal: https://plnkr.co/edit/4W3LqZYAJWdHjb4Q5EbM

Commentaires à plunkr:

  • bootstrap devrait fournir TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID avec des valeurs -> configurer les traductions
  • les éléments traduisibles dans les modèles HTML doivent utiliser la directive i18n
  • les traductions sont stockées dans le fichier .xlf. Les liens entre les langues se font via Id, les liens avec html avec une valeur de <source> tag dans xlf
  • actuellement, les fichiers xlf ne sont pas utilisés directement; un fichier .ts est créé manuellement pour envelopper le contenu de xlf dans une variable exportable. Je suppose que cela devrait fonctionner automatiquement dans la version finale (peut-être même maintenant).

C'est la première approche officiellement documentée que j'ai trouvée… .. Cependant, elle est encore difficilement utilisable. Je vois les problèmes suivants dans l'implémentation actuelle:

  • La langue est définie sur bootstrap, impossible de la modifier au moment de l'exécution. Cela devrait être changé en finale.
  • L'identifiant d'un élément à traduire dans xlf est généré SHA. La méthode actuelle pour obtenir cet identifiant est un peu compliquée: vous créez un nouvel élément traduisible, utilisez-le, copiez SHA id à partir d'une erreur et collez-le dans votre fichier i18n.lang.xlf.

Il y a une grande documentation pull request concernant i18n

Anciens collaborateurs: Notes de publication https://github.com/angular/angular/blob/master/CHANGELOG.md ont un enregistrement 

i18n: fusionner les traductions 7a8ef1e

Un gros morceau de i18n a été introduit dans Angular 2 RC5

Malheureusement, toujours pas de documentation disponible.

19
Andrei Zhytkevich

Tout le monde est impatient de la mise en œuvre officielle, mais celle-ci a fonctionné pour mon cas d'utilisation: https://github.com/ocombe/ng2-translate

README est assez complet, et si vous avez besoin de quelque chose de vraiment particulier (pour moi, c'était du scission de code), le code lui-même n'est ni trop long ni difficile à lire.

16
Samjones

Le support pour i18n est maintenant officiel dans Angular 2 RC6 

Blog de sortie officiel:
https://angularjs.blogspot.nl/2016/09/angular-2-rc6_1.html

Un échantillon d'internationalisation avec Angular 2 RC6
https://github.com/StephenFluin/i18n-sample

Plus d'informations sur le fonctionnement du nouveau concept d'i18n dans angular2:
https://lingohub.com/blog/2015/03/angular-2-i18n-update-ng-conf-2015

8
Herman Fransen

J'ai trouvé un autre moyen d'implémenter ceci en utilisant pipe et service 

HTML

<!-- should display 'hola mundo' when translate to Spanish -->
<p>{{ 'hello world' | translate }}</p>

TypeScript

...

// "this.translate" is our translate service
this.translate.use('es'); // use spanish

...

// should display 'hola mundo' when translated to Spanish
this.translatedText = this.translate.instant('hello world'); 

...

https://scotch.io/tutorials/simple-language-translation-in-angular-2-part-1https://scotch.io/tutorials/simple-language-translation- in-angular-2-part-2

3
vinboxx

Il y a un support officiel pour i18n dans Angular.io ici:

https://angular.io/docs/ts/latest/cookbook/i18n.html

Mais! Comme mentionné dans la documentation:

Vous devez créer et déployer une version distincte de l'application pour chaque langue supportée!

Cela rend cette fonctionnalité inutile dans la plupart des cas ...

À moins que vous ne l'utilisiez sans l'interface de ligne de commande, comme décrit ici: 

https://devblog.dymel.pl/2016/11/03/angular2-and-i18n-translate-your-app/

3
trojan

Je prépare un POC et la documentation officielle est encombrante pour le moins, alors j’ai essayé ngx-translate http://www.ngx-translate.com/ et j’ai littéralement eu le bonjour dans quelques minutes, il y a quelques mises en garde:

  1. J'ai lu des gens se plaindre de la performance, à cause des tuyaux, mais en lisant les problèmes de github, il semble que cela soit en train de se résoudre
  2. C’est uniquement pour i18n ou Translations qu’il ne traite pas d’i10n ou de localisation
  3. Il y a peu d'erreurs d'avertissement avec Angular4 mais cela fonctionne quand même.

longue histoire courte j'ai aimé ngx-translate si vous avez une petite application et n'avez besoin que de la traduction

Personnellement, je voulais la localisation, alors je regarde https://github.com/robisim74/angular-l10n . Ça a l'air bien, mais je n'ai pas testé, alors je vais que vous sachiez plus tard, ou vous pouvez y aller et nous essayons tous 

0
Sebastian Castaldi