Menu
When I attempt to translate English to French using i18n everything works dandy when following the Internationalization tutorial at https://angular.io/docs/ts/latest/cookbook/i18n.html word for word.
But the moment I attempt to use Angular 2's data-binding to insert variable text into the HTML it quits working.
Here is my HTML:
<h1 i18n="User welcome|An introduction header for this sample">{{value}}</h1>
Here is my component:
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
public value = "Hello i18n!";
}
Here is my XLF file:
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="af2ccf4b5dba59616e92cf1531505af02da8f6d2" datatype="html">
<source>Hello i18n!</source>
<target>Bonjour i18n!</target>
<note priority="1" from="description">An introduction header for this sample</note>
<note priority="1" from="meaning">User welcome</note>
</trans-unit>
</body>
</file>
</xliff>
Here is the error:
[email protected]:357 Error: Uncaught (in promise): Error: Template parse errors: Translation unavailable for message id="95184d0fe43359bff724d20df3a1317aef86799c" ("[ERROR ->]{{value}}
415
Angular Internationalizationlink Internationalization, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world. Localization is the process of building versions of your project for different locales.
component. ts file we need to import a translate service from @ngx-translate/core package inject the service in constructor and use it after changing the language. Now create a folder inside assets, name it 'translate,' inside of it create a json file.
Open the angular. json file and add the following configuration. Here we have added the configuration for the Spanish language. We have provided the path and format for the i18n file and set the locale to "es." When we execute the application, the app content will be served from the i18n file path provided.
You cannot currently translate strings at run-time. It's pre-processed to deliver the translated strings in the html. It would be nice if Angular would provide a pipe to use the .xlf translations for bound string variables. Seems like a pretty big gap to me.
Here's a plunker to illustrate the problem.
66
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
