DEV Community

Jennifer Fadriquela
Jennifer Fadriquela

Posted on • Updated on

Angular i18n Markup Collision

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>
Enter fullscreen mode Exit fullscreen mode

Modified Content (for some IDEs, they autoformat newlines)

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

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)