3
votes

Changement de langue angulaire côté client

Contexte

Nous développons une application avec Angular 8.2. Cette question n'est pas liée à AngularJs.

Problème

J'ai lu le document de localisation angulaire ici: https://angular.io/guide/i18n

Mais il semble que la localisation ait été faite dans le processus de construction. Une fois l'application créée, elle ne peut pas être modifiée. Alors, comment pouvons-nous créer une application angulaire qui prend en charge le changement de langue sans Internet?

CDN

Notre application est déployée derrière CDN. Les serveurs CDN rétrocontrôlent les fichiers HTML, JavaScript et CSS et mettront en cache tous les fichiers transmis. Le changement de langue de l'application côté serveur n'est pas disponible.

Édition électronique

Et nous avons fourni une application côté client basée sur l'électron. Nous devons livrer l'application une fois et l'utilisateur peut basculer entre différentes langues sans Internet. Mais je n'y ai trouvé aucune solution.

Nom de domaine

Vous pouvez mentionner que nous pouvons changer de langue via le changement de domaine. Mais pour des raisons CORS, le nom de domaine de notre application côté client est limité et ne peut pas être changé. Un seul nom de domaine est donc disponible.

Google Play Store

Et nous avons créé et publié notre application sur le Google Play Store via TWA. Le domaine a été enregistré avec l'application. Le changement de domaine entraîne également le téléchargement de l'application à partir du Store.

Informations additionnelles

Et le code source de l'application est ici: https://github.com/AiursoftWeb/Kahla.App

Juste pour d'éventuelles informations supplémentaires. Pas besoin de le vérifier pour répondre à cette question.

angular electron localization internationalization angular-i18n

0 commentaires

3 Réponses :

2
votes

Nous avons été confrontés à des exigences similaires dans le passé et c'est pourquoi j'ai créé un article de blog sur les traductions en Angular en tant que code (sans les bibliothèques, juste votre code et l'architecture de votre projet).

https://medium.com/angular-in-depth/angular-typed-translations-29353f0a60bc

Pour répondre à tous les défis:

CDN :

la mutation de la langue est au niveau de la route (pas du domaine)
- domain.com/language/page
domain.com peut inclure une logique de redirection
- par exemple, redirigez vers la langue par défaut ou déterminez-la (nous avons une fonction cloud qui le fait en fonction des préférences de langue de la demande du navigateur

Electron :

Les traductions sont présentes au moment de la construction
Les modules contenant différentes données i18n sont expédiés avec l'application et chargés en cas de besoin (mais disponibles pour l'électron instantanément car il est regroupé)

Domaine :

encore une fois, la langue est commutée en utilisant "route" et non domaine
- exemple: domain.com/en/contact pour l'anglais domain.com/cs/contact pour le tchèque
c'est génial non seulement à cause des cors mais aussi à cause du référencement et des robots d'exploration
- la partie la plus importante de l'itinéraire vient en premier (langue)

Google Play Store :

comme avec l'électron, il est regroupé
utilise le routage et non le domaine

Même si vous décidez de ne pas opter pour la commutation basée sur la "route", vous pouvez stocker les traductions dans votre service de gestion d'état ou d'encapsulation et y accéder comme vous le feriez avec toute autre donnée "asynchrone" dans le modèle via un tube async

3ème partie : certaines autres solutions impliquant des bibliothèques tierces sont ngx-translate (obsolète) et Transloco

1 commentaires

Salut, merci pour votre solution! Tout est parfait! J'ai trouvé votre démo sur: github.com/vmasek/angular-typed-translations-demo et j'ai essayé de l'exécuter. Je marquerai la bonne réponse si aucune autre meilleure réponse. Merci!

0
votes

Vous pouvez livrer un fichier contenant les traductions avec votre application. Par exemple, un Translations.json comme ça:

{
  text: 'this is english',
  textid: 123,
  language 'GB'
},
{
  text: 'ÑÑ‚Ð¾ Ð¿Ð¾-Ð°Ð½Ð³Ð»Ð¸Ð¹ÑÐºÐ¸' ,
  textid: 123,
  language 'RUS'
},
{...}

Comme ce fichier fait partie de votre projet, l'utilisateur n'a pas besoin d'un accès Internet pour changer de langue.

0 commentaires

1
votes

Cela a changé dans Angular 9 et versions ultérieures. Vous pouvez désormais compiler l'application une seule fois, puis charger les traductions dans une langue spécifique lors de l'exécution. Malheureusement, Angular ne contient pas d'API pour obtenir les fichiers de ressources à l'exécution, mais vous devez utiliser un module complémentaire tiers. Le package npm de Soluling en est un . Une fois que vous l'utilisez, vous pouvez déployer l'application dans une seule URL et elle peut servir n'importe quel nombre de langues.

J'ai écrit un échantillon qui le montre.

0 commentaires