Include ­ character (or equivalent) in Angular's localize library

Using Angular's localize library (@angular/localize) to handle translations in an application. In my German copy however I have certain words that are too long and need a soft hyphen line break opportunity.

If I include the &shy character in the translation file however, it gets rendered as just that. Is there a way to render the line break character correctly, or else prevent the & character from being rendered in html as &amp?

Example translation file (using json format - can use a different format though if it makes a difference):

{
"home-heading-text": "Folgendes Wort ist sehr lang: Abschieds­geschenk"
}


<h1 i18n="@@home-heading-text">Following word is very long: farewell gift</h1>

Continue reading...