angular 🚀 - [i18n] 计划

我想看看在 aot 模式下进行动态绑定的能力。有两个用例特别支持为什么应该将其添加到路线图中。

第一个是基本用例，您不希望每种语言都有单独的应用程序。这需要应用程序外部的某种重定向逻辑，并且不允许在没有完全重新加载网站的情况下动态更改语言。

第二种情况是您使用 cordova 将应用程序嵌入到移动设备中。据我所知，您的选择是 jit，从而减慢网站速度，为每种语言创建一个单独的应用程序，或者在应用程序中包含每种语言（这当然会使它膨胀）。这些都不是好的选择。似乎 Ionic 不使用 i18n，我想知道这是否是原因。

jlutz777 于 2017-05-09

👍47 ❤4

@jlutz777这些是 2 个有效的用例，这个主题最近在内部讨论过，我也一直在提倡。考虑到 i18n 和 AoT 在 Angular 中的工作方式，目前还不容易实现，但是一旦我们在 v5 中获得 AoT 的新编译过程，它可能会在未来实现。
我会将它添加到路线图一次/如果我们有一些官方和具体的东西。

ocombe 于 2017-05-09

我正在开发 Electron + Angular 2 应用程序，现在尝试使用 Angular 的 i18n 功能添加对多种语言的本地化支持。实际上，模板字符串的提取并将它们转换为不同的语言文件格式都有明确的记录，尽管我仍然不太清楚和寻找：

我可以动态切换语言吗？还是我需要为不同的语言单独构建应用程序。
我可以在一个地方管理/合并所有字符串（以键/值对的形式），以便我可以更改
一个地方的字符串要在多个地方生效？
我可以从模板以外的任何地方访问本地化文件以获取特定的语言字符串
提供密钥？（和我上面问的一样）。

vishalbhardwaj26 于 2017-05-11

第 2 点和第 3 点将通过“使用模板外的翻译字符串 - #11405”功能解决。
对于第 1 点，请参阅上面我给@jlutz777的答案。现在，您仍然必须以多种语言构建应用程序，或者使用可以在引导时动态加载翻译的 JIT（它不会在运行时切换，但它仍然比捆绑 x 次要好）。

ocombe 于 2017-05-11

👍1

应用程序中使用的 UI 语言应该不需要构建同一应用程序的多个版本。这绝不应该是“编译器”问题。如果是，那么编译器就有缺陷。问题应该是使应用程序设计能够在运行时从数据文件中加载文本。这应该使用可以像其他任何模块一样加载和使用的模块/库来完成。根本不要让它成为编译器函数。

figuerres 于 2017-05-22

👍13

@figuerres这是将来会改变的东西，还没有承诺，但我们知道这个问题，我们正在寻找可能的解决方案，使用外部文件就是其中之一

ocombe 于 2017-05-22

嗨@ocombe - 看起来我们可能会在 Angular 中为我们的应用程序使用 i18n。您认为文档中是否有任何功能可能会在未来几个月内被弃用或发生重大变化？任何信息，将不胜感激。再次感谢 DVD！

rjsteinert 于 2017-05-31

嘿@rjsteinert！很高兴知道那件事！
目前只计划了一项重大更改，即自动生成 ID。该方法将更改，ID 将不再匹配，但将有一个 cli 迁移工具来更新您的翻译文件（以及一个参数，您可以使用它仅在您准备好时进行迁移）。

ocombe 于 2017-06-01

我今天在谷歌上搜索了很多关于这个主题的内容，想知道是否有一个“简单”的解决方案，比如用调用服务而不是翻译替换 i18n-tags？

当前的：
<span i18n>Hello world</span> => 呈现为<span>Hello world</span>

我的点子：
<span i18n>Hello world</span> => 渲染为<span>{{i18nservice.translate('pass-in-the-generated-message-id')}}</span>

这样，真正的翻译可以在 AOT 中动态完成，因为可以从 API、文件等填充服务，甚至切换语言环境也不会比加载新源的i18nservice.setLocale('de-DE')多得多。
使用 xi18n-tool 提取文本仍然可以像以前一样工作，我们可以利用无论如何生成的消息 id 作为翻译服务的索引。
当前的实现也仍然可以完美地工作，因为 ngc 可以简单地查找“--use-i18nservice”标志，然后像现在一样编译。

我目前可以确定的一个问题是将 i18nservice 注入到每个组件中，因为它必须存在于组件上下文中才能被调用，但这应该可以通过一种或另一种方式解决。

对此有什么想法吗？

actra-gschuster 于 2017-06-23

这是我们正在考虑的事情之一，是的，当编译器在运行时 (AOT) 不可用时，如何处理这些翻译中的代码块仍然存在问题。这意味着我们不能在翻译中使用角度组件/指令/管道......

ocombe 于 2017-06-26

是的，没想到。
我目前正在开发一个 POC/解决方法，它在构建步骤（webpack）中将所有翻译内联到 HTML 中，并使用 ng-switch 将它们包装到 ng-containers 中。
对于 i18n 属性，它使用在 nativeElement 上设置它们的指令。
翻译本身也被“渲染”，然后替换所有那些<x id=".. "/>占位符。

它很丑，但很有效……等不及 ng 原生支持它了。
将在本周晚些时候发布 POC，也许它可以对您的进一步构想有所帮助。

actra-gschuster 于 2017-06-26

❤2 👍2 🎉1 😄1

在实施之前，我想出了一个适合我需要的“解决方案”。
预加载器现在在移交给编译器之前为所有语言环境呈现 HTML，到目前为止就像一个魅力。

回购： https ://github.com/actra-development-oss/ng-i18n-aot-loader
NPM： https: //www.npmjs.com/package/@actra-development-oss/ng -i18n-aot-loader

actra-gschuster 于 2017-06-27

❤2 🎉1 😄1 👍1

可能组件可能具有告诉系统/编译器它需要服务的属性。
然后，该服务获取 id 和语言环境并返回本地化文本/标记。
所有本地化文本都作为服务可以读取的资源存储在服务器上。

如果组件没有属性 no locale 运行时。
如果组件有它，那么它会调用在运行时获取本地化数据。
编译器只是构建数据文件并连接服务。

在我看来，这似乎是一种处理大多数应用程序最常见需求的好方法，并且不需要站点构建和维护同一应用程序的多个副本。

figuerres 于 2017-06-28

我也有这个想法。
问题是翻译可以包含绑定，因此在从外部资源加载翻译文件时会打开系统进行代码注入。
此外，还需要编译器根据翻译动态解析这些绑定。

恕我直言，一个有效的解决方案可能是我实现为 POC（见上面的评论）在编译时内联翻译的方式，只是以一种更优雅、更集成的方式。
上面提到的两个问题都将被消除，唯一的缺点是我可以想象的可能是捆绑包大小，它会增长到“普通捆绑包”+（翻译的 html-size * locales）。
这可以通过仅ng-switch ing i18n -tagged html 而不是整个文档来降低，但i18n-* -tags 仍然存在问题。

actra-gschuster 于 2017-06-28

事情就是这样；有时你有限制....

从实际的角度来看，最好不要这样做，您可以拥有可以以多种语言提供的大量文本。故事的结局。

你需要一个数据绑定块吗？好的，但这不在国际化文本中，它必须是分开的。你仍然可以使用 html 和 css 来设置和格式化结果。但是你不能以你能想到的每一种方式嵌入或组合它们。
比如说一个 div 或 ap 标签可以有多个 span 一个 span 是文本，另一个 span 是绑定日期 text span 绑定到 i18n 语言环境服务，日期绑定到某个日期服务这两个 span 位于格式化它们的段落标签。

保持简单，首先让它为所有用户的 95% 工作，然后找出边缘情况。

figuerres 于 2017-06-28

我不认为这是一个边缘案例，它照常营业。
Angular 是一个商业级框架，所以即使不是全部，也有很多 i18n 用户需要在文本内部进行绑定，或者至少是多元化和选择。

<span i18n>Hello, {user.gender, select, m {Mr.}, f {Ms.}} {{user.name}}</span>
你将如何用分隔的字符串解决这个问题？
简单的回答：你不能，因为你不知道目标语言的规则，不是每种语言都遵循“问候”、“性别”、“姓名”的格式。

分离这些块将：

杀死上下文，翻译者不会得到完整句子的意思
不可能通过 CSS 以正确的顺序合并块，您必须为每个翻译指定规则，因此 CSS-guy 需要知道目标语言，或者 translation-guy 需要知道 CSS，两者都不是是可以接受的。

核心 i18n 按预期工作在角度，可用于商业级应用程序，唯一缺少的显然是 AOT 兼容性，所以我不明白你的观点为什么一个强大的工作系统应该被不具备一半能力的东西取代需要多次工作才能完成。

actra-gschuster 于 2017-06-28

👍3

我们明天有一个会议来寻找解决这个问题的办法。

ocombe 于 2017-06-28

👍2

@ocombe很高兴听到这个消息，我希望这会为 Angular 的未来版本带来一些好东西，在工作中，我们真的很喜欢它的大部分内容如何满足我们的开发需求！

figuerres 于 2017-06-28

@ocombe ，是否可以在不重新加载整个文档的情况下更改语言？我解释：
我在名为“about”的页面上，但是当我更改语言时，我被重定向到我的应用程序的主入口页面。

Tryptich 于 2017-06-29

在我的 i18n 应用程序上工作时，我还遇到了一个已知的“错误”，即来自例如 @angular/material（位于 node_modules 中）的外部样式表无法解决，因此ng-xi18n -tool 失败了。
我为提取工具实现了“忽略丢失的文件”-HostContext，也作为 POC，但添加为 PR #17845 以将其链接到主存储库。

@ocombe ，因为您似乎对这个话题非常活跃，您介意看看 PR 并提供反馈吗？

actra-gschuster 于 2017-06-29

👍1

谢谢，我会看看它。

ocombe 于 2017-06-30

几天来一直在寻找一种方法来实现包括动态数据在内的整个项目的内部化，但没有发现任何具体的东西。你能不能给我建议一些至少暂时对我有帮助的东西。谢谢你。

RAJKUMAR-PATTNAIK 于 2017-07-14

你好@ocombe！我们能否跟进@jlutz777提出的观点（关于动态绑定，因此每种语言没有一个应用程序）？

非常感谢您的工作！

jean-philippe-bousselin 于 2017-09-18

@vicb现在正在处理它，它将在 5.x 中（不是 5.0，但很可能是 5.1）

ocombe 于 2017-09-18

👍7

@ocombe是否应该更新清单？我可以看到其中一些已经合并到较新的版本中。这将更好地反映您的辛勤工作。 😃

trotyl 于 2017-09-18

是的，好主意，我会更新它
编辑：更新

ocombe 于 2017-09-18

运行时 i18n（一个包含 AOT 的所有语言环境的捆绑包）- [正在处理中]

相关问题/公关/讨论在哪里？

Toub 于 2017-11-10

👍14

拥有一个用于扩展命名日期格式（例如ultraLongDate ）的 api 会很酷，因此本机日期管道会知道它并且不需要自定义日期管道。

dzonatan 于 2017-11-22

🎉1 👍1

只是对“Runtime i18n（一个适用于所有带有 AOT 的语言环境的捆绑包）的进展感到好奇。”

我的团队有多个包含 60 多种语言的大型应用程序。现在我们并行运行 N 个构建，其中 N 是语言的数量。正如您可以想象的那样，这是资源密集型的，特别是考虑到应用程序相当大并且每天多次部署到多个环境中。

我希望的是：

运行时 i18n 上的一些粗略 ETA
确认运行时 i18n 将为所有语言进行一次构建
生成的每种语言是否可以延迟加载或放在一个大包中

chcaru 于 2017-12-15

👍5

@chcaru在等待 ng 提供“本机”解决方案时查看https://github.com/actra-development-oss/ng-i18n-aot-loader/
它提供了您所要求的，一个具有多个语言环境的 AOT 构建。

actra-gschuster 于 2017-12-15

👍2

@chcaru ：
1/ 粗略的 ETA 是 Angular v6（我相信第一个测试版应该在 1 月底之前？不确定），好消息是代码翻译应该在运行时翻译之后迅速跟进，因为几乎所有的工作都将完成
2/是的
3/ 翻译应该从包中分离出来，你可以在引导之前延迟加载你需要的，或者只是将所有东西捆绑在一起，我们也希望支持模块的延迟加载翻译，但不确定什么时候会能得到的

ocombe 于 2017-12-15

❤7 🎉7

@ocombe在 angularv6 发布之前，动态加载翻译和/或使用单个包创建多语言应用程序的最重要选项是 ngx-translate。

您是否有一些提示可以帮助人们在 angularv6 退出时开始使用 ngx-translate 轻松迁移？
两个应用程序之间的任何桥梁？

Toub 于 2017-12-19

👍1

并非如此，代码完全不同......如果我有动力开发迁移工具，我们将看到 v6 何时推出这些功能

ocombe 于 2017-12-19

嗨，感谢即将推出的功能的透明度。

了解以下问题的答案将非常有帮助：

知道新的 i18n 工作流程与https://angular.io/guide/i18n中描述的当前工作流程有何不同吗？
i18n 和 i18n-* 例如带有可选自定义 id 的 i18n-title 属性在模板中是否仍然可用？
以下命令仍然有效吗？

ng serve --aot --locale fr

ng xi18n  --i18nFormat=xlf
ng xi18n  --i18nFormat=xlf2
ng xi18n  --i18nFormat=xmb

从模板中提取的messages.xlf trans-units 将如何与代码中使用的trans-units 合并？

rBull 于 2017-12-20

我们将使更新体验尽可能流畅，很可能之前有效的内容至少在 v7 之后仍然有效。
i18n 属性将保持不变
提取也应该相同
这可能是唯一会改变的部分，我不确定如何改变，所以我不想告诉你可能会改变的事情，但是在创建视图时消息将在运行时合并（因此在引导程序和出现的视图之间屏幕）

ocombe 于 2017-12-20

👍2

在@Toub的评论之后，对于这个过渡期，我们有兴趣获得对我们想要实现的以下方法（混合 i18n 属性和 ngx-translate）的反馈。我们的目标是在新的 i18n 支持准备就绪时尽量减少代码中的更新。

（注意我们需要动态语言环境，即每个语言环境不是一个生成的应用程序）

我们将使用i18n属性，以便我们可以利用角度提取器工具。
基于提取的工具，我们可以将xliff文件（或其他格式）转换为ngx-translate可以使用的格式（json或po）的内容
我们将利用 $#$ i18n $#$ 元素上的translate属性来应用翻译（之前提取的）

这是一个示例：

<!-- Without parameters -->
<div i18n="hello-id" translate>HELLO</div>

<!-- With parameters -->
<div i18n="hello-id" translate [translateParams]="{value: 'world'}">HELLO</div>

感谢您的反馈！

templth 于 2017-12-20

你能为此在 ngx-translate 上打开一个问题吗？我认为最好的办法可能是更新库以支持“i18n”属性作为“翻译”的替代品

ocombe 于 2017-12-20

@ocombe感谢您的建议！刚刚在 ngx-translate 上为此添加了一个问题...

templth 于 2017-12-20

@ocombe我可以看到的问题是i18n / i18n-*属性在运行时被删除（https://github.com/angular/angular/issues/11042）。有没有办法保留它们？

templth 于 2017-12-21

我检查了，除非我弄错了，否则只有在您使用 Angular i18n 时它们才会被删除（这意味着您在进行编译时会加载翻译）。

ocombe 于 2017-12-21

@ocombe我明白，但我没有加载翻译，因为我使用的是 Angular CLI 并使用ng serve ...

templth 于 2017-12-21

@ocombe ，我们公司将很快使用当前规定的每个区域设置多个应用程序策略来支持 i18n。我们还计划在 url 中包含语言环境并在应用程序中设置基本 href。一旦运行时 i18n 功能完成，我们需要对我们的 url 语言环境策略进行哪些更改？一旦发布运行时 i18n，我们是否有更好的方法来开始避免大规模重构？感谢您在所有这些方面所做的工作。

owenmecham 于 2017-12-29

⬆️应该说“即将开始”

owenmecham 于 2017-12-29

一个应用程序/语言环境应该仍然像现在一样工作（如果您不使用 cli，则减去在引导时加载语言环境文件的小改动）

ocombe 于 2017-12-29

有人可以针对我在捆绑期间从模板中删除哪个文件i18n属性吗？

抄送@ocombe

elvisbegovic 于 2018-01-25

它在 4.2.6 中进行了更改（公关 https://github.com/angular/angular/issues/17999）

ocombe 于 2018-01-25

你好！我关注这个话题很久了。我看到 v6 的第一个测试版已经发布。我阅读了更改日志，但没有看到与这个长期存在的问题相关的任何内容。有这方面的消息吗？或者至少，是否可以保证界面与您的 polyfill 相似？

感谢您的工作！

adrm 于 2018-01-25

它将在最后一个测试版中，或者可能是 RC（我知道我知道......）。
该界面将类似于闭包中的goog.getMsg ，因为这是 google 在内部用于代码翻译的： https ://developer.pubref.org/static/apidoc/global/closure/goog/getMsg.html
但是我们可能正在使用包装器，所以它可能会改变 Angular 的接口，目前还不确定。
在我的 polyfill 中，我使用了一个类似的接口，但可以在必要时定义 id、描述和含义，并且我相信我们将需要一种或另一种方式（通过参数或通过装饰器）

ocombe 于 2018-01-25

感谢您的辛勤工作！我们正准备从 4 月开始彻底重写我们的整个 1.x 应用程序。我们可以/应该做些什么来为这些变化做准备？现在我们正计划使用 6.x。再次感谢！

santhony7 于 2018-02-01

@ocombe只是好奇“忽略前导和尾随空格”何时会出现？

chcaru 于 2018-02-08

我需要更新路线图，但现在有点困惑（即使对我来说也是如此）。特别是这个功能显然不是优先事项，不要指望我们很快就会努力

ocombe 于 2018-02-08

@ocombe是的，这会很棒。我们也对运行时 i18n 非常感兴趣，因为它是我们唯一的阻塞点。你能猜一下它的完成率吗？

非常感谢您的辛勤工作！

Karamuto 于 2018-02-15

👍2

@ocombe

特别是这个功能显然不是优先事项，不要指望我们很快就会努力

你能澄清一下你在这里谈论的是什么功能吗？我不想做任何假设。

ofuangka 于 2018-02-18

@ofuangka “忽略前导和尾随空格”功能不是优先事项。
@Karamuto现在很难猜，我们正在努力

ocombe 于 2018-02-19

@ocombe
您能否分享一下您关于Runtime i18n 的里程碑（适用于所有带有 AOT 的语言环境的捆绑包）

现在我们决定使用 xi18n 工具或使用 3rd 方库来进行大型多语言项目。
我们希望能够使用规范的工具，但是，意识到它太原始了。

我们还希望能够拆分 xlf 文件（每个模块一个文件），这可能吗？

hotspurs 于 2018-02-21

👍23

起来
运行时 i18n 会在 Angular 6 中发布吗？

感谢和快乐的编码！

ghost 于 2018-03-01

👍38 ❤2 👎1

在这里失去希望，这将及时完成，因为剩下的时间不多了，到目前为止还没有关于此功能的相关信息。

版本 7 对我们来说已经很晚了。

Karamuto 于 2018-03-19

@卡拉穆托#22654
我认为它将在 v6 中发布，但他们必须先完成 Ivy。

sandangel 于 2018-03-19

本周我们应该有一个 hello world 工作，但功能最少（例如不支持 ICU）。
但由于它是在标志后面的 ivy 发布的，我们将继续努力并在完成新功能后立即发布，无需等待 v7

ocombe 于 2018-03-19

🎉14 ❤12 👍6

@ocombe
听起来不错！它不需要从一开始就与ICU一起完成。如果它会在 v6 的后面版本中推进，这对我们来说完全没问题。

再次感谢您的出色工作！

Karamuto 于 2018-03-19

@Karamuto见 #22654 抢先体验！

sarunint 于 2018-03-19

👍3

愚蠢的问题：有没有办法为自定义组件的基于字符串的输入提供 i18n 指令。转发 aria-labels 时的示例：

我包装了一个做很酷的事情的自定义按钮：

自定义按钮的模板只是：

有没有办法做到这一点？

kekraft 于 2018-04-07

@kekraft我认为对于静态输入，您可以使用 i18n 属性语法：

<custom-button ariaLabel="your label" i18n-ariaLabel></custom-button>

在组件中：

<button [attr.aria-label]="ariaLabel">Some button</button>

eppsilon 于 2018-04-07

@ocombe您是否需要贡献者来完成任何运行时 i18n工作？

pmccloghrylaing 于 2018-04-10

👍12

是的！ v6发布~~~
这里有什么更新吗？

keatkeat87 于 2018-05-05

示例 i18n 角度 6 在这里
https://github.com/angular/angular/pull/23660

sandangel 于 2018-05-05

@sandangel你的意思是简单的“一切”或“检查的一切”，从这个线程开始的计划？
真的很期待有一个应用程序，我认为这是最重要的事情之一。转到您链接的#23660，然后到达https://pr23660-e12f469.ngbuilds.io/guide/i18n
但它仍然说：

当您使用 AOT 编译器进行国际化时，您必须为每种语言预先构建一个单独的应用程序包，并根据服务器端语言检测或 url 参数提供适当的包。

是否有可能有多个语言的单一应用程序或还没有？

MrCroft 于 2018-05-05

👍2

@MrCroft看起来运行时 i18n 仍在进行中。我像您一样阅读了更多选项，但不是所有本地化的捆绑包:(

JanEggers 于 2018-05-06

我们有一个工作的 hello world，但它仅适用于新的渲染器 (ivy)，由于 ivy 还没有准备好迎接黄金时段，不幸的是你将不得不等待:(

ocombe 于 2018-05-06

🎉1 👍1

@ocombe所以，除非我们在生产环境中没有 Ivy（可能在 v7 左右），否则我们不会有运行时翻译。它是否正确？

fetis 于 2018-05-06

@ocombe hello world 和 ivy 的东西是公开的吗？尝试理解这个新的 i18next 实现会很酷😃

feloy 于 2018-05-06

👍2

@fetis https://github.com/actra-development-oss/ng-i18n-aot-loader/

actra-gschuster 于 2018-05-06

@fetis是的 :(
@feloy是的，简单的 hello world 在这里： https ://github.com/angular/angular/tree/master/packages/core/test/bundling/hello_world_i18n 但非常少
你可以在这里找到测试： https ://github.com/angular/angular/blob/master/packages/compiler/test/render3/r3_view_compiler_i18n_spec.ts
以及这里的一些重构+提取： https ://github.com/angular/angular/pull/22931

ocombe 于 2018-05-06

@ocombe我们正在尝试在我们的应用程序中实现 i18n，但是无论我在哪里读到它，我都发现每种语言都需要一个 messages.xlf 文件。考虑到具有各种面向客户的屏幕等的复杂应用程序，这不会成为维护的开销。我希望看看我们是否可以分解每个组件或每个模块的消息文件？已经支持了吗？

vamshee-m 于 2018-05-07

@stickler-v 这个文件只是将您的字符串传输到您的翻译软件。不要考虑手动翻译。

fetis 于 2018-05-07

我明白了，我们在哪里有不同语言的实际文本？我们需要手动管理这些文本，而不是让翻译人员来做。

vamshee-m 于 2018-05-07

对不起，但我有点失落。基于此处的原始文档https://angular.io/guide/i18n。 src/app/app.component.html 将只有英文文本。 messages.fr.xlf 是具有法语文本的文件，但它是自动生成的，不建议触摸它。

如果我想使用法语文本而不是英语呈现 app.component.html，我将在哪里指定法语消息“Bonjour”等？

vamshee-m 于 2018-05-07

@stickler-v 这真的是题外话，请在 StackOverflow 上创建一个问题。我很乐意在那里回答。

fetis 于 2018-05-07

请不要在这里讨论这个，这不是这里的主题，谢谢
至于你的问题@stickler-v，现在每个模块/组件一个文件是不可能的，它可能在将来，但它不在我们现在正在处理的事情列表中

ocombe 于 2018-05-07

有计划支持路线翻译吗？

2f4f4f 于 2018-05-08

👍4

抱歉，如果这个问题已经得到解答，但是这个版本可以在 JS 中进行翻译，还是仍然是模板？

santhony7 于 2018-05-08

@santhony7仍然不可能，因为 Ivy 还没有准备好。

actra-gschuster 于 2018-05-08

我对运行时 i18n 的意图/功能的一个问题是，这是否意味着我们基本上能够在运行时选择语言并“翻转”它而无需重新加载应用程序，就像旧的ng-translate中的功能一样对于 AngularJS 和ngx-translate ？或者这是否意味着完全不同的东西？

mjschranz 于 2018-05-10

不，您必须重新加载应用程序才能更改语言。

在当前的 i18n 中，当您构建并提供翻译时，我们会替换捆绑包代码中的字符串，这意味着捆绑包已本地化。
运行时 i18n 意味着翻译文件在应用程序启动时加载，而不是像现在这样在构建时加载。
因此，您将能够在应用程序启动之前延迟加载翻译文件，这意味着该包与语言是分开的，您只会为您的应用程序获得一个包。
您还可以选择为每种语言打包一个，并将语言文件与您的应用程序捆绑在一起（就像我们现在正在做的那样），您将避免延迟加载翻译文件所需的延迟。
在一种情况下，您会执行额外的 http 请求，而在另一种情况下则不会，但我认为不会有足够大的差异来证明每种语言都有一个捆绑包是合理的。

运行时 i18n 的优点：

检测语言客户端，并延迟加载您想要的翻译文件
因为代码是独立于语言的，所以你会得到一个适用于所有语言的包
库也可以与“i18n”兼容
因为我们在运行时加载翻译，所以我们拥有提供服务所需的一切，也可以在您的代码中进行翻译（不仅仅是模板）
我们可以按模块拆分翻译（一开始可能不可用）

缺点：

当翻译被提取并转换为 html 节点时，在运行时翻译的成本很小，但希望你不应该注意到这一点，因为 ivy 会比当前渲染器快很多
延迟加载翻译所需的时间会延迟应用程序引导程序，或者您的捆绑包有点大（如果您捆绑翻译）
我们必须将序列化程序添加到您的应用程序包中才能读取翻译，这是很多代码（我们可能可以将翻译“预编译”成某种 json 以避免这种情况，我们还没有决定)

从理论上讲，您可以在不重新加载整个应用程序的情况下更改语言，但是您必须重新创建现有组件，因为模板是在创建组件时生成的，或者您可以在模板中绑定服务（而不是使用i18n属性），它会在您更改语言时更新。可以编写一个类似于 ngx-translate 但在内部使用 Angular i18n 并允许您在运行时更改语言的库。它将使用更多内存来保持模板与语言同步，就像 ngx-translate 的情况一样。我可能会写一个这样的库。

ocombe 于 2018-05-10

❤2

人们还需要考虑的是，从一种语言到另一种语言的某些变化可能很小，而另一种可能很大，比如从英语到西班牙语可能是“小”，但从英语到中文或阿拉伯语会很大。
为了澄清某些语言不仅仅是文本，您可能还需要设计不同的布局以适应该语言及其对齐规则，从左到右或从右到左以及其他细节。

所以对于大多数现实世界的使用，我希望应用程序在应用程序加载一个语言检测步骤，这将导致加载正确的资源和一些布局。

figuerres 于 2018-05-10

👍1

@ocombe非常感谢您的澄清！我已经在我们的应用程序中实现了当前的 Angular i18n并且由于更改/未知要求而遇到了障碍。我还结合使用https://github.com/ngx-translate/i18n-polyfill库来帮助弥合当前的差距。

虽然多个捆绑包有点烦人，但您目前可以很容易地解决它。特别是障碍是有可能以与当前使用的语言不同的语言显示一个组件（及其所有子组件）。

坦率地说，我还不确定ngx-translate是否可以帮助我完成此任务，但我想向您发送有关即将发生的更改的消息，以确保在进行任何支点之前我有尽可能多的信息。

mjschranz 于 2018-05-10

我们没有任何计划支持同时翻译成多种语言的应用程序，如果我们可以加载翻译/模块，将来可能会有，但这将是架构的副作用，而不是我们专门的东西试图达到。

ocombe 于 2018-05-10

Ivy + runtime i18n 是否有 ETA？
如果不是这种情况，我完全理解，但我需要知道（鉴于我当前项目的时间范围）我是否可以等待它或需要开始使用当前解决方案之一并将迁移到运行时 i18n 以用于未来版本.

TomDemulierChevret 于 2018-05-11

我不会尝试给出确切的时间框架，每次我尝试都是错误的：D
现在不会在 v7 之前发布（之前将作为测试版提供）

ocombe 于 2018-05-11

没问题，我们都知道估计总是错误的。 :D
您认为从当前的 i18n (+ i18n-polyfill) 迁移到运行时 18n 还是从 ngx-translate 迁移会更容易？

TomDemulierChevret 于 2018-05-11

可能来自当前的 i18n，但如果可能的话，我会编写一个使用 Angular i18n 内部的 ngx-translate 版本（还不确定）

ocombe 于 2018-05-11

❤10 👍7

嗨，我试图遍历这个线程来了解当前状态。对于具有动态本地化的单个应用程序，ngx 翻译代码目前是最可行的“解决方法”吗？

justageek 于 2018-05-17

嗨，是否可以在运行时使用 ngx-translate/i18n-polyfill 更改本地化？

suchg 于 2018-06-07

@suchg不在运行时。您可以在运行时进行翻译，但不能更改使用的语言环境。

mjschranz 于 2018-06-07

@mjschranz感谢您的快速回复
即使是运行时翻译现在也很好。你能分享任何相同的例子吗？
我尝试了在https://github.com/ngx-translate/i18n-polyfill共享的示例，并且确实更改了 chrome 浏览器的语言，但没有运气。
有什么具体的翻译方法吗？？

suchg 于 2018-06-07

请在此处继续讨论 Angular，而不是外部库。如果您需要任何帮助，请在他们的 github 存储库上发布消息

ocombe 于 2018-06-08

👍7

嘿，关于该功能未来的样子，是否还有其他跟踪问题或设计文档？也许我们可以帮助实施或做好准备，以确保 v7 的过渡尽可能顺利。

Kamshak 于 2018-06-29

嗨，我目前正在运行 Angular 5，我们需要在我们的项目中添加多语言。
我添加了一个现在对我有用的解决方案，它几乎是优雅的。 https://github.com/angular/angular/issues/24549。

理想情况下，我想基于国家嗅探器服务（基于主机名映射查找）延迟加载语言文件。
如果这在 Angular 6 中是可能的，那就太好了。

mattiLeBlanc 于 2018-07-03

@mattiLeBlanc您如何解析动态消息，例如来自组件或服务的消息？

zverbeta 于 2018-07-03

@zverbeta请原谅我没有完全理解 Angular Core 或本次讨论的上下文。对于初学者，我只能从我的上下文中接近它。

在回答您的问题时，我假设我们只对基于可以从 URL 或语言查询参数推导出的语言环境以一种很好的方式延迟加载翻译文件 (xlf) 感兴趣。（我目前使用 URL 映射来确定语言环境）。

来自组件或服务的消息不会像我们用 i18n 标记标记那样标记。我对 Wordpress 和 PHP 的 i18n 有一些经验。在那里，我们使用__( 'text' to translate, 'text domain' )方法来获得正确的翻译。这个__()也可以由创建消息文件的 CLI 命令扫描。

这是您指的问题之一吗？

mattiLeBlanc 于 2018-07-03

例如，我注意到这个标记块的一件事（因为我很懒，不想在每个子元素上添加 i18n）：

<div class="eligibility-banner" i18n="@@eligbilityBanner" fxLayout="column" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="center center" fxLayoutAlign="center start">
        <div class="requirement-text" fxFlex="20">To be eligible, you:</div>

        <div fxLayout="column" fxFlex="80" fxLayout.gt-xs="row" fxLayoutAlign="center start">
          <div fxLayout="row" fxLayoutAlign="center center" class="requirement" fxFlex="33">
              <pro-svg icon="icon-check-circle" className="icon-check" width="44" height="44"></pro-svg>
              <div class="text">own an Australian business (with a valid ABN/ACN)</div>
          </div>
          <div fxLayout="row" fxLayoutAlign="center center" class="requirement" fxFlex="33">
              <pro-svg icon="icon-check-circle" className="icon-check" width="44" height="44"></pro-svg>
              <div class="text">are over 18 years old</div>
          </div>
          <div fxLayout="row" fxLayoutAlign="center center" class="requirement" fxFlex="33">
              <pro-svg icon="icon-check-circle" className="icon-check" width="44" height="44"></pro-svg>
              <div class="text">are an Australian Citizen or Permanent Resident</div>
          </div>
        </div>
      </div>

也就是将整个 div 块复制到我的 message.xlf 中。
这是很多标记污染。（当然我可以在每个包含文本的标签上使用 i18n。）

对于这个例子，我认为使用_e()命令会很好地工作。您将使用 echo 命令包装您的文本，所有这些包装的文本都将被收集。您可以摆脱 xml 中的所有标记副本。
如果您需要向该字符串添加一些动态的内容，您可以使用字符串中的占位符对其进行管道传输（就像您对sprintf所做的那样。像

<p>{{ __( 'I would like a nice %s, please', fruit ) }}</p>

其中fruit是一个值为__( 'apple')或__( 'pear)的变量。
这 3 段文本最终会出现在 XML 中，并且可以单独翻译。

那会有用吗？这与添加 i18n 属性非常相似，我再次阅读后意识到:)

mattiLeBlanc 于 2018-07-03

最后，看看几种格式。 XLIFF 2看起来很漂亮，比 1.2 干净一点。 XMB 看起来令人困惑，可怕的文档看起来像是 1995 年的样式。
在使用 XLIFF 2 时，我确实注意到 TARGET 文本没有像在 1.2 版中那样呈现。

你们看过 .pot 和 .mo 文件吗？非常简单的格式，也被 POEdit 工具翻译使用。

mattiLeBlanc 于 2018-07-03

我需要使用切换按钮将我的应用程序转换为英语和西班牙语。做了所有的改变，工作文件分开。我在 .dist/en 和 dist/es 下创建了两个构建。谁能告诉我，我需要为部署做什么以及如何在两个构建之间切换？

单击切换按钮我需要做什么

shobhit12345 于 2018-07-05

@shobhit12345请在https://stackoverflow.com上发布您的帮助请求

Toub 于 2018-07-05

@zverbeta当我使用--prod构建时，我在 #24549 发布的解决方案不起作用。很明显，因为我使用的require可能不可用？
如果没有 --prod 标志，解决方案是否可以工作，因为它包含与 webpack 相关的代码？

mattiLeBlanc 于 2018-07-06

@mattiLeBlanc我找到了这个库https://github.com/ngx-translate/i18n-polyfill它解决了我的动态文本问题

zverbeta 于 2018-07-06

👍3

嗨，我们如何使用 i 18 n 转换动态值（插值）。

    <source>This amount is for <x id="INTERPOLATION" equiv-text="{{policyName}}"/> policy #<x id="INTERPOLATION_1" equiv-text="{{policyGroupId}}"/></source>
    <target>Esta cantidad es para <x id="INTERPOLATION" equiv-text="{{**policyName**}}"/> política #<x id="INTERPOLATION_1" equiv-text="{{policyGroupId}}"/></target>

shobhit12345 于 2018-07-23

👎2

嘿！有什么地方可以让我们跟踪和/或帮助完成已完成的任务？（那些正在处理它的标签）

Gahen 于 2018-08-16

发布运行时 i18n 测试版的时间框架是否有任何更新？

marcelnem 于 2018-08-23

@marcelnem我找不到评论，但 iirc ocombe 提到运行时 i18n 已为 ivy 合并，因此您可以使用 ivy 标志在 v7 beta 上对其进行测试

Kamshak 于 2018-08-24

运行时部分已完成，但编译器部分尚未完成，这意味着您还不能使用 ivy 对其进行测试

ocombe 于 2018-08-24

嗨，我正在使用 Angular 6 i18n。我正在使用多语言，这意味着我遵循了食谱：
https://v2.angular.io/docs/ts/latest/cookbook/i18n.html#！

我当前的实现是使用AOT，所以我生成了一个messages.xlf 文件和一个messages.pt.xlf。当我跑步时，一切正常

ng服务--配置=pt

我得到了按预期翻译的文本。但我觉得它的工作方式有很大的问题。我可能错过了一些东西。据我了解，每次我添加一个要翻译的新字符串并用 i18n 属性标记它时，我需要重新生成运行“ng xi18n”的messages.xlf 文件，然后手动更新messages.pt.xlf。 xlf 文件还包含源所在的行号，所以看起来如果我更改了行，我还需要重新生成文件并手动更新我的 pt 文件。

<context context-type="linenumber">16</context>

这看起来不聪明，它会给我很多额外的工作来保持它的工作。你明白我的担心吗？我错过了什么吗？
我知道 Angular 7 i18n 将有一个重大更新，其中包含 Ivy，我应该等待吗？

最好的祝福，
法比奥

ps 我真的希望这不是题外话，但如果你觉得是，请至少给我一个方向。例如，我应该在哪里问这个？或者，如果有一个链接可以回答我的疑问。

fabiopcarvalho 于 2018-08-30

👍1

@fabiopcarvalho我意识到的一件事是，为每个翻译使用自定义 ID 是明智的，这样可以更轻松地跟踪 HTML 布局中的更改。

但是，是的，您需要定期更新翻译文件。

mjschranz 于 2018-08-30

@fabiopcarvalho我使用xliffmerge来帮助我合并翻译

PedroJesusRomeroOrtega 于 2018-08-30

👍1

完美，我使用了那个工具，效果很好。我也在使用 ids 和
他们确实有帮助。
谢谢回复！！

2018 年 8 月 30 日星期四，Pedro Romero通知@github.com 写道：

@fabiopcarvalho https://github.com/fabiopcarvalho我使用 xliffmerge
https://github.com/martinroob/ngx-i18nsupport帮助我进行合并
的翻译
—
你收到这个是因为你被提到了。
直接回复此邮件，在 GitHub 上查看
https://github.com/angular/angular/issues/16477#issuecomment-417407822 ，
或使线程静音
https://github.com/notifications/unsubscribe-auth/AWOWQ6vpjOb0Ntgpv7TUngRrBBsUIkVjks5uWCV7gaJpZM4NOSBk
.

fabiopcarvalho 于 2018-08-31

在属性中允许 ICU 消息对于可访问性至关重要，因为属性 aria-label 在可访问性中被大量使用。后续有问题吗？

kylelix7 于 2018-09-06

我认为这没有问题，你能打开一个吗？我现在正在为 ivy 处理 ICU 表达式，所以我添加了一个 TODO，但功能请求会更好

ocombe 于 2018-09-06

@ocombe ， https://github.com/angular/angular/issues/21615

LastDragon-ru 于 2018-09-06

非常感谢（Github 搜索真的很糟糕！）！

ocombe 于 2018-09-06

👍2 😄1

我们能否通过新版本的 i18n 延迟加载来自外部源的翻译文件，例如通过 HTTP？

Sef1995 于 2018-09-20

@ocombe正如您所说，您正在使用 Runtime i18n（一个包含 AOT 的所有语言环境的捆绑包）。我们等了一年多了。我们什么时候可以预期该功能会在 Angular 7 版本中出现？

AhmadShahid 于 2018-09-24

👍2

@Sef1995这是我们想要启用的东西之一
@AhmadShahid它需要常春藤，它将独立于 v7 发布，并且常春藤不会为 v7 的发布做好准备。 ivy 的某些部分已经在 v6 中，但它的功能并不完整，您不应该在现实世界的应用程序中使用它。我们还没有 ivy 的发布日期。

ocombe 于 2018-09-25

😕7 👍5

@ocombe一个简单的问题，如果我们从今天开始实现 i18n（angular6），这将需要不同的构建（每种语言一个），当 ivy 退出和 i18n 运行时是否会失去努力？我的意思是现在实施 i18n 的方式将与即将发生的不同？尝试提前计划一些冲刺并优先考虑工作。谢谢

aaniceto 于 2018-09-25

👍3

如果我们可以避免它，我们不想创建破坏性更改。随着我们修复长期存在的错误，提取的翻译的 ID 可能会发生变化，但我们将提供迁移工具。我不能肯定地说它会 100% 兼容，但希望大多数东西都能正常工作，如果你愿意，可以使用新的选项。

ocombe 于 2018-09-25

👍1

@ocombe一个简单的问题，如果我们从今天开始实现 i18n（angular6），这将需要不同的构建（每种语言一个），当 ivy 退出和 i18n 运行时是否会失去努力？我的意思是现在实施 i18n 的方式将与即将发生的不同？尝试提前计划一些冲刺并优先考虑工作。谢谢

嗨，您可以使用 webpack 要求通过一个构建动态加载文件（作为临时解决方法）：
示例可以在这里找到： https ://github.com/angular/angular/issues/24549#issuecomment -402013622

您必须使用 --prod --aot=false 进行构建，因为 AOT=true 将删除 webpack 的内容。

mattiLeBlanc 于 2018-09-27

@ocombe嗨，

A7 候选版本已经发布，我们是否应该测试运行时翻译？ Runtime i18n (one bundle for all locales with AOT) 。我该如何测试这个。请帮忙

谢谢

sheikalthaf 于 2018-10-07

👍9

我支持@sheikalthaf的问题，尽管 v7 已经发布。

Shuyinsama 于 2018-10-23

@sheikalthaf @Shuyinsama正如上面和第一条消息中的一些评论所解释的：
运行时 i18n 需要 ivy，它将独立于 v7 发布。 ivy 的某些部分已经在 v7 中，但它的功能并不完整，您不应该在现实世界的应用程序中使用它。我们还没有 ivy 的发布日期。

ocombe 于 2018-10-23

😕5 👍3

@ocombe ：如何将动态 i18n 密钥从父组件传递到子组件。

子组件：
<div i18n="{{labelTextKey}}">{{labelText}}</div>

父组件：
<app-input [labelText]="'Second name'" [labelTextKey]="'@<strong i="13">@LabelSecondName</strong>'" ..></app-input>

我可以通过它，但是由于 i18n 转换发生在构建时，因此处于该状态的变量仍然为空。因此，不会发生翻译。

这种情况有什么更新吗？

bobKasbi 于 2018-10-24

@bobKasbi

您不需要子组件中的 i18n 标签，您可以像这样在父组件中使用它：

<app-input i18n-labelText="@@LabelSecondName" labelText="Second name"></app-input>

cjsase 于 2018-10-24

👍2

@cjsase ：工作得很好。非常感谢！挣扎了将近2天。

bobKasbi 于 2018-10-24

基于此： https ://github.com/angular/angular/issues/21706#issuecomment -430435254

我们不应该期望 ivy 出现在 v7 中。 v8 计划于2019 年 3 月/4 月发布。如果我们不应该期望 ivy 出现在 v7 中，那么在 ivy 于 2019 年 4 月发布之前，是否有关于使用什么进行国际化 (i18n) 的建议/共识？

marcelnem 于 2018-10-24

👎2 👍1

这是不正确的信息。核心团队从未说过 IVy 会在 2019 年发布。相反，核心团队说（强调我的）：

只要经过测试和验证，它就应该以任何次要版本发布

PowerKiKi 于 2018-10-25

👍2 😄1

假设我有一个启用了常春藤的 Angular 7.1.0-beta.0 应用程序，我是否可以在没有页面刷新的情况下从前面发出动态语言更改的设置？

如果是的话怎么办？这个文档： https ://github.com/angular/angular/blob/master/aio/content/guide/i18n.md
这个文档： https ://angular.io/guide/i18n

没有这个功能？

我在哪里可以学习如何制作现代/未来的 i18n-angular 应用程序？

tatsujb 于 2018-10-31

@tatsujb不，这是不可能的，即使使用 ivy & runtime i18n 也不可能。如果你想改变语言，你必须重新加载你的 Angular 应用程序，现在

ocombe 于 2018-10-31

👍2

好的，但文档有点适用于嵌合版本的角度，如 4 减。

我认为它们不适用于我的设置，也没有涵盖您如何使更改生效。

我认为更改必须由后端强制执行。

在我的情况下，我的 angular 由 java-spring 后端在生产模式下提供服务。当我按下标志图标来更改语言时，会发生什么？

tatsujb 于 2018-10-31

你把用户带到www.yourdomain.com/cn/那里有你的整个 Angular 应用程序用中文编译。您最终会为您想要支持的每种语言提供一个完整的编译 Angular 应用程序。

santhony7 于 2018-10-31

👍1

@ocombe @santhony7这个呢： https ://github.com/actra-development-oss/ng-i18n-aot-loader ？

我可以试试这个吗？

它是与 7.1.0-beta.0 严重兼容还是完全兼容？

tatsujb 于 2018-10-31

@ocombe @santhony7这个呢： https ://github.com/actra-development-oss/ng-i18n-aot-loader ？
我可以试试这个吗？
它是与 7.1.0-beta.0 严重兼容还是完全兼容？

我建议改用 ngx-translate。我都使用过，而且 ngx-translate 更容易维护。

digismack 于 2018-10-31

👍1

@digismack两者之间的另一个区别，有点可怕的是 ngx-translate 丢弃了所有官方的 angular-i18n 东西，根本不使用任何东西。它是完全独立的电路，json 文件对翻译来源的具体说明要少得多。

在两个演示中，ngx-translate 似乎要慢得多，当您说它更容易维护时，您是什么意思？

tatsujb 于 2018-11-05

@tatsujb作为 ng-i18n-aot-loader 的开发者，我知道实现起来相当困难，至少要集成加载器。
其他一切都是小菜一碟，因为它遵循原始的 angular i18n 范例。

只要标签结构等没有重大变化，它就应该适用于 v7。

actra-gschuster 于 2018-11-05

尝试实现 ngx-translate 我不得不逐个翻译可翻译的地方。有数百个这对我来说有点荒谬，因为我不能使用我已经提前计划好的 i18n 标签。

我开始认为相信你是错误的选择， @digismack

tatsujb 于 2018-11-05

@tatsujb有 58 人关注此问题。就个人而言，我正在关注 Angular 团队关于 i18n 的更新。如果您停止喋喋不休，我将不胜感激，除非它与 OP 声明的内容有关：

如果您希望将新的 i18n 功能添加到 Angular，请随时在下面提问，我会告诉您这是否可行以及您是否应该为此打开问题。
如果您有错误，请打开一个问题（无需在此处讨论）。

如果您对其他库有疑问，我建议您在 StackOverflow 上提问。

gtbuchanan 于 2018-11-05

👍19 ❤11

我不习惯写/评论问题……但我会的！
考虑：
@gtbuchanan和 CO 是A 型人。
@tatsujb和其他抱怨/评论/期待事情的人是B 型人

A型你不厌倦总是重复同样的事情？！？！对我来说，你比B型更烦人。

由于 i18n 在 angular Type B 中缺少功能，人们比仅仅“订阅”一个问题的人更沮丧（如果是为了让你成为朋友，请在 Facebook 上获得一些喜欢，我不知道，这里不是那个地方，你不会改变字眼或发明一些这样说的东西！...）

我认为 A 类可以取消订阅、等待更新、快速查看更新日志或阅读博客/新闻，请确保 Angular 团队将其放入大字体 ARIAL 72pixel 他们从 ts+runtime i18n 引入 i18n 动态翻译：angular 中缺少大功能！他们没有考虑太多，所以我们今天没有正确的 i18n，这是谷歌左右的策略，这是无法改变的！

人们 B 在 2 年前等待此功能， https: //github.com/angular/angular/issues/9104#issue -159302131 是的，因为 angular 2.X ！

我只想说请尊重沮丧的B型，不要作恶。如果没有人对 i18n 抱怨太多，我认为 i18n 的改进在未来几年都不会被考虑，这也是开源的一部分！抱怨批评！策略可以改变！所以让人们抱怨，取消订阅，你比其他人最好你可以在不订阅这个问题的情况下找到你的信息！

B型请继续投诉/评论，直到可以！这是了解人们需求的唯一最佳方式！

罢工罢工哈哈

usrnm01 于 2018-11-05

👎14 👍4

@tatsujb这一切都归结为个人喜好。当我上次实现ng-i18n-aot-loader时，我必须运行一个弹出的构建并自定义 webpack 配置以使其正常工作。也许情况不再如此。然而，运行一个弹出的构建意味着 Angular CLI 工具不再可用。所以，从长远来看，我发现实现ngx-translate并处理它的工作方式略有不同的事实更容易。

@gtbuchanan我感到您的痛苦，但是这种“喋喋不休”与OP帖子中提到的功能范围直接相关。由于Runtime i18n (one bundle for all locales with AOT)的时间框架继续下滑，人们仍然来这个线程寻找当前的解决方案。

digismack 于 2018-11-05

👍3

@ocombe ，我们现在要开始一个新项目，我们将从数据库中获取翻译。
我们的 Angular 模块将被延迟加载，我们也希望尽可能接近 Angular 提供的关于 I18N 的内容。

由于 Angular I18N 支持没有按计划进入最新版本 - 您对我们和其他刚刚创建新项目的人有什么建议吗？

例如，在 I18N 准备好之前，我们可以使用 ngx-translate，但后来我在该项目的 github 问题中的某个地方读到它不支持延迟加载，这对我们来说是一个阻碍。

另一方面，Angular 的 I18N 支持还没有准备好迎接黄金时段。

我真的很想得到一些提示，指出我们在即将到来的项目中使用什么的正确方向 - ngx-translate vs ?

必备品：

延迟加载

很高兴有：

ICU 表达

谢谢

guygit 于 2018-11-07

👍1

对于本期的关注者， @ocombe将在几个小时后在 angularconnect 上讨论运行时 i18n 。我认为至少有一些悬而未决的问题会在那里得到解答。有可用的直播

ctaepper 于 2018-11-07

👍11 🎉4

@ctaepper - 非常感谢您提供的信息！

guygit 于 2018-11-07

@guygit这可能是ngx-translate或angular-l10n 。这是我创建的比较表https://medium.com/@sergeyfetiskin/tools -to-translate-your-angular-app-c021e25ff26a

对于我们的应用程序，我们决定采用 Angular 方式，即使它有一些限制。

fetis 于 2018-11-07

👍4 😄1

@fetis非常感谢 - 我会看看 :-)

guygit 于 2018-11-07

想知道为翻译文件选择 XLIFF 文件 - Google Translate Toolkit 以及 Flutter/Dart i18n 都支持 ARB 文件但不支持 XLIFF。我听说没有计划支持 ARB 文件，但想知道这是否可以再次考虑。或者，如果有人（ @ocombe ？）可以指出 Angular 与 XLIFF 文件交互的位置，那么我可以看看集成 ARB 支持有多难。

（在某些情况下，我们将为我们的移动应用程序使用 Flutter/Dart，为我们的 Web 应用程序使用 Angular，如果可能的话，我们真的很想在移动设备和 Web 之间共享我们的翻译文件。我正在考虑编写一个如果不想考虑将其包含在 Angular 中，ARB -> XLIFF 转换器。）

localpcguy 于 2018-11-09

@localpcguy如果您最终编写了转换器之类的东西，您可能有兴趣将其贡献给https://github.com/translate/translate ，它已经提供从/到许多格式的转换。

另一方面， ocombe 几个月前表示，他将努力支持 PO 文件（和 JSON？）。希望它会在某个时候发生，因为我们很难找到与 XLIFF 一起使用的 ockay-ish 工具。

PowerKiKi 于 2018-11-10

👍1

因为我们很难找到与 XLIFF 一起使用的 ockay-ish 工具。

@PowerKiKi这根本不是真的。几乎所有在线翻译管理工具都支持 XLIFF 格式。如果您不想手动编辑 .xliff，甚至还有免费的桌面翻译程序

fetis 于 2018-11-10

@fetis我讨厌跑题，但在将 XLIFF 与工具一起使用时发现了很多痛苦。在这里查看我的评论： https ://github.com/angular/angular/issues/20193#issuecomment -345755889

请提供对此类工具的参考，因为我们还没有找到任何好的东西，也还没有找到支持 XLIFF 2 的东西。Smart Cat 看起来很漂亮，但是更新其中的字符串让我想看看我的眼睛。

看来你知道我们不知道的事情:)

Pootle 使用https://github.com/translate/translate并且非常适合 Gettext（po 文件），但它不支持占位符/标签，他们正在等待某人的贡献来添加它

intellix 于 2018-11-10

👍2

我订阅这个问题已经有一年左右的时间了。看来这方面的进展并不是 Angular 团队的首要任务，并且必须为每种语言编译一次应用程序并通过循环进行动态翻译是不可接受的。如果您能够这样做，我建议您创建一个自定义管道，该管道使用您喜欢的任何其他 i18n 库。作为纯粹的，这个管道对于多次编译应用程序同样有效。此外，通过使用不依赖于 Angular 的 i18n，您将能够轻松地从代码中进行动态翻译。另一个优点是您的翻译将不再依赖于 Angular，因此您可以根据需要开始将一些组件迁移到其他框架，或者您甚至可以完全自由地选择您喜欢的翻译格式和工具。我正在使用https://airbnb.io/polyglot.js/并且对它非常满意，即使我的应用程序从 Angular i18n 迁移到 polyglot 仍在继续，我对结果和删除感到非常满意Angular i18n 的依赖关系。

很抱歉那些将在您的邮件中收到此通知并且不关心我的意见的人，但是由于阅读您的通知已经很长时间了，我觉得我必须在退订之前说再见:)

干杯!

adrm 于 2018-11-10

👍2

看来这方面的进展并不是 Angular 团队的首要任务，并且必须为每种语言编译一次应用程序并通过循环进行动态翻译是不可接受的。

运行时 i18n 是 Angular 团队的重中之重。但是，阻塞问题是新的 Ivy 渲染器。到目前为止，项目进展良好，我们可以期待 Ivy 用于 Angular 8。我知道这对所有相关人员来说都是一个困难的情况。有计划，但只要 Ivy 没有完成，就无法实施。

请参阅最近在伦敦举行的 AngularConnect 会议（2018 年）的演讲，特别是 Olivier Combe 的“Runtime i18n”和 Alex Rickabaugh 的第 2 天主题演讲。

fmalcher 于 2018-11-10

👍5

确实，我的经历与@intellix 相似。

XLIFF 1.2 已有10 年历史，但在开源项目中对它的支持似乎很差。根据https://github.com/translate/pootle/issues/4762和https://github.com/translate/pootle/issues/1811，Pootle 不支持占位符。 Weblate也不支持它们，尽管PR 可能会很快添加支持。

在桌面上，Virtaal_does_ 支持 XLIFF 占位符，但最新版本 0.7.1已有6 年历史，据我所知，它不再适用于最新的 macOS。不幸的是，它并没有给人留下项目维护良好的印象，尽管它们看起来很简单，但仍有一些非常古老的 PR仍在等待合并。在过去的几年中，提交活动非常少。

我刚刚发现几天前发布的 Poedit 2.2支持 XLIFF 1.2 和 2.0。不幸的是，我无法测试它，因为我在安装时从 snapcraft.io CDN 收到错误。但这可能是桌面用户的最佳解决方案。

@fetis如果您发现一些开源（或至少可以免费使用）项目来编辑 XLIFF 1.2 或更好的 XLIFF 2.0，并支持占位符，请在此处列出它们。我测试的所有其他东西要么根本不起作用，要么使用起来非常复杂。

PowerKiKi 于 2018-11-11

👍1

@intellix @PowerKiKi这是我所知道的列表。我们的目标是一个在线翻译平台，在这里我们可以与来自不同国家的翻译/同事合作。为每个合作者安装桌面软件并管理 XLIFF 文件同步不是我们的选择。所以，我没有测试我做过的桌面工具和平台。

应用
欧米茄
https://omegat.org/

自托管
https://weblate.org/en/ +付费主机
https://pootle.translatehouse.org/
https://pontoon.mozilla.org/

平台
人群
https://crowdin.com/
CLI 支持

网络翻译它
https://webtranslateit.com/
CLI 支持

Transifex
https://www.transifex.com/

短语应用程序
https://phraseapp.com/

本地化
https://lokalise.co/
CLI 支持

_我认为我们将在我们的项目中使用 Lokalise，因为它以实惠的价格提供了足够的功能。_

~PO编辑器~
https://poeditor.com/pricing/
声明的 XLIFF 支持不适用于 Angular 格式

如果您正在寻找开源解决方案，此列表可能对我有用https://opensource.com/article/17/6/open-source-localization-tools

侧节点
我没有看到支持 XLIFF 2.0 的在线平台，这对我来说是一个很大的惊喜。 XLIFF 1.2 被正式标记为已弃用，业内没有人支持 v2。

很高兴听到 POEdit 宣布支持 XLIFF，我将它用于 .po 文件，这很好。

PS 我很抱歉在这里跑题了，但同时从你的应用程序中获取 XLIFF 文件只是旅程的一部分，你需要在你的应用程序生命周期中翻译和维护它。所以讨论很重要。我建议搬到某个地方，我可以把这个列表作为一篇 Medium 文章，我们可以在那里继续讨论。

fetis 于 2018-11-11

👍4 🎉2

@localpcguy有很多格式，但这一切都取决于我们可以支持多少。编写和维护序列化程序需要时间。 Xliff 2 是其他人作为 PR 添加的，这就是我们添加支持的原因（否则我们不会花时间支持它）。
我们需要一个序列化器来处理两件事：提取和合并。
我没有在 Angular Connect 上讨论过这个，但我希望我们应该能够使用外部序列化程序。使用 ivy 进行运行时（合并）应该很容易做到这一点，但是提取仍然很复杂，因为当我们对编译器进行更改时需要更新序列化程序。
我有一些关于如何做到这一点的想法，但是一旦常春藤登陆，我将不得不与团队讨论它。我真正想做的是至少添加 JSON 支持，以便我可以使用 Angular i18n 重写 ngx-translate（因为很多人都想要它）。

ocombe 于 2018-11-12

👍13 ❤1

感谢@ocombe （以及所有其他输入，我喜欢看到各种视图）。看起来#14185 是您提到的 PR，如果我想考虑添加 ARB 支持，这仍然是一个好的起点吗？如果提交，那是否有可能被合并？

localpcguy 于 2018-11-12

@localpcguy我们明天开会讨论这个（和其他事情），我会让你知道进展如何

ocombe 于 2018-11-12

👍4

好的，这就是我们认为可行的方法：对于提取，我们将以某种 json 格式（甚至可能是 ARB，因为它是用于翻译的官方 json 格式）提取字符串，任何人都可以采用并后处理为您想要使用的任何格式（json 真的很容易使用），对于运行时，我们将提供某种接口，您可以使用它来编写自己的加载器来理解您的格式。

ocombe 于 2018-11-14

👍4 🎉1

所以这几乎意味着，只要我们可以为应用程序提供加载器，我们就可以自由地使用任何格式的翻译？

好吧，这太棒了：+1：

Karamuto 于 2018-11-14

👍1

是的，您将无法访问深度优化（在构建时替换字符串以为每种语言创建一个包，这意味着翻译将与您的组件拆分代码），但您可以使用任何类型的延迟加载解决方案，只要您在应用启动时加载所有翻译（它们需要在创建组件之前同步加载）
您最终还可以手动拆分它们并在加载新组件时使用路由器异步加载它们，这取决于您，使用 ivy 提供的新延迟加载功能（Jason 在 Angular Connect 上做了一个演示）

ocombe 于 2018-11-14

👍2 🎉1

我们可以期待在 Ivy 上即时切换语言的 beta 演示（不仅仅是视频或直播文件）吗？尝试将 POC 预决赛常春藤放在一起可能是检测线下弹幕的好方法。

并不是说我不同意在将开发人员的汗水投入到 live-i18n 之前等待更固定的常春藤的方法，我认为一个人的小规模 POC 是少量的汗水，以形式获得巨大回报有远见，并有可能避免将 live-i18n 推到 2020 年。

tatsujb 于 2018-11-14

外部用户的运行时服务还没有完成，我们只有使用闭包（ goog.getMsg ）的代码，因为这是我们用谷歌应用程序测试 ivy 所需要的。
在接下来的几个月里，我现在将致力于此。这意味着您可能还不能将 i18n 与 ivy 一起使用。
运行时 i18n 的代码刚刚合并，i18n 的编译器代码应该在接下来的几天内合并（我们快到了！）。然后我们将为外部人员开发新服务，包括我刚才谈到的新加载程序，以及在您的代码中使用翻译的服务。

至于即时切换语言，它仍然需要完全重新加载应用程序，或者可能更改路线（这将清除所有现有组件）。我还不会尝试在 POC 上工作。

ocombe 于 2018-11-14

👍4

至于即时切换语言，它仍然需要完全重新加载应用程序，或者可能更改路线（这将清除所有现有组件）。我还不会尝试在 POC 上工作。

这是公平的，...但是不需要完全重新加载应用程序（或任何在最终用户眼中实现无缝的东西，AKA 不会丢失商店，也不会验证，也不会 url（嗯...不考虑/en/... ) 并且都在合理的延迟内) ....仍然是计划，对吧？

tatsujb 于 2018-11-14

@tatsujb重新加载应用程序并不是重新加载页面，StackBlitz 在每次编辑时都会重新加载应用程序，你觉得你的眼睛可以观察到吗？

重新加载应用程序意味着卸载应用程序，然后将应用程序安装在同一位置，相当于 SSR-CSR 转换（它是 CSR-CSR），如果考虑到适当的缓存架构，则后续引导过程中不应有异步任务。

trotyl 于 2018-11-14

👍1

所以有了这个正确的设置；存储变量值和身份验证（以及可滚动 div 上的滚动量）会保留吗？

tatsujb 于 2018-11-14

@tatsujb只要它们存储在 Angular 创建的实例之外，例如在词法变量或窗口属性中。

trotyl 于 2018-11-14

@trotyl如何在没有页面的情况下重新加载应用程序？

saithis 于 2018-11-14

👎2

@saithis您总是通过platformBootstrap().bootstrapModuleFactory() （或其他等价物）命令式地引导应用程序，您可以随时随地调用它，调用时没有魔法（除了 Angular CLI 目前对代码替换有一些限制，应该不再是常春藤的问题）。

在脚本调用时急切地引导并永远保留它（不要卸载）只是 SPA 的一种常见做法，但没有人强迫你这样做。

编辑：如果有人这样做，还需要销毁引导的NgModuleRef以防止内存泄漏。这些是题外话，最好在其他频道讨论，最好在此处跟踪 i18n 讨论。

trotyl 于 2018-11-14

👍1

@trotyl谢谢，我不知道引导再次起作用。

saithis 于 2018-11-14

@ocombe你能在这里删除垃圾邮件吗？以及我的评论。

fetis 于 2018-12-03

👍1

致@fetis ：像你这样的人应该取消关注问题并订阅发布
致@Andrulko ：我们不在乎
致@ angular：正如我所说的，我完全理解这里的抱怨！就像我们想要 v7 的 ivy 而不是 vX 或者不出售 v7 的大改进，而您无法响应它，或者您将其放入 7.x 只是为了尊重您的截止日期......这不公平！是的选择应该是不宣布任何事情，没有人会抱怨这也是个坏主意，你需要在框架中占据一席之地。是的，我们从 v2 开始等待正确的 i18n，在大型应用程序的这个强制性方面，您无法为大型应用程序（例如包含 50000 个字符串的国际 webapp）出售 Angular，当然您当然不喜欢阅读这篇文章，但它没有同情心，而且很好信仰，恕我直言，如果我们不考虑 i18n 和所有其他方面的缓慢构建时间/开发时间，我可以说 Angular 很棒。某些方向应该在顶部发生变化，我当然是对决策者说。我们的高度例外（批评）因为来自大谷歌我们不能犯这样的大错误。我看到谷歌开发人员喜欢例外——聪明的人不会出错，对于有经验的开发人员和像谷歌这样的开发团队来说，这种事情不应该发生！当公司选择大型应用程序时，我的全球观点不会 100% 出售 Angular，然后出售/解释私人公司什么是开源的！
@ all 特别是对于那些不在商业公司工作的人：不喜欢我的评论，因为我当然不尊重开源？！？！，大声笑去对我的老板说这个等待..等待......在选择 Angular 之后，因为我们相信它已经为大型应用程序做好了准备（100% 不是 80%）......我们依赖！

这是我在这里的最后一条评论，因为我们离开了船！取消订阅 + 在我的下一个项目中不要选择 Angular（你可以说你是赢家，开源项目不需要像我们这样的人）

usrnm01 于 2018-12-03

👎13 👍7

如此热情！只是为了平衡……我们用 Angular 6 重写了我们的应用程序，用 6 种语言进行了国际化，并且只感到了轻微的不便。当然，更快的构建时间和即时翻译肯定会很好，但对我们来说并不是世界末日。 98% 不是 i18n 的框架很棒。干得好伙计们！期待新功能。

santhony7 于 2018-12-04

👍10

对于我们的新企业门户，我们在 Angular 方面也有很棒的体验。 i18n 是我们需要的最后一个缺失功能，因为在瑞士，我们必须支持四种语言。我认为这里的问题在于沟通。对于项目规划，如果我们对一年前的 i18 发布有更好的估计，我们本可以对其进行规划并考虑其他可能性。也就是说，我们期待听到任何更新。 :-)

marcelnem 于 2018-12-05

👍6

为了保护角度，您可以像这样在生产中简单地使用它（我找到的最佳解决方案）

将翻译后的变量文本包装在自己的组件中以将翻译逻辑移动到某处

parent-component.component.html

<app-route-translation
  [routeData]="routeData"
></app-route-translation>

route-translation.component.html

<span
  i18n="route text|Navigation text for route@@routeText"
>{
  routeData.langKey, select,

  home-1 {Home 1}
  home-1-1 {Home 1-1}
  home-1-2 {Home 1-2}
  home-2 {Home 2}
  home-2-1 {Home 2-1}
  home-2-2 {Home 2-2}
  home-root {Home root}
  lazyPage {Lazy page}
  notFound {404}

  other {Other}
}</span>

在 angular.json 中配置构建配置文件夹，例如

"prod-en": {
  ...
   "outputPath": "dist/en/",
  ...
},
"prod-ru": {
  ...
   "outputPath": "dist/ru/",
  ...
}

像这样配置 docker build 文件以编译不同语言的应用程序

FROM node:8 as build-stage
WORKDIR /app
COPY angular-util .
RUN npm install
RUN npm run ng build -- --configuration=prod-en
RUN npm run ng build -- --configuration=prod-ru

FROM nginx
WORKDIR /usr/share/nginx/html
COPY --from=build-stage /app/dist .
COPY nginx.conf /etc/nginx/conf.d/default.conf

使用此 nginx.conf 在子域（如 en.site-name.com、ru.site-name.com）上提供应用程序，其中ru中的set $subdomain ru;应替换为您的默认语言环境

server {
  listen 80;
  set $subdomain ru;
  if ($host ~ ^(\w+)\.) {
    set $subdomain $1;
  }
  location / {
    root /usr/share/nginx/html/$subdomain;
    try_files $uri $uri/ /index.html =404;
  }
}

我想为这条评论竖起大拇指。它可能并不完美，但它仍然是我在网上找到的关于这个主题的最有用的帖子

ivanivanyuk1993 于 2018-12-05

👎5 👍3 😕2

大家好，

我正在为我的项目使用 i18n 翻译。我对以下领域有疑问：

是否可以为不同的库生成不同的 xlf 源文件（使用 ng generate library libraryName 命令创建）？
在对 select 或复数使用国际化时，生成的 xlf 源文件会为不同的备选方案创建 trans-unit id。是否也可以通过模板为不同的替代方案提供 id ？（如下图所示）

请你帮我解答一些问题。

learnersLicense 于 2019-01-15

@learnersLicense ：

您应该能够为 cli 处理的每个项目提取一个翻译文件。话虽这么说，翻译现在不适用于库（这意味着使用您的库的人将无法为该库加载您的翻译）。它位于我们将要实现的下一个功能的待办事项列表的顶部（带有代码翻译）

我不认为这是可能的。您可以使用特殊注释命名占位符： <div i18n>Some value: {{ valueA // i18n(ph="PH_A") }}</div>但我认为它不适用于 ICU 表达式， @AndrewKushnir ？
您可以为此提出功能请求，或者向https://github.com/angular/angular/issues/24080添加评论，这似乎是相似的（向 ICU 表达式添加 desc / 含义）

ocombe 于 2019-01-15

使用您的图书馆的人将无法为该图书馆加载您的翻译

解决此问题的一种方法是：
1) 将库提取 i18n 到 xliff 并翻译
2) 使用库包运送 xliff 文件

3) 消费者还提取它自己的 xliff 文件
4) 消费者将 xliff 加载到 xml 解析器中。丢弃任何源自 node_modules 的跨单元
5) 消费者将它的 xliff 与库 xliff 连接起来

ewok-janitor 于 2019-01-15

这意味着使用您的图书馆的人将无法为该图书馆加载您的翻译

也许我误解了这个说法，但我知道当我构建我的xlf文件时，我的公司应用程序的翻译设置包含在其他项目的模板中指定的键。想到的一个是https://github.com/ng-bootstrap/ng-bootstrap

mjschranz 于 2019-01-15

目前这似乎不可能：

<my-button i18n-title="@@SHARED_GO_LABEL" [title]="'Go'" [button-style]="'primary'" (click)="navigateToForm()"></my-button>

在这些更改的范围内，这将得到解决（或者我做错了什么）？

mikejr83 于 2019-01-16

@mikejr83

这是可能的。您只需将title的基本值指定为title="Go"而不是[title]="'Go'"

mjschranz 于 2019-01-16

谢谢@ocombe和@ewok-janitor 的回答和建议。 👍

@ocombe是否有任何暂定日期，何时可以提供图书馆的翻译？

learnersLicense 于 2019-01-16

暂时没有日期。对于 ivy 的第一个版本，我们只是想实现功能对等。我们将在之后（或者实际上我们会在之前开始研究它，但是当 ivy 以 alpha 版本发布时不会完成）之后的新功能（包括代码翻译和库支持）。它会在 ivy 成为默认值之前可用。

ocombe 于 2019-01-16

是否已经修复了 xliff 文件？ https://github.com/angular/angular/issues/17506
只要引用不固定，就根本不可能使用这种格式。

CodeAndWeb 于 2019-01-29

@ocombe 有计划支持路线翻译吗？

2f4f4f 于 2019-02-12

👍4 ❤1

它被要求了几次是的，这不是一个立即的计划，但它在要做的事情清单上

ocombe 于 2019-02-12

👍4 🎉3 ❤1

嗨，有没有关于在 ivy 发布 beta 版时如何使用运行时 i18n 的文档？

marcelnem 于 2019-03-01

👍1

@marcelnem ，如果您检查此 URL，则所有文档点都处于待处理状态。

https://is-angular-ivy-ready.firebaseapp.com/#/status

skormel 于 2019-03-01

@ocombe您现在在 Google 所做的工作很棒。 Angular i18n 从一开始就应该是 ngx-translate 之类的“东西”。我想知道一旦 Angular 8/9 发布，是否会有迁移指南、自动化工具、功能比较……从 ngx-translate 迁移到 Angular i18n 风格？

timothyBrake 于 2019-03-26

👍6

嗨奥科姆
需要与您核实有关此功能的信息，即您在上面所说的功能
运行时 i18n（所有带 AOT 的语言环境的一个捆绑包）- [正在处理] >> 这仍在进行中，还是已经结束

你能告诉我吗，任何解决方法，如果它仍在进行中
谢谢

nidhi8953 于 2019-05-02

@ocombe您在上面写道，应该通过花边加载来加载语言包。是否也可以直接在 index.html 中加载语言包？因为我们的应用程序在 AWS Lambda 上运行并且编译的 Angular 文件存储在 S3 存储桶中。实际上，这已经是一种解决方法了，但是我们不能使用花边加载，因为 Angular 不能花边加载来自另一个主机的文件。因此，Angular 需要的所有文件都必须已经包含在 index.html 中（我们通过脚本添加 S3 主机）。

vekunz 于 2019-05-02

@nidhi8953它仍然是 WIP，它将与 ivy 一起使用，目前它只能在 google 内部工作（因为我们在内部使用 Closure Compiler 进行翻译）。处理翻译的运行时服务对于外界来说是非常实验性的。如果你想测试一些东西，你可以看看这个例子： https ://github.com/angular/angular/blob/master/packages/core/test/bundling/hello_world_i18n/index.ts 但你应该知道出于某种原因，这些功能仍然是私有的，它们将在不久的将来被重命名和更改。当前的目标是在 v8 发布后（在月底）开始开发一套可靠的 API，并围绕整个 v8 进行迭代，直到 v9 发布，此时 API 应该被认为是稳定的

@vekunz如果我们遵循我们当前的计划，应该是可能的，因为无论如何您都需要在应用程序的引导程序中加载翻译文件

ocombe 于 2019-05-03

👍2 🎉1

@ocombe我们可以使用 Ivy（当前为 8.0.0-rc.3）并使用 Angular 7 的多重构建方法实现 i18n 吗？还是我需要坚持使用 Angular 7，直到 Ivy 的 i18n API 发布？如果可能的话，我真的很想利用 Ivy，同时使用旧的 i18n 方法，直到新的运行时方法可用。

更新：尝试后， ng xi18n提取（参见#https://github.com/angular/angular-cli/issues/14225）和使用 i18n 构建都没有任何效果。没有 .xlf 文件被导出，也没有单词被翻译。但是在 tsconfig.app.json 中将 enableIvy 选项设置为 false，两者都适用于 8.0.0-rc.3 版本。这意味着我可以遵循 Angular 的升级路径，而不会失去 i18n，获得一些新的好处，例如差异加载，并准备好在 i18n 工作后打开 Ivy。

jwrunner 于 2019-05-15

@jacobbowdoin你发现它不适用于常春藤，但如果它没有被激活，它就可以工作。
我想让旧的提取/加载系统与 ivy 一起工作，但由于它只是暂时的，因此团队没有将其确定为优先事项（这是可以理解的，首先使强制性工作成为优先事项）。

ocombe 于 2019-05-16

👍1

嗨@ocombe ，我们现在想开发 i18n，所以我们不能等待 runtime-i18n。你还会推荐使用 ngx-translate 吗？将它与 i18n-polyfill 一起使用是否有意义？使用 i18n-polyfill 会更容易迁移到 runtime-i18n 吗？

marcelnem 于 2019-06-03

如果您使用 ngx-translate，请不要使用 i18n-polyfill。只有在模板中使用 angular i18n 时才有意义。
ngx-translate 仍然相关且易于使用。您不必将所有基础架构都部署到位以支持多个构建（每个语言环境一个）。

ocombe 于 2019-06-03

嗨@ocombe ，是否有任何状态更新：

-运行时 i18n
- 在模板外使用翻译字符串 - #11405

我们目前正在讨论是否应该等待源代码翻译或使用 i18n-polyfill（我们已经开始使用 i18n）。我们可以轻松地等待几周，因此我们将不胜感激。非常感谢！

halilovicedvin 于 2019-06-03

👍1

@halilovicedvin一旦 ivy 成为谷歌应用程序的默认设置，我们将开始为外部用户开发运行时 i18n 服务，因此介于很快和 v9 之间
我要等到夏天之后才会指望它，因为人们要休息几天

ocombe 于 2019-06-03

👍10 ❤1

@halilovicedvin 几周前我们开始使用 i18n 和 i18n-polyfill 并且效果很好。我希望 runtime-i18n 的使用方式和 i18n-polyfill 一样

vekunz 于 2019-06-05

👍1

@vekunz我也希望，如果我们将 ngx-translate与 i18n- polyfill 一起使用，我们将能够更轻松地迁移到 runtime-i18n，但在@ocombe的评论之后（https://github.com/angular/angular/issues /16477#issuecomment-498239301）我不确定设置 polyfill 的额外努力是否合理。也许我们会单独使用 ngx-translate。

@vekunz您设置它的经验是什么？

marcelnem 于 2019-06-06

@marcelnem您不能将 ngx-translate 与 i18n-polyfill 一起使用。 i18n-polyfill 仅用于 angular-i18n。

i18n-polyfill 的设置确实非常简单。即使文档也不是完全正确，我很快就知道要改变什么。

vekunz 于 2019-06-06

👍1

@vekunz我现在明白了，谢谢。我不确定 i18n-polyfill 的用途是什么。您是否仍然需要多次构建应用程序并在http://myapp/en 、 http://myapp/de 、 http://myapp/fr下多次部署它，...与官方 angular i18n 一样？

marcelnem 于 2019-06-06

@marcelnem是的，您还需要使用 i18n-polyfill 进行多次构建。目的是使用 angular-i18n，您目前只能在 html 模板中使用翻译，而不是在您的打字稿代码中。 i18n-polyfill 扩展了 angular-i18n 以在你的打字稿代码中使用翻译。
随着 Angular 9（秋季推出），angular-i18n 也将支持 typescript 内的翻译，但与此同时，我们需要 i18n-polyfill 来实现这一点。

vekunz 于 2019-06-06

👍1

@vekunz您能否详细说明一下：“即使文档也不完全正确，我很快就知道要更改什么。” 下周我可能会研究 i18n-polyfill，所以任何信息都会被欣赏。谢谢

halilovicedvin 于 2019-06-06

@halilovicedvin @marcelnem我创建了一个 pastebin 文档来描述它，因为它不是这个 GitHub 问题https://pastebin.com/Xib6X6E9的主题

vekunz 于 2019-06-06

👍1

@ocombe使用 xi18n 工具，我可以将输入路径限制为仅 src 文件夹（以生成翻译）而不是整个项目/存储库吗？

NagaSainath 于 2019-06-26

@ocombe Ivy 是否支持 Angular 8 的多个语言环境（只是语言环境定义，而不是语言文件；例如日期管道）？因为另一个团队目前使用 Angular 和 ngx-translate，但是一个第三方组件需要正确的语言环境。一种选择是在 prod 模式下使用 JIT 编译器，但这不是很好。但是他们也不能为每种语言编译一个新的包，因为这会非常多。

vekunz 于 2019-06-27

@vekunz不，您不能设置多个语言环境，您需要为每个编译的包设置语言环境（可以在 cli 配置文件中设置）
我知道这不是你想听到的，但现在就是这样

ocombe 于 2019-06-27

👍2

@ocombe你能告诉我一些事情吗，我知道 Angular 的团队不认为这是一个问题，但是你认为 Angular 会在可预见的未来允许我们在运行时更改语言而无需重新加载应用程序，所以翻译一个单独的包并有可能加载正确的翻译并将其与文本文字绑定？

danielalmeidagoncalves 于 2019-07-03

👍2

有一个捆绑包是的，但翻译将在 boostrap 加载（当应用程序加载时）。使用现有架构，“热”重新加载翻译而不重新加载已经使用翻译的组件将非常复杂。
我并不是说这是不可能的，但不幸的是，我认为在可预见的未来不会发生这种情况。

ocombe 于 2019-07-03

👍2

感谢@ocombe的快速回复:) 继续努力:+1:

danielalmeidagoncalves 于 2019-07-03

在某个 Angular 会议（我认为是 AngularConnect）中， @ocombe有一次演讲，他谈到了 i18n 和 Ivy，在那里他描述得非常好，为什么这如此复杂。我可以试着找到视频。

vekunz 于 2019-07-03

我想我找到了https://www.youtube.com/watch?v=miG-ghJhFPc

vekunz 于 2019-07-03

👍6

对于等待运行时 i18n 与 ivy 的人来说，v9 的当前计划是让翻译与 ivy 一起工作，但仅作为构建步骤（就像现在使用视图引擎一样）。这意味着它现在仍然是 1 构建/语言环境，并且不会有代码翻译（只有模板翻译）。

ocombe 于 2019-07-17

😕80

真可惜。好吧，对于它的价值，感谢您的辛勤工作！

santhony7 于 2019-07-17

👍1

@ocombe你还会为运行时代码翻译维护 polyfill 吗？

mikejr83 于 2019-07-17

如果它坏了，我不会向它添加新东西

ocombe 于 2019-07-17

👍1

i18n 长期以来一直是二等公民，这有点糟糕……不是每个人都在以英语为母语的环境中工作。 ):

alfaproject 于 2019-07-17

👍9

好吧，我同意，我正在努力寻找一些公司来赞助我，以便我可以为 Angular 开发新的强大的 i18n 解决方案（我有很多想法）。
如果您考虑感兴趣的人，请在 Twitter (@ocombe) 或电子邮件 ([email protected]) 上告诉我🙂

ocombe 于 2019-07-17

👍6

@ocombe我还要感谢您的工作。 💚 不得不离队的消息有点让人意外。正如你所说的I had to ... ，它引导我直接问你主要原因是什么。我讨厌那些间接的暗示和猜测，所以这就是为什么向你提出如此直接的问题。

mlc-mlapis 于 2019-07-17

👍5

我是与 Angular 团队合作的外部承包商，而不是 Google 的全职员工，因此我的合同可以随时终止，具体取决于团队的需求。
他们正在内部招募新人来帮助项目，我相信他们会找到合适的人来帮助处理 i18n 和其他主题，所以你不必担心 Angular 的未来：visage_légèrement_souriant：它只是一个暂时的挫折

ocombe 于 2019-07-18

👍16

@ocombe谢谢你的解释。

mlc-mlapis 于 2019-07-18

谁能告诉我如何在类之外使用 i18n (i18n-polyfill)，如枚举或 const 数组或 .model.ts 文件之类的东西？

NagaSainath 于 2019-07-18

👍2 😄1

对于常量，我仍然将它们放在一个类中。我不知道任何替代方案：/

tbunique 于 2019-07-18

😕1

@ocombe 非常感谢您使用 i18n 为 Angular 以及 ngx-translate、i18npolyfill 和 Angular 团队所做的所有辛勤工作。
我们每天使用您的工作为我们的用户提供翻译，这是任何重要应用程序所要求的。
祝你在前进的道路上好运。

mikesimmonds 于 2019-07-18

👍2

对于常量，我仍然将它们放在一个类中。我不知道任何替代方案：/

嗯..如果我将它们移到课堂上，那么我需要将变量设为静态才能使用。但我不能将 i18n 用于静态变量。

导出类示例 {
构造函数（私有 i18n：I18n）{}
静态变量 = i18n('text'); // 我不能在这里使用 i18n，因为它是非静态类 Example
}

NagaSainath 于 2019-07-18

可悲的消息......这“削弱”了 Angular......就像其他人所说的那样，这仍然只是感谢@ocombe的出色工作，祝你好运！

danielalmeidagoncalves 于 2019-07-18

我很好奇，使用 ngx-translate 有什么缺点？它似乎能够完全满足人们正在寻找的功能

DmitryEfimenko 于 2019-07-19

我会说缺点如下：

增加包大小（外部库 + 翻译作为外部文件，而不是在构建时替换代码）
不是官方的（如果我死了，那么库就会停止，并且支持级别不同）
不支持 xliff/xmb（但通过插件支持 json 和其他格式，可以制作一个 xliff/xmb 插件来支持它）
延迟加载/拆分翻译时可能会有一些错误行为（我从来没有修复过）
语法比官方实现更复杂
性能（翻译的初始加载会使文本消失 1 秒，并且内存压力更大，因为我必须在运行时监控内容以查看是否有变化）

话虽这么说，这对很多人来说似乎已经足够了🙂

ocombe 于 2019-07-19

👍8

很好奇 Angular 如何促进和投资可访问性，但不包括该包中的语言。真的觉得这是在单语环境下做出的决定。

来自一个我们通常必须交替提供 3-4 种语言的环境，我一直在耐心地等待这个功能的发布，因为它与使用外部库相比具有明显的优势。有了这个消息，我将不得不重新考虑我们完全管理翻译的策略。

Karasuni 于 2019-07-19

👍9

@ocombe谷歌不可能雇佣你而不是承包商？😉

Gustav0ar 于 2019-07-19

@DmitryEfimenko我们目前正在使用ngx-translate并且对它非常满意。

demisx 于 2019-07-19

👍2

@ocombe Google 从外部开发人员/社区接受此功能的可能性有多大？我想我们等得太久了。

fetis 于 2019-07-19

👀1 👍1

如果您认真对待它并想花时间研究它，那么我会说他们接受帮助来开发此功能的可能性很高

ocombe 于 2019-07-22

👍1

如果您认真对待它并想花时间研究它，那么我会说他们接受帮助来开发此功能的可能性很高

@ocombe @IgorMinar我想为 Ivy i18n 提供一些志愿工作，如果有机会请告诉我。

trotyl 于 2019-07-22

👍2

如果您认真对待它并想花时间研究它，那么我会说他们接受帮助来开发此功能的可能性很高

我愿意贡献，但我绝对不知道任务的范围和复杂性。我们可以将原始消息中的列表作为我们的规范/要求吗？

fetis 于 2019-07-22

👍1

不，这个列表现在已经过时了。
我会让团队知道你们两个有兴趣，以便我们看看如何组织这个。

ocombe 于 2019-07-22

👍1

@ocombe我认为我们不止两个。

我们需要 Angular 团队提供的是

要求列表/一些规范
粗略的复杂度估计
1-2名沟通导师

与该社区可以组织开发和拆分任务

fetis 于 2019-07-22

我在https://hackmd.io/UfFN_wyVT-Ob1p70nA3N_Q?view

mlc-mlapis 于 2019-07-22

@fetis 分工太多可能不是一个好主意，沟通和上下文共享成本也很高，特别是对于一些冲突可能性很高的核心工作。

trotyl 于 2019-07-22

仍然对 XLIFF 被列为专业人士感到惊讶（或者更确切地说，ngx-translate 缺乏它是一个骗局）。谷歌翻译和其他谷歌服务似乎在使用 ARB 文件，这是翻译字符串的 JSON 表示。例如，我们使用 Flutter/Dart 构建了我们的移动应用程序，其中 INTL 是使用 ARB 文件实现的。如果 Angular 团队在考虑这一点时考虑到这一点，以便与 Google 生态系统中的其他项目更好地互操作，那就太好了。

localpcguy 于 2019-07-22

👍5 ❤1

分工太多可能不是一个好主意，沟通和上下文共享成本也很高，尤其是对于一些冲突几率很高的核心工作。

我同意，但我不认为这整个可以由一个人在合理的时间内交付。范围太大

fetis 于 2019-07-22

分工太多可能不是一个好主意，沟通和上下文共享成本也很高，尤其是对于一些冲突几率很高的核心工作。
我同意，但我不认为这整个可以由一个人在合理的时间内交付。范围太大

@fetis我可以和你一起工作。我们真的很想在我们的项目中使用 angular i18n，但它非常有限。

ricardo-mello 于 2019-07-22

👍3

我会让团队知道你们两个有兴趣，以便我们看看如何组织这个。

@ocombe来自 Angular 团队的任何反馈？

fetis 于 2019-07-29

我已经让他们知道了，他们似乎很感兴趣，但他们需要为所有这些制定具体计划，然后才能接受外部帮助（否则您可能不会着手进行所需的工作）。
@petebacondarwin将从现在开始接管

ocombe 于 2019-07-30

👍3

嗨@ocombe ，我正在浏览评论，我大致了解当我们在 *ngFor 中使用它们时，仍然没有为 i18n 标签创建动态 ID 的规定。还有其他选择或解决方法吗？或者我只能使用 ngx-translate。

swapnilvaidankar 于 2019-08-04

@swapnilvaidankar我认为没有解决方法，没有

ocombe 于 2019-08-07

👀1 👍1

@swapnilvaidankar - 你能解释一下你的意思吗？

为 i18n 标签创建动态 ID，同时我们在 *ngFor 中使用它们

petebacondarwin 于 2019-08-07

众所周知，要将静态文本翻译成任何其他语言，我们必须在 HTML 元素标记中使用 i18n 属性，如下所示，

<h1 i18n = "Card Header | Title for the under construction card@@constructionheader">Under Construction</h1>

它会生成如下的 xlf 文件片段，我们可以为任何语言设置目标。在这里，我翻译成法语如下，

  <trans-unit id="constructionheader" datatype="html">
    <source>Under Construction</source>
    <target>En construction</target>
    <context-group purpose="location">
      <context context-type="sourcefile">src/app/app.component.html</context>
      <context context-type="linenumber">3</context>
    </context-group>
    <note priority="1" from="description"> Title for the under construction card</note>
    <note priority="1" from="meaning">Card Header </note>
  </trans-unit>

但是在下拉列表的情况下，似乎很难使用 i18n 属性。
例如，如果我想将名片、传单和小册子等产品列表显示到下拉列表或简单列表中，如何为标记因此我可以将产品名称翻译成法语或任何其他语言。

这个方法我试过了

{{ 产品 }}

它会生成如下的 xlf 文件片段，但不确定如何使用它来将产品名称翻译成其他语言标签

  <trans-unit id="product" datatype="html">
    <source><x id="INTERPOLATION" equiv-text="{{ product }}"/></source>
    <context-group purpose="location">
      <context context-type="sourcefile">src/app/product/product.component.html</context>
      <context context-type="linenumber">6</context>
    </context-group>
    <note priority="1" from="description"> product name from List</note>
    <note priority="1" from="meaning">product name </note>
  </trans-unit>

这里的问题，如果你能看到 id标签仅为“产品”。但是，我期望应该根据产品列表动态生成 ID，这些产品列表将在下拉列表中可用。

不确定在处理动态内容或内容列表时如何实现这一点。

很抱歉进行了广泛的解释。
我希望你已经理解了这里的问题。

谢谢，
斯瓦普尼尔

swapnilvaidankar 于 2019-08-07

你能为此打开一个问题吗？这不是这里真正的主题，如果其他人正在寻找同样的东西，它会更容易找到

ocombe 于 2019-08-07

@swapnilvaidankar i18n 属性用于静态文本翻译而不是动态内容。在您的示例中，“产品”来自您的源代码（在您的 ts 文件中定义）并且您需要使用 ngx-translate（或直接在 ts 文件中翻译产品名称），或者来自 Http 请求然后您的后端应提供翻译后的产品名称。

sroucheray 于 2019-08-07

👍1

我认为我们不需要为此提出新问题。这只是对已多次请求的 TS 文件中的运行时翻译的请求。

@swapnilvaidankar如果选项数量有限并且您已经知道它，您可以使用简单的ngSwitch创建一个组件来呈现文本。我们使用这种解决方法，就像一个魅力。

fetis 于 2019-08-08

👍1

@fetis - 问题在于这些一般性问题很容易被转移到有关特定事物的讨论中。创建一个新问题提供了一个新线程来继续该讨论，而不会分散该讨论的注意力。

petebacondarwin 于 2019-08-08

👍3

@fetis是的，这个问题我在很多地方都见过很多次，但是我没有找到任何合适的解决方案。我也遇到了 ngSwitch，但在我的情况下不是合适的解决方案。但是，感谢您的解决方法。

@ocombe我相信我需要将此作为问题发布到其他地方而不是在这里讨论。 👍

谢谢大家的回复。

swapnilvaidankar 于 2019-08-08

@petebacondarwin @swapnilvaidankar这是您正在寻找的问题https://github.com/angular/angular/issues/11405
自 2.0.0-rc.6 (!) 顺便说一句

fetis 于 2019-08-08

👍2

你好@ocombe ，这个问题仍然是最新的吗？似乎 Ivy 将成为 Angular 9 的默认设置，所以我想知道 i18n 的状态是什么？你能估计一下什么时候可以生产吗？使用 Angular 9、10、11？如果不使用 Angular 9，Angular 9（和 Ivy）会在没有 i18n 的情况下发布，还是会使用旧的 i18n？

MickL 于 2019-09-03

关于当前状态的更多信息可以在这个（https://github.com/angular/angular/issues/11405）问题中找到。本期关于当前状态的评论值得一读：

https://github.com/angular/angular/issues/16477#issuecomment -512290696
https://github.com/angular/angular/issues/16477#issuecomment -506378004
https://github.com/angular/angular/issues/16477#issuecomment -512548506

这也值得一试。

fxck 于 2019-09-03

👍5 ❤1

尽管我们在 v9 中切换了默认设置是使用 ivy，但我们预计可能存在许多无法完全正常工作的场景，并且这些项目现在会坚持使用视图引擎。
我们正在努力为 v9.0.0 版本启动并运行 i18n，但它会很紧张。

petebacondarwin 于 2019-09-03

👍8 😕1

“运行时 i18n（所有语言环境的一个捆绑包）”的当前状态是什么？

Ivajkin 于 2019-10-01

👍2

@Ivajkin - 抱歉，这个问题没有及时更新。

“Runtime i18n”是一个经常被要求的功能，但它对不同的人可能意味着不同的东西。
在新的 i18n $localize方法中，可以在运行时进行实际翻译。

如果您不只是在 Angular 应用程序引导之前翻译所有可能的消息，那么运行时实际上会相当复杂。如果您正在这样做，那么编译时转换的新方法很可能就是您所需要的。

在新的 i18n 中，翻译发生在构建管道的最后 - 而不是在 Angular 编译器中 - 这意味着您应该能够在库等中提供未翻译的消息，并且只有在构建最终应用程序时才进行翻译。

这一切都在为 v9.0.0 工作。

查看https://github.com/angular/angular/tree/master/packages/localize了解我们在哪里。

petebacondarwin 于 2019-10-01

👍13 👀7 ❤6 🎉4

@petebacondarwin您介意详细说明一下新的编译时翻译吗？这是否允许我们构建适用于所有语言环境的单个捆绑包（使用 AOT）？

s992 于 2019-10-01

在新方法中，我们不是在 Angular 编译器中进行翻译，而是简单地“标记”需要通过全局$localize模板化字符串标记处理程序翻译的消息。这些带标签的字符串可以在各种捆绑和缩小中幸存下来，因此在构建管道结束时它们仍然存在并且可以被发现。这些文件可能是您发送给其他团队以包含在他们的应用程序中的库的捆绑包！

我们现在有几个选择：

a) 运行一个静态识别这些标记消息并用翻译替换它们的工具。这有效地从 JavaScript 中删除了$localize引用，并为您留下了用于分发的最小代码包。这个“编译时内联”工具可以进行大量翻译，并为您正在翻译的每种语言生成一个包的副本。由于它可以在构建管道的最后运行，它避免了为您支持的每种语言运行构建的其他方面。

b) 允许$localize标记在浏览器中运行的代码中结束，并使用$localize的实现在运行时翻译消息。这种方法的缺点是浏览器的负载更大，因为它必须包含$localize调用以及$localize翻译实现。此外，您必须将翻译本身发送到浏览器。这种方法的一个好处可能是支持在运行时延迟加载翻译。但有争议的是，在 http 服务器（或构建服务器）上进行翻译会带来更高效的运行时体验。

petebacondarwin 于 2019-10-02

🎉5 👍3 🚀2

请运行时选项 b)。我们可以将翻译加载为 JSON 文件并在运行时切换语言，就像我们目前使用ngx-translate所做的那样。

demisx 于 2019-10-02

👍2

感谢您的解释。我知道 a) 方法更“Angular”，但 b) 方法（以及一般的延迟加载）的巨大优势还在于能够动态定义/更改用户的翻译（可以立即使用修改后的应用程序翻译） . 如果我理解正确，方法 a) 中翻译的任何微小变化都将意味着新的重建。

这与从具有预定义 Angular 组件的静态生成页面切换到用户生成的模板的优势相同，该模板包含程序员根据用户需要定义的 Angular 组件（以这种方式定义的模板也将从数据库加载...... )

您可能还考虑过默认情况下加载时使用 a) 方法的可能性。如果出现运行时翻译请求（例如，后端将开始发送更新的翻译），标记的块（直到现在还包含静态文本）将开始被动态抓取和替换，就像在 b) 方法中一样。所以 b) 只有在需要时才会被激活，所有可翻译的部分都将根据程序 a) 准备好。我理解这样的做法会比 b) 的做法本身更繁琐，这样肯定不是直接可行的，但是这样会更贴近用户的实际需求。

对于您列出的选项，我愿意在某些情况下牺牲大约 25% 的应用程序性能来实现这种动态功能（当然我不会到处使用这种动态方法）。因此，如果 AOT 本地化模板在 0.4 秒内呈现，对于动态模板，如果它在 0.5 秒内生成，我仍然认为它在我需要对翻译更改立即做出响应的应用程序中是可以接受的。

atiris 于 2019-10-02

@demisx这两种方法都将在 v9 中可用，但首先将完全支持选项 a)（为了回溯兼容性），在 Angular 团队完全认可之前，可能会为选项 b) 开发新的东西。
当 v9 发布时，我的库Locl将为选项 b) 提供一些帮助程序，以便任何人都可以使用它，直到 Angular 团队弥合这一差距

ocombe 于 2019-10-02

❤9 👍3 🎉2

请注意，这样的运行时翻译不会是“反应性的”，因为一旦渲染了组件，即使加载了新的翻译，也无法动态更改其文本。

相对于$localize标记的字符串，已翻译的消息是静态的。所以组件需要重新渲染。并且根据 IVY 中模板的缓存，重新渲染可能还不够。

这是运行时翻译难以实现的原因之一，因为它的行为不一定是直观的。

petebacondarwin 于 2019-10-02

关于在构建中从静态翻译开始，然后在稍后添加运行时翻译的混合方法。如果编译时内联没有删除$localize标记，而只是更新了模板化的字符串文字部分，这可能是可行的。但是，这会导致编译时间成本加上额外的包大小成本。

petebacondarwin 于 2019-10-02

在 Angular 9 RC1 上运行ng xi18n会返回“我们很抱歉，但 i18n 尚未在 Ivy 中实现”，但更改日志表明现在实现了_some_ i18n 支持。我假设现在需要手动更新翻译文件？

neil-119 于 2019-11-07

😕1 👍1

@neil-119 目前常春藤模式不支持提取。您仍然需要禁用 ivy 才能运行提取。但是您可以重新启用它以使用提取的翻译文件。

petebacondarwin 于 2019-11-07

👀2

我希望计划在最终的 v9 版本中包含提取。

vekunz 于 2019-11-07

👍1

@neil-119 Angular CLI 应该自动使用 VE 进行提取。你不需要做任何事情来让它工作。我们还对其进行了测试，所以我很惊讶它坏了。你能打开一个repro问题吗？

filipesilva 于 2019-11-07

目前常春藤模式不支持提取。

或者不，这是一个表演停止者。目前，我们有一个字符串提取的自动化流程。如果我们不能自动提取翻译，我们如何迁移到 Ivy？
操纵sconfig.json every time ？这对我来说听起来不太好。

fetis 于 2019-11-07

@fetis - 我不正确。如果您使用的是 CLI，那么调用ng xi18n应该会按预期工作，即使启用了 ivy 也是如此。

petebacondarwin 于 2019-11-07

👍3

@petebacondarwin谢谢。我将在我们目前的项目中尝试 Ivy，所以希望我能尽快确认

fetis 于 2019-11-07

您好，我尝试在我的组件中使用（角度 9.0.0-rc.1）

$localize `some string to localize`;

在@angular/localize/init 的源代码中作为文档找到。

当我尝试像往常一样为我的语言构建时，我收到了这个错误
No translation found for "4145296873012977836" ("some string to localize").

如何为该字符串提供翻译？
我期望的是 ng xi18n 将生成 .xlf 文件，其中也包含来自组件代码的文本。是对的还是我错过了什么？

Ks89 于 2019-11-11

嗨@Ks89 - v9 不支持从应用程序代码（而不是模板）中提取消息。
但如果你偷偷摸摸，你可以解决这个问题。 4145296873012977836是消息的 ID，因此如果您在翻译文件中使用此 ID 提供翻译，翻译时将使用该 ID。

petebacondarwin 于 2019-11-11

@petebacondarwin这个功能什么时候会添加到 Angular 中？
我认为让组件中的运行时翻译真正有用是非常重要的。

当我将我的 .xlf 文件发送给翻译器时，我希望快速添加所有字符串，然后非常轻松地将结果应用到应用程序中。

感谢您的回答

Ks89 于 2019-11-11

我希望它在 9.1

petebacondarwin 于 2019-11-11

👍21 🎉8

如果我们有办法强制整个应用程序重新渲染，不管每个组件的ChangeDetectionStrategy是什么，那么解决这些动态问题就很容易了。

crysislinux 于 2019-11-28

@petebacondarwin Angular 9 现在发布了新的 $localize 标签功能，但没有提取消息。您之前说过，我们可以在 Angular 9.1 中期待这一点。这个预测是否仍然有效，我们可以期待 $localize API 稳定吗？

vekunz 于 2020-02-11

👍2

您可以从模板中提取翻译。
如果你也想在你的代码中使用$localize ，你应该看看 Locl： https ://github.com/loclapp/locl/
@locl/cli将让您从代码和模板中提取

ocombe 于 2020-02-11

👍1

@vekunz - 预测仍然有效。此外，正如@ocombe指出的那样，当前的 CLI 翻译提取机制对于 Angular 模板中的任何翻译（即由i18n标签标记的内容）都可以正常工作。您现在无法使用核心工具提取的唯一内容是在您自己的代码中（例如，在服务或组件中）调用$localize 。

petebacondarwin 于 2020-02-11

👍1

$localize调用本身是一个稳定的 API。

进行翻译和提取（特别是在编译时）的工具仍然是非公开的。但这不是问题，除非您计划围绕它构建自己的工具（就像@ocombe在 Locl 所做的那样！）。

petebacondarwin 于 2020-02-11

👍1

谢谢@petebacondarwin ，有了这个，我们可以将代码中的文本复制到“隐藏”组件模板中以进行提取。那么提取和翻译都应该工作，不是吗？

@ocombe由于预测提取适用于 Angular 9.1，我们的经理不会为您的解决方案付费。特别是因为我们不需要实时切换语言和翻译路线。

vekunz 于 2020-02-11

我们可以将代码中的文本复制到“隐藏”组件模板中以进行提取

是的，确实，这种解决方法现在可以工作。

petebacondarwin 于 2020-02-11

👍1

我很困惑：在 9.1 中也可以进行运行时翻译吗？或者只是模板之外的提取？或者这些都没有？

对我来说，运行时翻译将是一个杀手级功能。我认为部署多个捆绑包并强制用户重新加载整个页面并不是一个好的可用性。

JustDoItSascha 于 2020-02-11

👀2

@JustDoItSascha
我创建了一个简单的演示，演示运行时翻译。
https://stackblitz.com/edit/ivy-vjqzd9?file=src%2Fapp%2Fapp.component.ts

destus90 于 2020-02-12

你好！我试图在 main.ts 中调用loadTranslations ，因为在 JavaScript 解析导入时会翻译字符串，但这还不够。

main.ts 进口 AppModule 进口 AppComponent （我使用$localize ）。

为了使它工作，我正在做：

loadTranslations(......);
import('./app/app.module').then(m => platformBrowserDynamic(). bootstrapModule(m.AppModule);

现在这可行，但会导致 Angular 的“complier.js”包包含在供应商包中。

有什么办法可以避免吗？谢谢

albyrock87 于 2020-02-12

目前， loadTranslations需要在应用程序启动之前调用，因此可以在polyfills.ts中完成。如果您想加载另一组翻译，则必须重新加载页面。如果您想了解更多原因，我写了https://blog.ninja-squad.com/2019/12/10/angular-localize/来解释它。

cexbrayat 于 2020-02-12

👍2 😕1

目前， loadTranslations需要在应用程序启动之前调用，因此可以在polyfills.ts中完成。

更糟糕的是，它需要在任何模块文件被导入之前被调用，这就是为什么如果你把它放在 polyfills.ts 中（它在主应用程序文件之前执行）它可以工作，但是如果你想在你的“主”文件，那么您需要为模块使用动态import(...)

@vekunz现在不使用我的 lib 是一个很好的理由😊据说 Locl 不仅仅是关于提取，我打算添加许多其他工具来简化 i18n

ocombe 于 2020-02-12

😕1

有没有打算在 Angular 中实现运行时 i18n？我们已经期待这个功能将近三年了，现在常春藤在这里，它仍然只是半生不熟。

Karasuni 于 2020-02-12

有没有打算在 Angular 中实现运行时 i18n？我们已经期待这个功能将近三年了，现在常春藤在这里，它仍然只是半生不熟。

我的理解是，常春藤在很多方面都是未来发展的推动者。毫不奇怪，随着 Ivy 的发布，i18n 指针确实发生了令人难以置信的变化，但它应该会释放出未来发生重大变化的潜力。无论如何，这是我对它的阅读，也是我的希望。

michaelfaith 于 2020-02-12

@Karasuni - 我认为我们需要澄清运行时翻译对核心 Angular 框架的实际含义，因为对此存在相当多的困惑。

我们对 v9 所做的更改涉及基于$localize的翻译。这样做的主要目的是将翻译与 Angular 编译器解耦，以便它能够实现许多不错的改进：

第一个是立即可供所有 v9 用户使用的，它是加速翻译应用程序的生成。以前，必须为您想要将应用程序翻译成的每种语言运行整个构建管道。现在，您的应用程序的主要编译只需要运行一次，最终的翻译过程明显更短，在构建输出上针对每种语言运行。为了支持这一点，有新的@angular/localize包、Angular 编译器内部的更改以及 Angular CLI 内部的大量工作，以使其尽可能无缝和透明

其次，由于$localize标签可以留在分布式代码中，现在也可以在浏览器中进行翻译（在运行时，而不是在编译时）。这就是我们在核心 Angular 框架中作为运行时翻译的意思。但请注意，最终结果实际上与编译时的翻译相同。翻译只发生一次；如果您想在运行时更改语言，那么您必须重新启动整个应用程序（例如通过重新加载）。这样做的好处是允许项目部署具有大量翻译文件的单个可分发文件，这在您不想预先生成所有不同翻译的少数用例中很有帮助。正如@ocombe和其他人在这里指出的那样，尽早加载翻译存在一些棘手的问题。您可以考虑https://www.locl.app/以获得更多帮助。

请注意，这种“运行时”翻译也可以用于延迟加载的路由，因此根据您的设置方式，使用不同的语言使用不同的路由可能是可行的。

由于没有一种方法可以加载适用于所有场景的翻译，因此我们尚未将其纳入 CLI 或提供稳定的公共 API 来支持这一点。一旦我们对用例有了更好的理解，我们就可以为此添加更多支持。同时，如果您不想冒险为自己解决问题，像 Locl 之类的东西可能会有所帮助。

最后，请注意，核心 Angular 框架（通过设计）特别不支持在运行时动态更改已翻译的字符串。将翻译后的字符串挂钩到 Angular 的变更检测系统中会给大多数应用程序带来太大的压力并破坏性能。从我与社区的互动中，我几乎没有看到任何现实世界的场景，除了重新启动语言更改应用程序之外，实际上还需要这样做。如果这是您的应用程序的要求，那么您可以通过在模板中的字符串上使用自定义构建的管道来实现它，该管道会提取翻译，甚至可能会即时调用$localize进行翻译，但它看起来不像这将非常高效。否则，您可以考虑采用更动态的方法，例如https://netbasal.gitbook.io/transloco/。

Angular 的下一个次要版本中的主要变化将是改进的翻译提取，它将能够从 TS 代码中识别和提取本地化字符串 - 目前 CLI 提取仅处理模板中的本地化字符串。

如上所述，改进运行时翻译的更改最早要到 9.1 之后才会出现。

petebacondarwin 于 2020-02-12

👍5

最后，请注意，核心 Angular 框架（通过设计）特别不支持在运行时动态更改已翻译的字符串。将翻译后的字符串挂钩到 Angular 的变更检测系统中会给大多数应用程序带来太大的压力并破坏性能。从我与社区的互动中，我几乎没有看到任何现实世界的场景，除了重新启动语言更改应用程序之外，实际上还需要这样做。

我可能弄错了，但仅在这个线程中，许多人就明确表示对在运行时实时更改语言的能力感兴趣，而无需重新构建或重新加载应用程序。还是这里的每个人对runtime translation都有不同的定义？

我不想仅仅为了切换语言而重新加载应用程序。例如，当用户在一个带有表单的页面上时，为了切换翻译而重新加载整个页面会对用户产生影响。

Karasuni 于 2020-02-12

只是要清楚。我的意思是，很多人来找我说他们绝对需要在他们的应用程序中更改实时语言。但是，当您深入研究原因时，事实证明并非如此。我并不是说没有需要这样做的场景，但根据我去年的经验，我遇到的很少。

问题：为什么用户在您的应用程序上转到特定表单时需要切换语言？

petebacondarwin 于 2020-02-12

👍5

我认为也不需要实时切换。您多久更改一次网站的语言？通常一次，最多一次。而这一次，页面重新加载并不是那么重要。正如@petebacondarwin所说，几乎所有实时切换场景都不是相关的现实世界场景，而只是“很高兴拥有”。

vekunz 于 2020-02-12

👍2

还是这里的每个人对运行时翻译都有不同的定义？

我绝对需要运行时翻译。我们的客户需要能够在现场编辑和更新翻译，而不仅仅是在构建服务器上。所以，运行时，而不是编译时。

页面加载后的实际语言切换是一个不错的选择。

ewok-janitor 于 2020-02-12

🚀2

只是要清楚。我的意思是，很多人来找我说他们绝对需要在他们的应用程序中更改实时语言。但是，当您深入研究原因时，事实证明并非如此。我并不是说没有需要这样做的场景，但根据我去年的经验，我遇到的很少。
问题：为什么用户在您的应用程序上转到特定表单时需要切换语言？

您可能是对的，这不是一个可靠的要求。我可能会尝试在加载时部署翻译，但它将完全改变当前能够动态切换语言的应用程序的用户体验 - 无需重新加载或更改页面中的位置 - 使用外部库。翻译长期以来一直是一个热门话题。

我确实有一个重要的问题：翻译文件可以异步加载吗？我所有的翻译都存储在数据库中，因为能够在不重建的情况下更新它们很重要。

Karasuni 于 2020-02-12

是的，它们可以异步加载，但是您需要延迟应用程序的启动，直到它们被加载

ocombe 于 2020-02-12

😄1

只是要清楚。我的意思是，很多人来找我说他们绝对需要在他们的应用程序中更改实时语言。但是，当您深入研究原因时，事实证明并非如此。我并不是说没有需要这样做的场景，但根据我去年的经验，我遇到的很少。
问题：为什么用户在您的应用程序上转到特定表单时需要切换语言？
您可能是对的，这不是一个可靠的要求。我可能会尝试在加载时部署翻译，但它将完全改变当前能够动态切换语言的应用程序的用户体验 - 无需重新加载或更改页面中的位置 - 使用外部库。翻译长期以来一直是一个热门话题。

从技术上讲，您可以重新加载整个应用程序并仍然让用户保持原样。
你“只是”需要有一个状态驱动的应用程序（带有 ngxs、ngrx 或任何其他状态管理库），它存储在某个地方并在启动时检索。

唯一的技巧是保持滚动位置，但这也是可行的。

TomDemulierChevret 于 2020-02-12

@petebacondarwin我不得不说我同意你的看法。我不知道真正的最终用户（开发阶段的测试人员除外）在使用应用程序时会在不同语言之间永久切换。当然，如果他们以某种方式打开它，他们可能会在一开始就这样做，但后来，这种情况很少见。

mlc-mlapis 于 2020-02-12

还是这里的每个人对运行时翻译都有不同的定义？
我绝对需要运行时翻译。我们的客户需要能够在现场编辑和更新翻译，而不仅仅是在构建服务器上。所以，运行时，而不是编译时。
页面加载后的实际语言切换是一个不错的选择。

我不确定您的客户在做什么，但是“在生产网站中实时编辑翻译”听起来并不常见。

vekunz 于 2020-02-12

我不认为实时更改语言（_无需重新加载页面_）会破坏交易。
为用户更改语言只发生一次；

想想看，你换过多少次手机语言？可能一次，或者您只是使用默认语言滚动。

观察语言更改以便在不重新加载页面的情况下进行实时更改会给用户一生中几乎不使用的东西带来很多性能损失。

最终，对我来说归结为三件事；

从模板和 TS 文件中提取翻译。
- 更新源语言资产。
- 也更新翻译（_如果我有多种语言，fr，en，de...我希望所有这些都用新的翻译键和删除的键更新。_）
为所有翻译构建一个版本（_为每个翻译构建 1 个版本也可以，只要它不增加构建时间。_）
获取可用语言并通过重新加载更改语言。

Alir3z4 于 2020-02-12

@卡拉苏尼
您可以异步获取翻译，然后才加载角度应用程序。
请参阅我上面关于如何使用import(...)异步加载 app.module 的评论。

albyrock87 于 2020-02-12

我个人使用维基百科来找出我知道的电影的标题被“翻译”成另一种语言的内容。

在这个时代，双语或三语已经很普遍了（除了在美国，没有任何危害）。

用户可能想要实时切换语言，这是完全合理的。 Wikipedia 示例是启用此功能的积极结果，我不明白为什么我们应该扼杀其他潜在用途，然后才能以性能为借口看到曙光。

甚至 ocombe 的 ngx-translate 对你们来说就是“性能不佳的翻译”的完美例子，对于日常用户来说运行得非常快。

我个人会说三种语言，我不能只使用一种语言：所有语言对我来说都很美

尽管如此，我不能同意这一点：

想想看，你换过多少次手机语言？可能一次，或者您只是使用默认语言滚动。

tatsujb 于 2020-02-12

维基百科是这方面最糟糕的例子，因为一篇文章的不同语言实际上是独立的文章。通常，您不需要完全相同的站点的不同语言。即使您使用四种语言。
如果您确实需要实时切换，您可以使用@petebacondarwin提到的自定义翻译管道或@ocombe 的新工具的解决方法。

vekunz 于 2020-02-12

好的，所以我不认为这真的是进行讨论的最佳场所。我担心（虽然到目前为止一切都非常合理）我们可能会陷入负面讨论。恐怕在可预见的未来，Angular 框架不会提供开箱即用的实时语言切换解决方案。

我觉得这个问题的价值已经走到了尽头。我已将此问题描述中链接的未解决问题和 PR 移至https://github.com/angular/angular/milestone/101 ，我将关闭并锁定此 PR。

如果您有新的功能请求问题，请打开一个新问题并在其中标记我。

petebacondarwin 于 2020-02-12

Angular: [i18n] 计划

对于常春藤

特征

问题

不优先

特征

问题

最有用的评论

所有310条评论

相关问题