Menu
I need to translate my Angular 4 app. Basically I followed the official guide.
I added i18n attributes to tags and so on
The angular-cli created a messages.xlf
I created a folder "locale" in the src-folder
I copied the messages.xlf to this locale-folder...
... 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.
457
1. Angular CLI provides extract-i18n command to extract the marked text in the component into a source language file. 2. The extract-i18n command is run from project root directory as following. ng extract-i18n.
Internationalization (sometimes shortened to "I18N , meaning "I - eighteen letters -N") is the process of planning and implementing products and services so that they can easily be adapted to specific local languages and cultures, a process called localization .
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:
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
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
