angular - Angular 项目的 l10n 和 i18n 的最佳实践是什么？

Question

我正在开发一个有 2 种语言的项目:英语和法语。
我需要本地化两种语言的内容。例如，英语和法语的页眉和页脚中的不同内容。页面上的多语言内容(页面标题、页面正文等)也将通过管理面板进行管理。
我需要向 URL 添加语言环境。各种语言的 URL 结构是相同的。
例如:

site.com/en/about

site.com/fr/about

site.com/en/contact

site.com/fr/contact

Official Angular docs建议将单独的 Angular 项目构建和部署到单独的语言文件夹中(在我的例子中:“en”和“fr”)。这将阻止缓存网站 Assets ，用户在切换到另一种语言时必须加载所有内容。
而且我还需要根据语言环境在本地运行/启动一个单独的项目。例如:

ng serve --configuration=en
ng serve --configuration=fr --port 4201

此外，每次更新语言字符串时，我都需要运行 CLI 命令:

ng extract-i18n --output-path src/locale

设置对我来说似乎有点复杂。当我要添加另一种语言时，它会更加复杂。
有没有更好/更简单的方法来管理具有本地化 (l10n) 和国际化 (i18n) 的多语言 Angular 项目？
我需要通过单击来添加一个按钮，例如，URL 将从“/en/about/”更改为“/fr/about/”，反之亦然。

Answer 1

Transloco是我使用过的针对 Angular 的功能更丰富且文档齐全的 i18n/i10n 解决方案之一。
我不确定为什么他们从自述文件中删除了功能比较，但是 here they've outlined how it stacks up against other solutions .
从您提到的内容中脱颖而出的一些事情:

语言翻译在运行时从静态 JSON Assets 延迟加载。因此，应用程序加载一次并可以即时切换语言。

只有一个 Angular 项目，所以缓存工作得很好。

切换语言时用户无需重新加载。

新语言就像添加一个新的 JSON 文件一样简单。

I18n and l10n 支持。

我不知道有一个内置的解决方案可以让路线包含当前语言。不过，这当然是可行的。 Here is a Stackblitz example.

(轶事:我们的团队曾经使用 ngx-translate ，但由于有关 ngx-translate's future 的问题而迁移到 Transloco。