CODEWITHSUNDEEP
angularinternationalization
OddDev
OddDev

Reputation: 3734

Angular 4 i18n - how to go on after adding the translation-files?

I need to translate my Angular 4 app. Basically I followed the official guide.

  1. I added i18n attributes to tags and so on

  2. The angular-cli created a messages.xlf

  3. I created a folder "locale" in the src-folder

  4. I copied the messages.xlf to this locale-folder...

  5. ... and renamed it to "messages.de.xlf" to hold the German translations

I changed a simple translation to test things out. However, after I switched my browser to "German", there wasn't any difference (used npm start, so basically 'ng serve'). Seems to be that there still is something missing. Also the guide explains how to 'merge' the translation. But this chapter is incredibly odd and doesn't sound quite convincing. It reads like it was done for an earlier version.

For example it states to adapt my startup-script. The thing is that I don't even have a startup-script. My index.html looks like this: 

<!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>

Where do I need to place this startup-script? I don't even know whether I use the JIT or AOT compiler. They were never mentioned in any guide before.

Upvotes: 20

Views: 9123

Answers (1)

PeterFromCologne
PeterFromCologne

Reputation: 10463

I have translated our Angular-4 app with the method described in the Cookbook. I think the key info that you are missing is that you need to "build" the app for each language separately.

My command to run the app locally with one translation looks like this:

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

to build it just replace ng serve with ng build

Explained:

  • -i18n-file specified which translation to use
  • --aot is the ahead of time compilation of the html templates, this will replace the texts marked i18n with your translations

so in your case you would build the app in german and then deploy it - let's say - to a /de folder. another version of the app could be in /en etc.

then you can redirect your users based on the language they want to have to the dedicated app.

hope this helps

Upvotes: 11

Related Questions