i18n generates xlf with whitespace in source tag for Angular code

Question

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?

Answer 1

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.