是否可以在 Ionic 应用程序中使用角度定位

Question

我已经在一个应用程序中配置了角度定位（通过配置文件

angular.json

），该应用程序实际上是一个 Ionic 应用程序。

问题是现在当我尝试运行

capacitor sync

时出现以下错误：

[capacitor] [error] The web assets directory (./www) must contain an index.html file.

这是因为应用程序现在有两个目录，每个翻译版本一个（一个用于英语，称为

en

，另一个用于西班牙语，称为

es

）。

我应该使用 ngx-translate 来代替吗？

Answer 1

您可以将它与 Angular 的 i18n 一起使用，但您需要将生成的所有构建文件复制到您的 www 文件夹中。并且您需要一个单独的index.html才能使其工作。

可能的解决方法

我还没有测试过自己。理论上，你可以通过以下方式让 Angular 的 i18n 工作：

1. 创建一个index.html，将用户路由到正确的区域设置，在这个github问题中，我找到了一个很好的例子。
2. 在与电容器同步之前，将此 index.html 复制到 www 文件夹的根目录。您可以在构建钩子之前使用带有 ionic 的脚本

文件夹结构

/www
--/en
--/fr
--index.html // => Copied by us

权衡

• [+] 使用 Angular 的 i18n，您无需担心运行时丢失翻译。性能也应该稍微好一些，因为我们不需要将任何本地化变量绑定到内存。
• [-] 您需要包含为每个区域设置生成的所有文件夹，这可能会为每个附加区域设置消耗额外的空间。在我们的例子中，额外增加了 3mb，可以忽略不计。
• [-] 每次语言更改时，您都需要重新启动 Angular 应用程序并导航到其他语言环境的根目录。

使用一种语言环境进行单独构建

如果您不需要更改运行时语言，例如，您只想在此应用程序中包含英语。

1. 将

   baseHref

   设置为“/”，
2. 将电容器.config 的 webdir 属性更新为：'www/'

角度.json

      ...
      "i18n": {
        "sourceLocale": "tr",
        "locales": {
          "en-US": {
            "translation": "src/locale/messages.en-US.xlf",
            "baseHref": "/"
          }
        }
      },
      ...

电容.config.ts

  config = {
    ...
    webDir: "www/en-US",
    ...