CODEWITHSUNDEEP
angularinternationalization
Jagan
Jagan

Reputation: 11

Language Translation using Angular i18n

I am facing some problem with Language tranlatation in angular using i18n. For validations, I am getting some error codes from REST API, I put the message based on error code in environment file. I have imported file in component ts file. Environment file looks like

loginErrorMsg01EN:'Invalid Credentails!!',
loginErrorMsg01ES:'Credentails inválidos!!'

html line in file

<label align="center" class="error-text" i18n="@@loginErrorMsg">{{environment.loginErrorMsg01EN}}</label>

Spanish (ES) translation file looks like

<source><x id="INTERPOLATION" equiv-text="{{environment.loginErrorMsg01EN}}"/></source>
<target><x id="INTERPOLATION" equiv-text="{{environment.loginErrorMsg01ES}}"/></target>

But i am not getting Spanish translation text. Only English translation showing. Please help me on this.

Upvotes: 1

Views: 1120

Answers (1)

Edward
Edward

Reputation: 1126

if I understand what you're trying to do correctly, you are

  1. starting the angular server via ng serve with the 'configuration' option. (at this time you don't yet have the translations)

  2. once the Application is running, you are making a REST call in the front end to get the data and placing these in a an environment file

  3. you are placing an reference to the environment variable in the translation file.
  4. finally, you're looking for the translation file to resole the environment refernce?

is this correct?

I may be mistaken, but it's not my understanding that this is how translation works. Per angular.io

The i18n template translation process has four phases:

  1. Mark static text messages in your component templates for translation.

  2. Create a translation file: Use the Angular CLI xi18n command to extract the marked text >into an industry-standard translation source file.

  3. Edit the generated translation file: Translate the extracted text into the target language.

  4. Merge the completed translation file into the app. To do this, use the Angular CLI build >command to compile the app, choosing a locale-specific configuration, or specifying the >following command options.

--i18nFile=path to the translation file
--i18nFormat=format of the translation file
--i18nLocale= locale id

The command replaces the original messages with translated text, and generates a new >version of the app in the target language.

You need to build and deploy a separate version of the app for each supported language.

It is my understanding that the internationalization happens at compile time. the build process will take care of going through all our 'locale' files and updating your various templates with the translation.

this means you you must have your translations defined an the translation file first, the build process will then create distribution files for the specific language you choose.

it is very possible I'm mistaken, and what you are trying to d is supported. in which case I will learn something new today. I'm just not aware of this approach.

Update:

apparently this type of run time translation is possible. it looks like the ngx-tgranslate is designed specifically for this type of scenario.

Upvotes: 0

Related Questions