i18n command

ng xi18n –output-path src


Now that you have generated a messages bundle source file, you can translate it. Let’s say that your file containing the french translations is named messages.fr.xlf and is located in the src/locale folder. If you want to use it when you serve your application you can use the 3 following commands:

  •  Localization file to use for i18n.
  •  Format of the localization file specified with –i18n-file.
  •  Locale to use for i18n.

In our case we can load the french translations with the following command:

ng serve --aot --locale fr --i18n-format xlf --i18n-file src/locale/messages.fr.xlf

Our application is exactly the same but the LOCALE_ID has been provided with "fr",TRANSLATIONS_FORMAT with "xlf" and TRANSLATIONS with the content of messages.fr.xlf. All the strings flagged for i18n have been replaced with their french translations.

Note: this only works for AOT, if you want to use i18n in JIT you will have to update your bootstrap file yourself.


To build your application with a specific locale you can use the exact same commands that you used for serve:

ng build --aot --locale fr --i18n-format xlf --i18n-file src/i18n/messages.fr.xlf

When you build your application for a specific locale, it is probably a good idea to change the output path with the command –output-path in order to save the files to a different location.

ng build --aot --output-path dist/fr --locale fr --i18n-format xlf --i18n-file src/i18n/messages.fr.xlf

If you end up serving this specific version from a subdirectory, you can also change the base url used by your application with the command –base-href.

For example if the french version of your application is served from https://myapp.com/fr/then you would build the french version like this:

ng build --aot --output-path dist/fr --base-href fr --locale fr --i18n-format xlf --i18n-file src/i18n/messages.fr.xlf

If you need more details about how to create scripts to generate the app in multiple languages and how to setup Apache 2 to serve them from different subdirectories, you can read this great tutorial by Philippe Martin.









When your app is ready, you can extract the strings to translate from your templates with the ng xi18n command.

By default it will create a file named messages.xlf in your src folder. You can use parameters from the xi18n command to change the format, the name, the location and the source locale of the extracted file.

For example to create a file in the src/locale folder you would use:

Handle singular and plural

Different languages have different pluralization rules.

Suppose your application says something about a collection of wolves. In English, depending upon the number of wolves, you could display "no wolves", "one wolf", "two wolves", or "a wolf pack". Other languages might express the cardinality differently.

Here’s how you could mark up the component template to display the phrase appropriate to the number of wolves:



<span i18n>{wolves, plural, =0 {no wolves} =1 {one wolf} =2 {two wolves} other {a wolf pack}}</span>
  • The first parameter is the key. It is bound to the component property (wolves) that determines the number of wolves.
  • The second parameter identifies this as a plural translation type.
  • The third parameter defines a pluralization pattern consisting of pluralization categories and their matching values.

Pluralization categories include:

  • =0
  • =1
  • =5
  • few
  • other

Put the default English translation in braces ({}) next to the pluralization category.

  • When you’re talking about one wolf, you could write =1 {one wolf}.
  • For zero wolves, you could write =0 {no wolves}.
  • For two wolves, you could write =2 {two wolves}.

You could keep this up for three, four, and every other number of wolves. Or you could specify the other category as a catch-all for any unmatched cardinality and write something like: other {a wolf pack}.

Select among alternative texts

The following format message in the component template binds to the component’s gender property, which outputs either an "m" or an "f". The message maps those values to the appropriate translation:



<span i18n>The hero is {gender, select, m {male} f {female}}</span>

国际化的中文翻译,我用工具+手工进行了初步翻译,@曹云明 你来继续细化

翻译文件在 client2/src/locale/messages.zh-CN.xlf




不过翻译要注意,String.xlf 翻译文件 直接更新是无效的

   <trans-unit id="fdaf3f57f2fdd07676eaabb17a98403f277356c3" datatype="html">

        <source>Latest Update Time</source>



小竹  10:36:04

String.xlf 里面每个翻译,有个 id,是根据字符串好描述,程序生成的,要用程序生成之后,拿到再修改

String.json 可以直接更新

小竹  10:37:45


ng xi18n –output-path src

找到重新生成文件里面的新字符串对应的 trans-unit,拷贝到原来的中英文翻译里面

变量 int 国际化写法

<td i18n>{item.logLevel, plural, =0 {None} =5 {Debug} =10 {Info} =50 {Warning} =100 {Error}}</td>

变量 string 国际化写法

<span i18n>The hero is {gender, select, m {male} f {female}}</span>