Angular：本地化为多种语言

Question

我有一个已经构建好的 Angular 6 应用程序。现在我们计划将其支持为多种语言。我能够创建多个 xlf 文件并将目标字符串替换为语言。我的语言环境文件有三个文件，如messages.en.xlf、messages.es.xlf 和messages.fr.xlf，每个文件分别用于英语、西班牙语和法语。

根据浏览器的语言，应用程序应选择所需的语言文件。如果浏览器设置为法语，它应该会自动提取 messages.fr.xlf 并以法语显示应用程序。

起初我的命令，会是ng build --prod --output-hashing all，但与定位的改变，我需要使用--aot=false，并--build-optimizer=false与我的应用程序的性能和加载时间变差。

ng build  --prod --output-hashing all --aot=false --build-optimizer=false

我的 main.ts 文件如下所示：

ng build  --prod --output-hashing all --aot=false --build-optimizer=false

我想知道是否有一种正确的方法可以根据浏览器的语言加载 xlf 文件而不会出现性能问题并且不会使 AOT 为假。

Answer 1

关于如何在应用程序中使用翻译，您有 3 个主要选项。

每种语言的 AoT 构建

您可以使用 angular 内置的i18n功能并为每种语言创建一个AoT 构建。然后，您需要确保在网页加载时在运行时加载正确的语言相关构建文件。通常的做法是将每种语言依赖构建在自己的文件夹中，该文件夹以区域设置/语言的 ISO 代码命名。然后，您可以指向此文件夹，然后指向包含index.html在页面导航中的内容（或在您使用的任何主机页面中加载包含的 .js 文件）。根据您想要支持的语言环境数量，这会导致您的构建时间显着增加。从积极的方面来说，您可以获得 AoT 的所有运行时性能优势。

每种语言一个 JiT 构建和资源文件

您可以使用 angular 内置的i18n功能并创建单个JiT 构建并在运行时指向适当的翻译文件。您的构建时间会快得多（当您发布应用程序时），但是客户端在加载应用程序时以及可能在应用程序执行期间会受到性能影响。积极的一面是，当您处理多种语言时，这种结构可能更容易维护，尤其是在预计语言数量会增加的情况下。

外部工具（如@ngx-translate）

在处理越来越多需要支持的语言时，这是我的首选方法。此外部工具允许您使用单个 AoT 构建。然后在模板中定义翻译键并配置该工具以从某些（可能）外部源（如服务器或磁盘上的文件）检索翻译。可能还有其他人，但我不会将它们包括在这个答案中。

关于 JiT 与 AoT 的说明。已经有一个写得相当好的答案比较了可以在 StackOverflow 上找到的 JiT 构建与 AoT 构建：Angular 2 : Just-in-Time (JiT) vs Ahead-of-Time (AoT) compiler。我不会在这里重新总结这些答案。