ERROR in There is a placeholder name mismatch with the translation provided

Question

We use @angular/localize (Version 9.1.12) and have a problem with the placeholders in localized text.

E. g. we have:

$localize`:@@form.hint:Some text ${name} in service.`;

or

$localize`:@@form.hint:Some text ${name}:name: in service.`;

Because the localize text strings in typescript files aren't extracted we put these into a component template.

E. g.:

<p i18n="@@form.hint">Some text {{ name }} in service.</p>

After execution of xi18n we get the messages.xlf (and messages.de.xlf) files which contain the following:

<trans-unit id="form.hint" datatype="html">
  <source>Some text <x id="INTERPOLATION" equiv-text="{{ name }}"/> in service.</source>
  <target state="new">Some text <x id="INTERPOLATION" equiv-text="{{ name }}"/> in service.</target>
  <context-group purpose="location">
    <context context-type="sourcefile">src/app/translation/translation.component.html</context>
    <context context-type="linenumber">207</context>
  </context-group>
</trans-unit>

When we start the application with ng serve we get the following error:

ERROR in There is a placeholder name mismatch with the translation provided for the message "form.hint" ("Some text {$PH} in service.").
The translation contains a placeholder with name INTERPOLATION, which does not exist in the message.

The application does not work. After a restart the error does not occur and the application works. Nothing was changed before the restart.

We can work with a local restart but after each change of the messages.xlf files the error occurs again and we need two ci-builds on our build server to get a working installation on our test machine.

Any ideas what can be the cause of the placeholder mismatch?

Answer 1

For the current angular version (10.1.3) you need to opt in to extraction of translation tokens via ivy:

ng xi18n --ivy

The result will include texts from $localize.