类型上不存在属性“ VAR_PLURAL”

时间:2019-09-04 14:09:12

标签: angular internationalization angular-i18n

使用有角度的8.x i18n,我遇到了一个非常晦涩的错误消息(因为所有i18n错误消息都倾向于出现;看着你,https://github.com/angular/angular-cli/issues/7555#issuecomment-394228634)。

该消息指出:ERROR in src/app/***.component.html(1,2): : Property 'VAR_PLURAL' does not exist on type '***Component'.

该错误仅能正确说明受影响的文件,但行指示符是无意义的。使用二进制搜索,注释了i18n复数形式的一半,我设法找到了麻烦的制造者:

<ng-container i18n="@@playerCardinality">
  {singleTournament.tournament.teamSize.max, plural, =1 {player} other {players}}
</ng-container>

起初,我认为问题可能是不同的var名称,因为此@@playerCardinality在整个应用中的多个位置上都使用过:

<ng-container i18n="@@playerCardinality">{ tournamentScreen.tournament.teamSize.max, plural, =1 {player} other {players} }</ng-container>
<ng-container i18n="@@playerCardinality">{ ladderScreen.ladder.teamSizeMax, plural, =1 {player} other {players} }</ng-container>

但是其他变量也没有相同的变量名,并且到目前为止没有问题。

注释掉其他情况也解决了该问题,因此它们之间一定是某种与交互相关的问题。

必须是一些平庸的问题,因为显然没有其他人遇到过类似的问题(基于google结果)...

2 个答案:

答案 0 :(得分:1)

找到了答案,可能与它有关的问题是我删除换行符时的格式问题。因此,基本上所有具有相同ID的翻译都必须具有相同的格式和相同的内容。

这些是有效的翻译版本:

<ng-container i18n="@@playerCardinality">{ singleTournament.tournament.teamSize.max, plural, =1 {player} other {players} }</ng-container>
<ng-container i18n="@@playerCardinality">{ tournamentScreen.tournament.teamSize.max, plural, =1 {player} other {players} }</ng-container>
<ng-container i18n="@@playerCardinality">{ ladderScreen.ladder.teamSizeMax, plural, =1 {player} other {players} }</ng-container>

答案 1 :(得分:1)

我知道作者已经为自己找到了解决方案,但是我将详细阐述并提出一些可能发生此错误的方案以及如何解决它们。此修补程序也适用于VAR_SELECT和VAR_PLURAL。因此,如果您看到此错误:ERROR in src/app/app.component.html(1,2): Property 'VAR_SELECT' does not exist on type 'AppComponent'.以下修复程序也应为您提供帮助。

如果您的翻译如下:

<trans-unit id="PLURAL_TEST" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
  <target>{VAR_PLURAL, plural, =0 {à l'instantt} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
</trans-unit>

并想在您的html中使用它,您将执行以下操作:

<p i18n="@@PLURAL_TEST">{minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago} }</p>

但是,如果您在html的{分钟,复数...}}部分之前或之后有一些字符,它将失败,并且您会看到此错误:ERROR in src/app/app.component.html(1,8): Property 'VAR_PLURAL' does not exist on type 'AppComponent'.

这意味着以下所有html值都会失败:

<p i18n="@@PLURAL_TEST"> {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago} }</p>
<p i18n="@@PLURAL_TEST">{minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago} } </p>
<p i18n="@@PLURAL_TEST">
{minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago} }
</p>

第一个空格开头,第二个空格结尾,第三个空格带有换行符。第三个是原始海报的示例。您可以将空格替换为任何字符,单词,内插等,否则它将始终失败。即使您将.xlf文件中的翻译更改为与html匹配,它仍然会失败。例如:

xlf:

<trans-unit id="PLURAL_TEST" datatype="html">
  <source> {VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago} }</source>
  <target> {VAR_PLURAL, plural, =0 {à l'instantt} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
</trans-unit>

html:

<p i18n="@@PLURAL_TEST"> {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago} }</p>

仍然会失败。即使翻译和html中都有领先的空格。

如果您确实希望将VAR_PLURAL或VAR_SELECT转换嵌套在另一个转换中,则应使用<x id="ICU" />标记来实现。

所以如果我想在我的html中使用它:

<p>Hello, {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago} }</p>

我需要定义两种翻译,一种用于文本的VAR_PLURAL或VAR_SELECT部分​​。我们将其称为内部翻译。并且,我们还将需要其他翻译内容(在本例中为Hello,部分),这将是外部翻译内容。所以我的翻译文件将如下所示:

<trans-unit id="PLURAL_TEST_OUTER" datatype="html">
  <source>Hello, <x id="ICU" /></source>
  <target>Bonjour, <x id="ICU" /></target>
</trans-unit>

<trans-unit id="5a134dee893586d02bffc9611056b9cadf9abfad" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" /> minutes ago} }</source>
  <target>{VAR_PLURAL, plural, =0 {à l'instantt} =1 {il y a une minute} other {il y a <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes} }</target>
</trans-unit>

请注意,内部表达式的trans-id必须自动生成(请参见https://github.com/angular/angular/issues/26379中的更多信息)。

我的html看起来像这样:

<p i18n="@@PLURAL_TEST_OUTER">Hello, {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago} }</p>

您可以在此处找到有关嵌套翻译的更多信息-https://angular.io/guide/i18n#translate-a-nested-expression

因此,总而言之,如果您看到此问题:

  1. 在html中的VAR_PLURAL或VAR_SELECT语句之前或之后检查空格,字符或内插。如果不应该将其删除。
  2. 如果应该存在,请确保将翻译正确嵌套在.xlf文件中。