Angular i18n - Error: Could not mark an element as translatable inside a translatable section

Question

In my Angular 7 application, I have an html with nested tags like this -

<p i18n="@@footerText">Some Text Here 
  <a i18n="@@footerLink" href="http://url.com" target="_blank">Link Text</a> 
  Another Text Here
</P>        

When executing following command

ng xi18n --output-path translate

It throws an error -
Error: Could not mark an element as translatable inside a translatable section

How to use i18n with nested tags?

Answer 1

<p>
  <ng-container i18n="@@footerPrefix">Some Text Here</ng-container> 
  <a i18n="@@footerLink" href="http://url.com" target="_blank">Link Text</a> 
  <ng-container i18n="@@footerSuffix">Another Text Here</ng-container> 
</p>

Or just put everything, including the link, in your translation

<p i18n="@@footerText">Some Text Here 
  <a href="http://url.com" target="_blank">Link Text</a> 
  Another Text Here
</p>