Angular i18n Markup Collision

jengfad profile image Jennifer Fadriquela Updated on ・1 min read

i18n is tightly coupled with HTML markup. I had a couple of issue wherein Dev-A edited the markup then Dev-B triggered translation scripts. Dev-B was confused because there are translation items modified but don't belong to his intended changes.

Issue A - Newline formatting

Original Content

<div class="login-alert"i18n="Login Page|Validation message">Password is required.</div>

Modified Content (for some IDEs, they autoformat newlines)

<div class="login-alert"i18n="Login Page|Validation message">
   Password is required.

Notice that Password is required is now on its own line. Once we run i18n-extract, it will generate a new hash id for this item.

Alt Text

Issue B - Changes on text content

Taking the same item on A, let's remove the "." then run i18n-extract.

<div class="login-alert"i18n="Login Page|Validation message">Password is required</div>

It generated a new hash id for the above changes.

Alt Text


I created a console application in C# that will format xlf files and ignore whitespace changes. This will execute i18n-extract and proceed on processing xlf files. Running this tool will prevent new hash id creation. Here is the source code.


With this in mind, we should always check our changes if affected existing translation items by running i18n-extract before pushing it.

Posted on by:


Editor guide