Angular i18n Markup Collision

jengfad

Jennifer Fadriquela

Posted on May 30, 2020

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.
</div>
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

Workaround

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.

Conclusion

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

πŸ’– πŸ’ͺ πŸ™… 🚩
jengfad
Jennifer Fadriquela

Posted on May 30, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related