Comment diviser votre fichier i18n par module chargé paresseux avec ngx-translate?

tl; dr Consultez la section résumé à la fin

Après quelques mois de travail sur mon application Angular, mes fichiers i18n ont plus de 800 lignes chacun, presque impossibles à maintenir et deviendront de plus en plus difficiles avec le temps. La meilleure solution à ce problème serait d’avoir un fichier i18n par module (en fait, je dois prendre en charge le français et l’anglais).

Environnement:

@ angulaire / noyau @ 4.4.3
@ ngx-translate / core @ 8.0.0
@ ngx-translate / http-loader @ 2.0.0

Le principe

Pour pouvoir charger un fichier json avec un module chargé paresseux, vous devez utiliser la propriété isolate comme le suggère la documentation. Isoler votre TranslateModule vous permettra de créer une nouvelle instance de TranslateService et, avec elle, une nouvelle instance de HttpLoader avec un chemin différent des fichiers i18n.

Maintenant, la plus grande différence que vous devez garder à l'esprit est que, lorsque vous changez de langue, vous devez la changer pour toutes les instances de TranslateService. Cela indiquera au service d'aller chercher le fichier json de chaque module chargé paresseux pour la langue souhaitée.

Dans mon code, j'utilise Redux (ngrx-platform) pour communiquer le changement de langue entre tous mes modules.

Plusieurs demandes?

Remarque: Gardez cela à l'esprit: cela augmentera considérablement le nombre de requêtes adressées à votre serveur! si vous avez 10 modules, il n’ya que 10 demandes de traduction!

Mais en 2017, ce n’est plus un problème…

  • Utilisez Http 2
  • Utilisez sw-precache de Google pour générer un fichier manifeste
  • Utilisez Idle-Preload comme stratégie de chargement paresseux
  • Utilisez le rendu côté serveur si vous n'êtes toujours pas satisfait

L'impact sur votre performance devrait être insignifiant.

Structure de dossier

Mon dossier de ressources pour les fichiers i18n se présente comme suit:

les atouts/
└── i18n /
   ├── app /
   ├── en.json
   └── fr.json
   └── accueil /
       ├── en.json
       └── fr.json

app contient les traductions principales d'i18n, telles que: menu, en-tête, pied de page et d'autres dossiers comme home, contenant les traductions de i18n pour le module chargé paresseux.

Code

AppModule

Commencez par préparer votre AppModule pour appeler forRoot () de TranslateModule et pour charger vos fichiers i18n principaux. App / (en | fr) .json

AppComponent

AppComponent est votre composant racine, où l'utilisateur peut définir la langue en cliquant sur un bouton dans l'en-tête. Ensuite, vous envoyez les informations de langue à votre magasin pour que vos autres modules sachent que la langue a changé et qu'ils doivent changer la langue de leur instance TranslateService.

HomeModule (module chargé paresseux)

Dans ce module, déclarez une nouvelle instance de TranslateHttpLoader pour obtenir vos fichiers i18n à la maison / (en | fr) .json

AccueilComposant

Il ne reste plus qu’à appeler use () de son instance TranslateService, chaque fois que la langue change, dans tous les composants de vos modules chargés paresseux en vous abonnant à la propriété language en cours de votre magasin.

Résumé

C'est tout! Vous êtes maintenant prêt à diviser votre gros fichier i18n en un fichier plus petit qui vous aidera à gérer facilement votre fichier de traduction.

Résumer:

  1. Dans votre AppModule, appelez forRoot ()
  2. Dans tous vos modules chargés paresseux, appelez forChild () avec isolated: true et créez une nouvelle instance de TranslateHttpLoader avec le chemin d'accès aux fichiers i18n du module.
  3. Dans tous les composants principaux de votre module chargé, utilisez l’appel () de TranslateService chaque fois que l’utilisateur change de langue.