Angular 客户端语言切换
Angular client-side language switching
背景
我们正在使用 Angular 8.2 开发应用程序。此问题与AngularJs.
无关
问题
我已阅读此处的 Angular 本地化文档：https://angular.io/guide/i18n
但是好像是在构建过程中进行了本地化。应用程序构建后，无法更改。那么，我们如何构建一个 Angular 支持在没有互联网的情况下进行语言切换的应用程序呢？
CDN
我们的应用程序部署在 CDN 后面。 CDN 服务器反向代理 HTML、JavaScript 和 CSS 文件，并将缓存所有传递的文件。服务器端应用程序语言切换不可用。
电子版
并且我们提供了一个基于electron的客户端app。我们需要一次交付应用程序，用户可以在没有互联网的情况下在不同语言之间切换。但是我没有找到解决办法。
域名
您可能会提到我们可以通过切换域来切换语言。但是因为CORS的原因，我们客户端的app域名是有限制的，不能切换。所以只有一个域名可用。
Google Play 商店
我们已经通过 TWA 构建并发布了我们的应用程序到 Google Play 商店。该域已在该应用程序中注册。切换域也会导致再次从商店下载应用程序。
附加信息
应用程序的源代码在这里：https://github.com/AiursoftWeb/Kahla.App
仅供可能的附加信息。不必检查它来回答这个问题。
我们过去遇到过类似的要求，这就是为什么我创建了一个博客 post，内容是将 Angular 中的翻译作为代码（没有库，只有您的代码和项目架构）。
https://medium.com/angular-in-depth/angular-typed-translations-29353f0a60bc
要回答所有的挑战：
CDN:
- 语言突变在路由级别（不是域）
domain.com/language/page
domain.com 可能包含一些重定向逻辑
- 例如，重定向到默认语言或确定它（我们有一个云功能可以根据浏览器请求的语言首选项执行此操作
电子:
- 编译时出现翻译
- 包含不同 i18n 数据的模块随应用程序一起提供，并在需要时延迟加载（但电子可以立即使用，因为它捆绑在一起）
域:
- 同样，使用 "route" 而非域名切换语言
- 示例：
domain.com/en/contact 英语 domain.com/cs/contact 捷克语
- 它很棒，不仅因为cors，还因为SEO和Crawlers
- 路线中最相关的部分在前（语言）
Google Play 商店:
- 和electron一样，捆绑在一起
- 使用路由而不是域
即使您决定不使用基于 "route" 的切换，您也可以将翻译存储在状态管理或包装服务中，并像访问任何其他 "async" 数据一样访问它们通过 async 管道
的模板
第三方:
涉及第 3 方库的其他一些解决方案是 ngx-translate（已弃用）和 Transloco
您可以随申请一起提交包含翻译的文件。
例如。像这样的 translations.json:
{
text: 'this is english',
textid: 123,
language 'GB'
},
{
text: 'это по-английски' ,
textid: 123,
language 'RUS'
},
{...}
由于该文件是您项目的一部分，因此用户无需访问互联网即可切换语言。
这在 Angular 9 及更高版本中已更改。您现在可以只编译一次应用程序，然后在运行时加载特定语言的翻译。不幸的是 Angular 不包含 API 以在运行时获取资源文件，但您必须使用第 3 方附加组件。其中之一是 Soluling's npm package。一旦你使用它，你就可以将应用程序部署到单个 URL 中，它可以服务于任何数量的语言。
我写了一篇 sample 来说明这一点。
背景
我们正在使用 Angular 8.2 开发应用程序。此问题与AngularJs.
无关问题
我已阅读此处的 Angular 本地化文档：https://angular.io/guide/i18n
但是好像是在构建过程中进行了本地化。应用程序构建后，无法更改。那么，我们如何构建一个 Angular 支持在没有互联网的情况下进行语言切换的应用程序呢？
CDN
我们的应用程序部署在 CDN 后面。 CDN 服务器反向代理 HTML、JavaScript 和 CSS 文件，并将缓存所有传递的文件。服务器端应用程序语言切换不可用。
电子版
并且我们提供了一个基于electron的客户端app。我们需要一次交付应用程序，用户可以在没有互联网的情况下在不同语言之间切换。但是我没有找到解决办法。
域名
您可能会提到我们可以通过切换域来切换语言。但是因为CORS的原因，我们客户端的app域名是有限制的，不能切换。所以只有一个域名可用。
Google Play 商店
我们已经通过 TWA 构建并发布了我们的应用程序到 Google Play 商店。该域已在该应用程序中注册。切换域也会导致再次从商店下载应用程序。
附加信息
应用程序的源代码在这里：https://github.com/AiursoftWeb/Kahla.App
仅供可能的附加信息。不必检查它来回答这个问题。
我们过去遇到过类似的要求，这就是为什么我创建了一个博客 post，内容是将 Angular 中的翻译作为代码（没有库，只有您的代码和项目架构）。
https://medium.com/angular-in-depth/angular-typed-translations-29353f0a60bc
要回答所有的挑战：
CDN:
- 语言突变在路由级别（不是域）
domain.com/language/page
domain.com可能包含一些重定向逻辑- 例如，重定向到默认语言或确定它（我们有一个云功能可以根据浏览器请求的语言首选项执行此操作
电子:
- 编译时出现翻译
- 包含不同 i18n 数据的模块随应用程序一起提供，并在需要时延迟加载（但电子可以立即使用，因为它捆绑在一起）
域:
- 同样，使用 "route" 而非域名切换语言
- 示例：
domain.com/en/contact英语domain.com/cs/contact捷克语
- 示例：
- 它很棒，不仅因为cors，还因为SEO和Crawlers
- 路线中最相关的部分在前（语言）
Google Play 商店:
- 和electron一样，捆绑在一起
- 使用路由而不是域
即使您决定不使用基于 "route" 的切换，您也可以将翻译存储在状态管理或包装服务中，并像访问任何其他 "async" 数据一样访问它们通过 async 管道
第三方: 涉及第 3 方库的其他一些解决方案是 ngx-translate（已弃用）和 Transloco
您可以随申请一起提交包含翻译的文件。 例如。像这样的 translations.json:
{
text: 'this is english',
textid: 123,
language 'GB'
},
{
text: 'это по-английски' ,
textid: 123,
language 'RUS'
},
{...}
由于该文件是您项目的一部分，因此用户无需访问互联网即可切换语言。
这在 Angular 9 及更高版本中已更改。您现在可以只编译一次应用程序，然后在运行时加载特定语言的翻译。不幸的是 Angular 不包含 API 以在运行时获取资源文件，但您必须使用第 3 方附加组件。其中之一是 Soluling's npm package。一旦你使用它，你就可以将应用程序部署到单个 URL 中，它可以服务于任何数量的语言。
我写了一篇 sample 来说明这一点。