angularlocalizationinternationalizationangular-i18n

i18n generates xlf with whitespace in source tag for Angular code


I am using i18n for localization in my Angular project. I came to an issue where there are duplicate text entries but with different spacing (whitespaces at the beginning/end of the string.

  <trans-unit id="5983969941473094568" datatype="html">
    <source>Please provide more information</source>
    <context-group purpose="location">
      <context context-type="sourcefile">src/app/features/game/components/game-boosting.ts</context>
      <context context-type="linenumber">150</context>
    </context-group>
    <note priority="1" from="description">Form validation error</note>
  </trans-unit>

  <trans-unit id="5273018339487538226" datatype="html">
    <source> Please provide more information </source>
    <context-group purpose="location">
      <context context-type="sourcefile">src/app/features/users/components/user/user.html</context>
      <context context-type="linenumber">19,21</context>
    </context-group>
  </trans-unit>

They both have the same source tag content, thus one of them has whitespaces wrapping it.

To avoid this error I have to put my .html code in one line, but that will conflict with my prettifying.

Currently:

    <eld-error-message i18n *ngIf="formSubmitAttempt && !userReportFormGroup.get('message')?.valid"
    >
      Please provide more information
    </eld-error-message>

To make it work (but invalid solution):

    <eld-error-message i18n *ngIf="formSubmitAttempt && !userReportFormGroup.get('message')?.valid">Please provide more information</eld-error-message>

Is there a way to consider these texts as duplicate and ignore whitespaces?


Solution

  • I don't think that it is possible to treat these lines as the same. You can write script which will remove the whitespaces after generating the translations, but I don't think it worth the effort. As a compromise I would recommend to configure your formatter to format such lines in the next way:

    <eld-error-message i18n *ngIf="formSubmitAttempt && !userReportFormGroup.get('message')?.valid"
          >Please provide more information</eld-error-message
    >
    

    You can also try:

    <eld-error-message i18n *ngIf="formSubmitAttempt && !userReportFormGroup.get('message')?.valid"
        >{{
          'Please provide more information'
        }}</eld-error-message>
    

    but I'm not sure it helps.