Internationalisation d'Angular 5

Question

Je suis en train de construire une application en utilisant la dernière version d'Angular5 et ce dont j'ai besoin, c'est qu'un utilisateur puisse changer de langue. Je n'ai jamais eu à mettre en œuvre cette fonctionnalité dans un Angular2+ (en fait, j'utilise Angular5).

Je dois définir des traductions à deux endroits :

• Modèle html du composant - changer les étiquettes dans la langue spécifiée
• Dans le code du fichier component.ts - je peux avoir besoin de traduire certaines chaînes de caractères qui sont construites dynamiquement dans des conditions particulières dans le code

Je regardais ngx-translation et il semble faire tout ce dont j'ai besoin, notamment en vous permettant de changer de langue sans reconstruire votre code, cf. aquí . Cependant, j'ai lu il allait probablement être déprécié en raison du transfert du développeur principal vers l'équipe angulaire pour développer leur code i18n.

Je comprends également que l'actuel i18n ne supporte pas tout ce dont j'ai besoin pour le moment, voir aquí .

Ma question : quel est l'état d'avancement des traductions dans la dernière version d'Angular ? Y a-t-il d'autres bibliothèques que les gens recommanderaient à la place, si Angular lui-même n'a pas encore un support complet (pour changer de langue sans recompiler) ? Est-ce que ngx-translate est bon pour l'avenir ?

Tout conseil dans ce domaine sera grandement apprécié !

Answer 1

Après avoir passé du temps à étudier la question, j'ai pensé poster les principales différences que j'ai trouvées entre ngx-translate y Angular-i18n :

• Angular ne fonctionne qu'avec une seule langue à la fois, vous devez recharger complètement l'application pour changer la langue. Le support JIT signifie seulement qu'il fonctionne avec JIT, mais vous devez toujours fournir les traductions à l'amorçage parce qu'il remplacera le texte dans vos modèles pendant la compilation, alors que cette librairie utilise des liaisons, ce qui signifie que vous pouvez changer les traductions à tout moment. L'inconvénient est que les liaisons prennent de la mémoire, donc la méthode Angular est plus performante. Mais si vous utilisez OnPush pour vos composants, vous ne remarquerez probablement jamais la différence.
• Angular ne supporte l'utilisation de l'i18n que dans vos templates pour le moment, je travaille sur la fonctionnalité qui vous permettra de l'utiliser dans votre code, mais c'est encore un travail en cours. Cette librairie fonctionne aussi bien dans le code que dans les templates
• Angular prend en charge soit XLIFF soit XMB (tous deux sont des formats XML), tandis que cette librairie prend en charge JSON par défaut, mais vous pouvez écrire votre propre chargeur pour prendre en charge le format de votre choix (il existe un chargeur pour les fichiers PO, par exemple). Personnellement, les fichiers Json sont plus faciles à lire que ces autres formats, mais ce n'est pas un gros inconvénient.
• Angular supporte les expressions ICU (pluriels et select), mais cette bibliothèque ne le fait pas.
• Angular prend en charge les placeholders html incluant le code angulaire, alors que cette bibliothèque ne prend en charge que le html normal (parce qu'il est exécuté au moment de l'exécution, et non pendant la compilation, et qu'il n'y a pas de $compile dans Angular comme dans AngularJS).
• L'API de cette bibliothèque est plus complète car elle est exécutée à l'exécution ; elle peut offrir plus de choses (observables, événements, ...) qu'Angular n'a pas (mais n'en a pas vraiment besoin étant donné que vous ne pouvez pas changer les traductions). Le créateur de ngx-translate a dit ceci :

Ocombe (développeur de ngx) : @josersleal c'est exactement ce qu'ils ont fait, l'équipe d'angular m'a engagé pour améliorer l'i18n pour tout le monde Mais il n'y a aucun moyen d'intégrer ma librairie directement dans le noyau. Mais il n'y a aucun moyen d'intégrer ma librairie directement dans le noyau 3 mois pour l'équipe de base, je peux vous dire que Angular i18n est beaucoup plus complexe et élaboré que ma librairie. Il gère beaucoup de choses plus complexes complexe, et il le fait sans tous les bogues et les lacunes de ma librairie. lib. Je comprends que c'est frustrant que le noyau n'évolue pas n'évolue pas aussi vite que ce qu'une bibliothèque peut faire, mais il y a des raisons à cela. et la première est que vous ne pouvez pas mettre en œuvre quelque chose et et le changer chaque fois que vous voyez que vous avez oublié d'inclure un cas d'utilisation. Tout doit être soigneusement planifié et pensé. Néanmoins, vous aurez la plupart des choses que cette librairie peut faire dans le noyau dans le mais cela pourrait prendre un an avant que nous y arrivions malheureusement. La bonne nouvelle est qu'elle sera bien meilleure que mon implémentation naïve. naïve.

Voici un bon article pour discuter des principales différences entre ngx-translate et l'i18n d'Angular : https://github.com/ngx-translate/core/issues/495

Les changements pour i18n sont prévus dans la version 6 d'angular. Aujourd'hui, nous sommes sur la version 5 :

• Ce ne sera pas pour la 5.0, mais avant la 6.0 (donc avant mars 2018). Malheureusement, je n'ai pas de date plus précise.

• Le développeur de ngx-translate (et maintenant un contributeur principal à angular-i18n) a posté ceci il y a 12 jours : https://github.com/angular/angular/issues/20193

• Voici le document de conception de l'i18n (la section sur l'art antérieur est intéressante) : https://docs.google.com/document/d/1LH7lJ1GjRgpGUjzNb6Eg4xrPooRdi80QOTYYh8z_JyY/edit#

Quelques réflexions

• Angular-i18n est plus performant car vous compilez votre application dans la langue souhaitée (les traductions ne se font pas au moment de l'exécution). Cela peut aussi être un inconvénient, car vous pouvez avoir besoin de plusieurs versions de votre application dans différentes langues.
• Si nous utilisions le référencement, angular-i18n serait la voie à suivre, en raison de la navigation par url. Dans mon cas, je n'en ai pas du tout besoin.
• Si nous avions besoin d'une commutation plurielle, etc. Encore une fois, je n'ai pas besoin de cela - j'ai juste besoin d'un changement de langue relativement simple à exécuter dans les modèles et le code.
• Angular-i18n ne sera pas publié avant mars 2018 au moins. Pour moi, je ne peux pas attendre jusque là car j'ai besoin de construire mon application maintenant.
• ngx-translate n'aura pas un ensemble aussi complet de capacités qu'angular-i18n MAIS encore une fois, je n'ai besoin que de simples traductions en cours d'exécution, donc je pense que c'est parfait pour ce dont nous avons besoin.
• ngx-translate est open source et le jour où il ne sera plus développé, s'il y a un problème sérieux, je suppose que je pourrais le résoudre moi-même (en espérant que d'ici là, tous les problèmes qui pourraient survenir auront été résolus).

Je vais également jeter un coup d'œil à la bibliothèque Angular-l10n, qui semble très bonne :

• Angulaire-l10n - https://github.com/robisim74/angular-l10n

Answer 2

Oui. ngx-translate est bon jusqu'à présent, et j'espère qu'il le sera aussi à l'avenir.

J'utilise ngx-translate dans mon projet Angular 5 actuel avec plus de 5 langues.

Cela fonctionne bien pour moi jusqu'à présent. Je n'ai pas eu à faire de modifications personnalisées, cela a fonctionné comme un plug and play.

J'ai utilisé ce plugin https://github.com/ngx-translate/core

Answer 3

Au lieu d'utiliser ng-translate, vous pouvez utiliser le fichier de configuration et les fichiers json de langue pour cela. Vous pouvez placer ce fichier json à l'emplacement de votre serveur et y accéder facilement depuis angular.

sur config.json u peut souiller le type de langue

{ 
  "LANGUAGE": "fr.json" 

}

sur en/fr.json fichier

{
    "TITLE": "Bonjour Angular avec translate !",
    "SELECT": "Changer la langue"

}

entendre est le exemple de code

App.component

export class AppComponent  {

  name =  LAN_CONFIG['TITLE'];
  // name =  APP_CONFIG['LANGUAGE'];
}

OU

Vous pouvez utiliser le fichier config.js

ajouter ce segment de code à la section d'en-tête de index.html

<script>
    var xhrObj = new XMLHttpRequest();
    var url = '/assets/config/config.js';
    xhrObj.open('GET', url, false);
    xhrObj.send('');
    var se = document.createElement('script');
    se.type = "text/javascript";
    se.text = xhrObj.responseText;
    document.getElementsByTagName('head')[0].appendChild(se);
  </script>

fichier config.js

window.config= {};
window.config['LANGUAGE'] = 'er.js';

vous pouvez accéder à cette variable pour accéder à la valeur en utilisant

@Injectable()
export class LanguageService {

  appConfig:AppConfigService;
  lanTypePath ='../../assets/i18n/'+ window['config'].LANGUAGE;
 constructor(private http: HttpClient)
  {
    console.log(APP_CONFIG['LANGUAGE']);
  }

  public load()
  {
    return new Promise((resolve, reject) => {

      this.http.get(this.lanTypePath).catch((error: any): any => {

        reject(true);
        return Observable.throw('Server error');
      }).subscribe((envResponse :any) => {
        let t = new LanConfig();
        //Modify envResponse here if needed (e.g. to ajust parameters for https,...)
        LAN_CONFIG = Object.assign(t, envResponse);
        resolve(true);
      });

    });
  }

}

je pense que cette méthode est meilleure que la précédente pour votre situation

Démonstration Github

J'espère que cela vous aidera

Answer 4

Rob McCabe, il y a d'autres préoccupations importantes que celle que vous avez énumérée ci-dessus. Je l'ai expliqué aquí .