Question

我的Angular 5项目没有问题，就在将其更新到版本6之后，由于下一个原因，它停止使用ng build进行构建：

./src/app/assets/i18/en.json中的
ERROR模块解析失败：意外 JSON中位于位置0的令牌。您可能需要适当的加载程序处理此文件类型。

这是我的 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

有什么想法吗？

Answer 1

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

Answer 2

将angular.json文件另存为UTF8。与此相关的升级到Angular 6似乎是一个新问题。

Answer 3

希望您已经解决了该问题，但是仍然希望进行一些较小的更改，您可以尝试将“ id”添加到数组中的对象，如下所示，我在Angular 6的CLI项目中尝试了此操作，同时在JSON文件中执行CURD操作。 / p>

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

Angular 6-JSON在位置0

3 个答案: