如何从 Angular 6 中的组件中提取文本进行翻译 (ngx-translate)

Question

I'm trying to find a way to fetch all text strings in my Angular 6 projects files (ts and styles and html files) so that the nested JSON Objects are automagically generated using the files path. Eg in component html file:

app/shared/forms/categories/categories.component.html:

<a id="input-categories">This string</a>
<a class="btn accept">This button</a>

after extraction, in en.json:

{
  "shared": {
    "forms": {
      "categories":{
         "a-input-categories": "This string",
         "a-btn-accept": "This button"
      }
    }
  }
}

I've had a look at ngx-translate-extract , but it will only extract already translatable {{ name.space.here | translate }} {{ name.space.here | translate }} pipes etc.

If this is impossible, is there a way to "mark" each string using some default marker such as trans in this fashion:

<a id="input-categories" trans>This string</a>
<a class="btn accept" trans>This button</a>

My problem is that the front end dev has hardcoded everything, and now we are looking at a 4 digit number of strings that is required to be pulled out of the markup and code for translation.

Answer 1

you can ngx-translate-extractor

https://github.com/biesbjerg/ngx-translate-extract

ngx-translate-extract --input ./src --output ./src/assets/i18n/template.json

Answer 2

You can use text2locale .

npm install -g github:juliandavidmr/text2locale

Extract and generate JSON files:

text2locale input "./example/src" -o "./example/locale/" -l en -t es,de,zh

Answer 3

A simple solution that might help you is:

<(.+)( .*)?>(.*[a-zA-Z]+.*)<\/\1>

Write give the following regex to a Replace tool in a text editor, it will catch all tags with text inside them.

Then replace the first tag's contents, with (for VS Code)

<$1 i18n $2>$3</$1>

or maybe for other editors:

<\1 i18n \2>\3<\/\1>

This will convert every <tag attribute="value" etc>stuff</tag> to <tag i18n attribute="value" etc>stuff</tag> .

Then you can use ng xi18n to automatically extract all text for translation to XLIFF.

This assumes that your html templates are formatted like:

<tag>
   <subtag> text </subtag>
</tag>

Which means only one tag with text per line ( <tag><subtag> in the same line might create an issue), and that text is in the same line as its enclosing tags.