Angular ICU Variables for Crowdin Compatibility Preprocessing and Postprocessing

Angular's i18n (internationalization) tool uses the ICU message format, which is a Unicode standardized syntax.

In Angular, ICU strings use curly braces {} to denote a placeholder for a variable value. However, you can also have double curly braces {{ }}, it's a syntax called interpolation, which is used to bind a property of a component to the content of the markup.

For example, if you have a component property name, you can display it in your template with {{name}}.

In the context of internationalization and ICU messages, you might use double curly braces in your messages like this

<div i18n>
  {items.length, plural, 
    =0 {{{name}} has no items in their cart.}
    =1 {{{name}} has one item in their cart.}
    other {{{name}} has {items.length} items in their cart.}
  }
</div>

Double curly braces are considered invalid ICU by many ICU processing libraries, including Crowdin. While you can still translate this syntax with Crowdin, the nice preview in the Crowdin editor will not be available.

This application will preprocess your XLF files and replace double curly braces with a <crowdin> tag.

Note: Your texts will look different in Crowdin than in your resource files, but the <crowdin> tag will disappear when exporting translations and the double braces will be back.

IMPORTANT: When installing the app, make sure you only make the app available for projects where it's needed, as the app may interfere and cause unnecessary changes to your non-Angular XLF files in other projects if installed for all projects.