Angular 项目的 l10n 和 i18n 的最佳实践是什么?

What is the best practice for l10n and i18n for Angular project?

我正在开发一个使用两种语言的项目:英语和法语。 我需要将内容本地化为两种语言。例如 header 中的不同内容以及英语和法语的页脚。页面上的多语言内容(页面标题、页面 body 等)也将通过管理面板进行管理。

我需要向 URL 添加语言环境。 URL 结构对于各种语言都是相同的。 例如:

Official Angular docs 建议将单独的 Angular 项目构建和部署到单独的语言文件夹中(在我的例子中:“en”和“fr”)。这将防止网站缓存资产,用户在切换到另一种语言时将不得不加载所有内容。

而且我还需要 run/start 每个语言环境在本地创建一个单独的项目。例如:

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

每次更新语言字符串时,我还需要 运行 CLI 命令:

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

设置对我来说似乎有点复杂。当我要添加另一种语言时,它会更加复杂。

是否有 better/simpler 方法来管理具有本地化 (l10n) 和国际化 (i18n) 的多语言 Angular 项目?

我需要通过单击添加一个按钮,例如 URL 将从“/en/about/”变为“/fr/about/”,反之亦然。

对于 i18n,请查看 ngx-translate。我认为它适合你的需要。 我不知道哪个选项最适合 l10n。

Transloco 是我使用过的 Angular 的功能更丰富、记录更完备的 i18n/i10n 解决方案之一。

我不确定他们为什么从自述文件中删除功能比较,但是 here they've outlined how it stacks up against other solutions。 从你提到的内容中脱颖而出的一些事情:

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

    • 只有一个 Angular 项目,所以缓存工作正常。
    • 用户切换语言时无需重新加载。
    • 新语言就像添加新的 JSON 文件一样简单。
  • I18nand l10n支持.

我不知道是否有内置解决方案可以让 路由 包含当前语言。但是,这当然是可行的。 Here is a Stackblitz example.


(旁白:我们的团队曾经使用 ngx-translate, but migrated to Transloco over questions about ngx-translate's future