Search code examples
angularinternationalizationangular-i18n

Angular i18n $localize function doesn't return source language term

Running our application with the Spanish LOCALE_ID ("es"), I can dynamically pull a translation term and then render a toaster type message as follows:

const message = $localize`:Toastr message|Person edit saved success@@msgPatientDetailsUpdated: i18n`;
this.toastr.success(message);

It works perfectly fine, and my "Patient Updated" message is now in Spanish.

enter image description here

But when we run the application with the default English LOCALE_ID, it does not pull the English term. So I only get back "i18n", which gets assigned to my 'message' var.

enter image description here

In another place I wrapped this logic into an if/else - i.e. if my LOCALE_ID === 'en-us', then just hard code my toaster message; if not, then I call the $localize function which then pulls the 'es' term just fine.

I'm not sure what I'm missing here. Shouldn't I be able to call $localize regardless of the language? In my case English or Spanish.

Here is the specific "msgPatientDetailsUpdated" id from the es.xlf messsages file:

<trans-unit **id="msgPatientDetailsUpdated"** datatype="html">
  <source>Patient details successfully updated</source>
  <target>Detalles del paciente actualizados exitosamente</target>
  <note priority="1" from="meaning">patient-edit.modal.ts toastr message</note>
  <context-group purpose="location">
    <context context-type="sourcefile">patient-edit.modal.ts</context>
    <context context-type="linenumber"/>
  </context-group>
</trans-unit>

Any help is appreciated.

UPDATE: It could be that I misunderstood something with regards to this part of the documention https://angular.io/api/localize/init/$localize:

     $localize`:@@id:source message text`;
Solution

  • Following this doc: https://angular.io/api/localize/init/$localize, I realized I wasn't adhering to the structure of the $localize call:

    $localize`:meaning|description@@id:source message text`;
$localize`:meaning|:source message text`;
$localize`:description:source message text`;
$localize`:@@id:source message text`;

    For example, I was missing missing source message text for the default english language.

       const message = $localize`:Toastr message|Patient edit saved success@@msgPatientDetailsUpdated:Patient details successfully updated `;
   this.toastr.success(message);