属性“VAR_PLURAL”在类型中不存在

Question

使用角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>

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

注释掉那些其他事件也解决了这个问题，所以它必须是那些之间的某种交互相关的问题。

一定是一些平庸的问题，因为显然没有其他人有类似的问题(根据谷歌的结果).

Answer 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>

Answer 2

我知道作者已经为自己找到了一个解决方案，但我将详细阐述并列出可能发生此错误的几个场景，以及如何修复它们。此外，此修复方法也适用于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的{ you，复数}}部分之前或之后有一些字符，它将失败，您将看到以下错误：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必须是自动生成的(请参阅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文件中正确嵌套您的翻译。