Angular i18n 构建时与运行时的区别解析

Angular 中的国际化可以采用两种不同的模式——构建时或运行时。官方的方法使用 @angular/localize，该方案会为每种语言生成独立的构建版本。这种架构在运行时既稳定又快速，但需要规划多次部署，且不支持应用内切换语言。

要实现这一功能，您需要在模板和 TypeScript 中标记文本，将翻译内容提取到单独的文件中，然后针对每个语言环境构建一个应用程序版本。每种语言都通过各自的 URL 提供服务，因此用户通过导航切换语言，而非通过应用内的切换按钮。

如果您需要无需重新加载即可实现动态切换，则可由运行时库来处理。常用的选项包括 ngx-translate 和 angular-i18next。这些库会按需加载翻译内容并即时更新用户界面，但在配置、性能和服务器端渲染（SSR）支持方面各有取舍。

在本文中，我们将介绍 Angular 内置国际化（i18n）工作流的工作原理、如何部署它，以及在何种情况下运行时库更为合适。

如何 @angular/localize 作品

Angular 的内置国际化功能采用构建时工作流。您需要在部署前准备好翻译内容，然后针对每种语言发布一个编译好的应用程序版本。

由于不支持运行时语言切换，因此配置主要侧重于提取和构建配置。

让我们来回顾一下整个工作流程：

1. 在模板和 TypeScript 中标记待翻译的文本。对于 HTML 内容和属性，请使用 i18n 属性，并使用 $localize 在 TypeScript 中，字符串会被包含在相同的提取过程中。
2. 使用 Angular CLI 将消息提取到翻译文件中。该操作默认会生成一个 XLIFF 文件，根据您的配置，也可选择其他格式，文件中包含消息 ID 和源文本。
3. 对提取的文件进行翻译，并保持标识符不变。在必要时添加自定义 ID，以确保源文本的更新不会破坏现有翻译，也不会导致隐性不匹配。
4. 针对每个语言环境构建并部署一个应用程序版本。在angular.json 中配置语言环境，然后生成特定语言的打包文件，并通过单独的路由或域名进行分发。

复数形式的生成使用 ICU 表达式。您可以定义诸如以下情况： =0, =1，或 其他，Angular 会根据当前的区域设置选择正确的表单。不同语言所需的表单数量各不相同，因此请尽早规划消息结构。

嵌套的 ICU 表达式遵循相同的模式，但会增加复杂度，因此应确保其可读性，并在不同语言环境中进行测试。

构建和部署支持多语言环境的 Angular 应用程序

借助 Angular 的构建时国际化（i18n）功能，部署直接取决于您对angular.json 的配置方式。您需要定义一个源语言环境和一组目标语言环境，并将每个目标语言环境映射到相应的翻译文件。

在构建过程中，Angular 会先对应用程序进行一次编译，然后在后处理阶段应用本地化替换。这意味着您无需针对每种语言分别进行完整构建，但最终仍会为每个语言环境生成独立的输出包。

每个区域都会生成该应用的独立版本，通常通过子路径或子域名提供。一种常见的配置会使用如下路径： /en/ 以及 /fr/，每个文件都指向其对应的构建输出。之所以需要这种结构，是因为翻译后的内容已被嵌入到文件中，因此切换语言意味着需要加载不同的构建版本。

服务器配置已成为国际化（i18n）设置的一部分。您需要制定路由规则，将传入的请求映射到正确的语言版本。

具体实现方式因环境而异——Nginx 中是原始的重写规则，而 Firebase Hosting 中只需几行声明式代码——但目标是一致的。请求必须根据 URL 结构或重定向逻辑，解析到正确的本地化资源包。

Angular 在使用服务器端渲染时也支持自动语言检测。服务器可以读取浏览器的 接受语言 header，然后将用户重定向到对应的语言路径。这虽然能提升首次访问的体验，但在后续切换语言时，仍会导致整页重新加载。

在开发过程中，Angular 开发服务器可以通过子路径提供多种语言环境。这有助于测试，但切换语言时仍需刷新页面，因为每个语言环境都是独立的构建输出。

该模型对基础设施有明显的影响。您需要管理多个构建产物，为每个语言环境配置路由，并在服务器层处理重定向。当内容发生变化时，持续集成（CI）管道必须考虑翻译更新，并重新构建本地化输出。

另一种方法可以避免这种复杂性。反向代理模型（例如Weglot）位于服务器和浏览器之间。它能实时翻译内容，并通过单一部署提供所有语言版本。这样就无需进行多次构建和设置路由规则。关于Weglot 更多内容，Weglot ！

运行时库对比：ngx-translate、Transloco 和 angular-i18next

运行时库解决的问题与 Angular 内置的 i18n 不同。它们不会将翻译内容编译到应用程序中，而是运行时加载翻译，并在无需完全刷新页面的情况下更新用户界面。

这使得它们在用户需要在应用内切换语言或内容频繁更新时更为适用。

ngx-translate 是最常用的选项。它支持通过 trans.use()，翻译内容可从 JSON 文件或 API 中加载。该方案在小型应用中运行良好，且是此处唯一经过验证的 Ionic 兼容性。SSR 可与 TransferState 以及自定义加载器，不过需要进行配置。最新版本新增了基于提供者的 API，这与独立组件的配合更为默契。

Transloco 侧重于结构和可扩展性。它提供了内置的 SSR 支持，并通过 `ng add` 命令实现更简洁的配置。它还支持范围限定翻译，允许您按功能懒加载语言文件。这既能减小包体积，又能确保大型应用的可维护性。语言切换使用 setActiveLang() 并立即更新用户界面。

angular-i18next封装了i18next生态系统。如果您的团队已经在其他框架中使用 i18next，并且希望在各个项目中保持一致性，那么它会非常有用。它支持 i18next 核心提供的插件，包括 ICU 处理功能。切换语言通常需要重新加载页面，这限制了它在需要即时更新的应用中的使用。

下面是一个更直接的比较：

选择取决于您的应用如何处理语言切换和扩展问题：

• 如果您需要简单的配置或 Ionic 支持，请使用 ngx-translate。
• 对于需要服务器端渲染（SSR）或具有模块化翻译需求的大型应用，请使用 Transloco。
• 如果希望在多个平台上与 i18next 保持一致，请使用 angular-i18next。

💡 如果不需要运行时切换，且您希望客户端逻辑尽可能简洁，那么 Angular 的内置 i18n 仍是更好的选择。

在不修改代码的情况下翻译 Angular 应用

除了 Angular 内置的 i18n 和运行时库之外，还有第三种选择：外部网站翻译工具。这些工具位于 Angular 应用程序之外，对渲染后的输出进行翻译，而不是对代码库中的字符串进行翻译。

如前所述Weglot 反向代理模式。它位于服务器和浏览器之间，检测 HTML 响应，然后向访客提供翻译后的版本。这意味着您无需为字符串添加 i18n 标记、管理 JSON 翻译文件，也不必为每个语言环境重新构建应用程序。由于翻译层在 Angular 外部处理，因此设置过程更加快捷。

这种方法还改变了翻译工作的开展方式。翻译人员不再在项目中编辑文件，而是使用可视化仪表盘。他们无需触碰模板或 TypeScript，即可审阅页面并应用术语表规则。对于内容密集型营销网站而言，这可以减少开发人员的参与。

语言切换的过程也会更加流畅。Weglot 基于 JavaScript 的切换器，该切换器可在无需进行完整的 Angular 重建过程的情况下更新显示的语言。这使得快速发布多语言内容变得更加容易。

其取舍在于控制权。由于翻译是在 Angular 渲染页面之后才进行的，因此该模型无法处理依赖于 TypeScript 内部语言的应用逻辑。此外，对于 Ionic 应用和“离线优先”应用而言，这种模式也并非理想之选——因为此类应用的内容需要驻留在应用本身内部，而非位于代理服务器之后。

SEO 还取决于具体配置。反向代理翻译可以支持可被搜索引擎收录的翻译页面，但snippet 简单的 JavaScriptsnippet 并不能生成对 SEO 友好的本地化 URL。如果目标包括获取自然搜索流量，这一点就尤为重要。

该模型最适合希望在不修改应用程序代码的情况下实现多语言页面的团队。当语言会影响路由或业务逻辑时，该模型则不太适用。此外，由于翻译后的内容仍与该服务绑定，因此需要保持订阅处于有效状态。

选择合适的 Angular 国际化的实现方案

Angular 国际化的正确方法取决于您的应用在实际中如何处理语言。

编译时国际化（i18n）优先考虑性能和稳定性，而运行时库则侧重于用户界面内的灵活性。外部工具虽然省去了大部分实现工作，但将控制权转移到了代码库之外。

选择 @angular/localize 当运行时性能至关重要，且您的团队习惯在持续集成（CI）中管理独立的本地化构建时。当语言切换可通过导航实现，而非在应用内部进行时，该方案最为适用。

当用户需要在无需刷新页面即可切换语言，且您希望采用一种广泛使用的运行时方案时，请选择 ngx-translate。对于 Ionic 项目和小型 Angular 应用而言，这是最合适的选择。

当您需要运行时切换功能，且大型应用需要更强大的架构时，请选择 Transloco。它非常适合服务器端渲染（SSR）环境，也适合希望使用带作用域、延迟加载的翻译文件的团队。

Weglot 您的目标是构建多语言网站，且不想在 Angular 代码库中添加翻译逻辑，请选择Weglot 。它最适合内容分发和快速上线，但不适用于需要根据语言调整 TypeScript 行为的应用程序。

{{demo-banner}}