web-dev-qa-db-fra.com

Angular 4 i18n - comment continuer après avoir ajouté les fichiers de traduction?

Je dois traduire mon Angular 4. Fondamentalement, j'ai suivi le guide officiel .

  1. J'ai ajouté des attributs i18n aux balises et ainsi de suite

  2. L'angular-cli a créé un message.xlf

  3. J'ai créé un dossier "locale" dans le dossier src

  4. J'ai copié le message.xlf dans ce dossier de paramètres régionaux ...

  5. ... et l'a renommé en "messages. de . xlf" pour contenir les traductions allemandes

J'ai changé une simple traduction pour tester les choses. Cependant, après avoir changé mon navigateur en "allemand", il n'y a pas eu de différence (utilisé npm start, donc en gros 'ng serve'). Il semble qu'il manque encore quelque chose. Le guide explique également comment "fusionner" la traduction . Mais ce chapitre est incroyablement étrange et ne semble pas assez convaincant. Il se lit comme s'il s'agissait d'une version antérieure.

Par exemple, il indique d'adapter mon script de démarrage. Le fait est que je n'ai même pas de script de démarrage. Mon index.html ressemble à ceci:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PickUp2</title>
  <base href="/">

  <link href="assets/iconfont/material-icons.css" rel="stylesheet">
  <link href="roboto.css" rel="stylesheet">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/material_supply_icon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Où dois-je placer ce script de démarrage? Je ne sais même pas si j'utilise le compilateur JIT ou AOT. Ils n'étaient jamais mentionnés dans aucun guide auparavant.

angularinternationalization
19
OddDev

J'ai traduit notre application Angular-4 avec la méthode décrite dans le livre de recettes. Je pense que les informations clés qui vous manquent sont que vous devez "créer" l'application pour chaque langue séparément.

Ma commande pour exécuter l'application localement avec une traduction ressemble à ceci:

>ng serve --i18n-file src/i18n/messages.fr.xlf --locale fr --i18n-format xlf --aot

pour le construire il suffit de remplacer ng serve par ng build

Expliqué:

  • -i18n-file spécifié quelle traduction utiliser
  • --aot est la compilation à l'avance des modèles html, cela remplacera les textes marqués i18n par vos traductions

dans votre cas, vous devez créer l'application en allemand, puis la déployer - disons - dans un dossier/de. une autre version de l'application pourrait être en/en etc.

vous pouvez ensuite rediriger vos utilisateurs en fonction de la langue qu'ils souhaitent avoir vers l'application dédiée.

j'espère que cela t'aides

11
PeterFromCologne