I need to translate my Angular 4 app. Basically I followed the official guide. <ol> <li>I added i18n attributes to tags and so on</li> <li>The angular-cli created a messages.xlf</li> <li>I created a folder "locale" in the src-folder</li> <li>I copied the messages.xlf to this locale-folder...</li> <li>... and renamed it to "messages.de.xlf" to hold the German translations</li> </ol> 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: <pre class="prettyprint"><code><!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> </code></pre> 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.

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: <pre class="prettyprint"><code>>ng serve --i18n-file src/i18n/messages.fr.xlf --locale fr --i18n-format xlf --aot </code></pre> to build it just replace ng serve with ng build Explained: <ul> <li>-i18n-file specified which translation to use</li> <li>--aot is the ahead of time compilation of the html templates, this will replace the texts marked i18n with your translations</li> </ul> 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

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

Tags:

angular

internationalization

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

asked Apr 21 '17 05:04

OddDev

1 Answers

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

answered Oct 12 '22 15:10

PeterFromCologne

Related questions
                            
                                instance[output.propName].subscribe is not a function resulting from polyfill
                            
                                Passing on all directives to a child element of the component
                            
                                Angular animations failing for opacity settings (and more bugs)
                            
                                Visual Studio Code does not find references of Angular variables in templates
                            
                                Cache busting of JSON files in webpack
                            
                                How do I fingerprint images and other static assets in Ionic for cache busting?
                            
                                Error in production build: Index html generation failed [closed]
                            
                                turn video frames to streaming video
                            
                                Preloading fonts using angular CLI
                            
                                Is it possible to set default value to <ng-content> [duplicate]
                            
                                Angular 6: Multi Page Application (MPA) is possible?
                            
                                Bearer error - invalid_token - The signature key was not found
                            
                                Angular Animation: Page transition without style `position: absolute`?
                            
                                Ionic3 : the best way to import css from node_modules
                            
                                Firestore: Joins vs Firestore pricing
                            
                                NG Test show names in console
                            
                                Typescript: Cannot find module of my custom library
                            
                                Handle 400 Bad Request From WebApi In Angular 6 (using HttpClient)
                            
                                Angular2 with two frontend admin and site

Donate For Us

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