i18n $localize function with custom IDs when using variables inside template literals

Which @angular/* package(s) are the source of the bug?

localize

Is this a regression?

No

Description

When calling the $localize function as follows:

When I run the ng extract-i18 command against a bunch of $localize calls that look similar to this:

   return $localize`Must be at least ${setting.SettingValue}:minLen: characters long.`;

Angular will generate the following xlf output:

`<trans-unit id="2927300519471273952" datatype="html">
    <source>Must contain at least <x id="nonAlphaNum" equiv-text="setting.SettingValue"/> symbols.</source>
    <context-group purpose="location">
      <context context-type="sourcefile">src/app/core/modals/password-edit-modal/password-edit.modal.ts</context>
      <context context-type="linenumber">105</context>
    </context-group>
  </trans-unit>`

However, if I try and use a CUSTOM ID instead - it doesn’t work. For example, only changing the id attrib: <trans-unit **id="passwordNonAlphNum"** datatype="html">

I am using a website service to store all the source translations, so having a custom ID makes it easier to search up and distinguish btwn other related messages.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

If I use a custom ID in place of the random ID which Angular generates, then it will NOT pull the translation from the `<target>` element of my xlf.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.0.3
Node: 12.21.0
Package Manager: npm 6.14.11
OS: win32 x64

Angular: 13.0.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.3
@angular-devkit/build-angular   13.0.3
@angular-devkit/core            13.0.3
@angular-devkit/schematics      13.0.3
@angular/cli                    13.0.3
@angular/flex-layout            13.0.0-beta.36
@schematics/angular             13.0.3
rxjs                            6.6.7
typescript                      4.4.4

Anything else?

No response

[robertmazzo]

Sorry, using $localize with custom IDs left me a bit confused. And as you mentioned, as per the docs, the “pre-pending it with a colon” syntax did work - e.g.

const msg = $localize`:Password Reset Modal|Min num of chars@@passwordNumChars:Must be at least ${setting.SettingValue}:minLen: characters long.`;

And I updated the trans-unit “id” attrib in the xlf - i.e. my custom ID is “passwordNumChars”.

<trans-unit id="passwordNumChars" datatype="html">
    <source>Must be at least <x id="minLen" equiv-text="setting.SettingValue"/> characters long.</source>
    <target>Debe contener al menos <x id="minLen" equiv-text="setting.SettingValue"/> caracteres.</target>
    <note priority="1" from="meaning">password edit modal</note>
</trans-unit>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}