Angular 6 - JSON 中位置 0 的意外标记答案

【问题标题】：Angular 6 - Unexpected token in JSON at position 0Angular 6 - JSON 中位置 0 的意外标记
【发布时间】：2018-07-10 15:28:42
【问题描述】：

我的 Angular 5 项目运行正常，在将其更新到版本 6 后，由于以下原因，它停止使用 ng build 构建：

./src/app/assets/i18/en.json 中的错误模块解析失败：意外位置 0 处的 JSON 中的令牌您可能需要适当的加载器来处理这种文件类型。

这是我的 json 文件：

{
  "app": {
    "Welcome": "Welcome",
    "New": "New"
  },
  "mainMenu": {
    "Home": "Home",
    "Logout": "Logout"
  },
  "pageHeader": {
    "About": "About",
    "Settings": "Settings"
  }
}

网络上的大多数解决方案都在谈论CopyWebpackPlugin，但该项目不使用任何 Webpack 配置文件。

然后，在this link 之后，我尝试将 json 设置为数组：

{
    "menu":[
        "app": {
            "Welcome": "Welcome",
            "New": "New"
        },
        "mainMenu": {
            "Home": "Home",
            "Logout": "Logout"
        },
        "pageHeader": {
            "About": "About",
            "Settings": "Settings"
        }
    ]
}

尽管文件包含 16 行，但出现以下错误。

意外的令牌：在 JSON 中的位置 24

有什么想法吗？

【问题讨论】：

第一个json有效，第二个（数组无效）。你确定问题就在这里。使用这个验证器jsonlint.com
我同意，您的 JSON 完全按照原来的方式有效。这可能与您的 Angular.json 配置有关。当您收到错误消息时，也只是一个 FYI，上面写着 at postion 24... 它的字面意思是在字符位置 24 ，而不是第 24 行。
@Narm angular.json 文件是在升级过程中自动生成的。
@lealceldeiro 你说得对，第二个 json 无效，谢谢你的链接。
你用什么包来处理本地化，@ngx-translate?

标签： json angular webpack

【解决方案1】：

受@AndrewJuniorHoward 启发，发现在升级过程中，所有 json 文件都被编码为 UTF-8-BOM 而不是 UTF-8，这就是 Angular 在构建期间无法加载它们的原因。在 Visual Studio 代码中，我只是创建了空文件，将旧 json 文件的内容粘贴到其中，然后覆盖它们，一切正常。

【讨论】：

很好，很高兴你能解决它。值得了解的好信息，以供将来参考！

【解决方案2】：

将 angular.json 文件重新保存为 UTF8。在这方面升级到 Angular 6 似乎最近出现了问题。

【讨论】：

在记事本++中打开angular.json。然后在编码选项卡下，应该有一个“编码为 UTF-8”。这听起来像是 angular.json 的问题，而不是我的“en.json”文件。

【解决方案3】：

希望你已经解决了这个问题，但如果你想要一些小的改变，你可以尝试将“id”添加到数组中的对象，如下所示，我在 Angular 6 上的 CLI 项目中尝试了这个，同时在 JSON 文件中执行 CURD 操作。

{
    "menu":[
        "app": {
            "id": 1,
            "Welcome": "Welcome",
            "New": "New"
        },
        "mainMenu": {
            "id": 2,
            "Home": "Home",
            "Logout": "Logout"
        },
        "pageHeader": {
            "id": 3,
            "About": "About",
            "Settings": "Settings"
        }
    ]
}

【讨论】：