Angular: How to extract i18n ids from json source files to outpur it in xlf files

Question

I have json preasent in my angular application like this:

[
{
"label": "First Name",
"i18n-label": "@@person.firstName"
},
{
"label": "Middle Name",
"i18n-label": "@@person.middleName"
},
{
"label": "Last Name",
"i18n-label": "@@person.lastName"
}
]

and on running ng extract-i18n. I need above json content to get generated and written in xlf file like message.xlf as below:

<trans-unit id="person.firstName" datatype="json">
<source>First Name</source>
<context-group purpose="location">
<context context-type="sourcefile">/abc.json</context>
<context context-type="linenumber">3</context>
</context-group>
</trans-unit>
<trans-unit id="person.middleName" datatype="json">
<source>Middle Name</source>
<context-group purpose="location">
<context context-type="sourcefile">/abc.json</context>
<context context-type="linenumber">3</context>
</context-group>
</trans-unit>
<trans-unit id="person.lastName" datatype="json">
<source>Last Name</source>
<context-group purpose="location">
<context context-type="sourcefile">/abc.json</context>
<context context-type="linenumber">3</context>
</context-group>
</trans-unit>

` usually ng extract looks for html and typescrtipt and I'm able to extract. But I've requirement to internationalize the label from json files.

I need this to generate different language xlf files for different languages.

Please do help or share idea on how to address the requirement.

I tried to run ng extract-i18n command on json but couldn't get value extracted.