CODEWITHSUNDEEP
jsonangularwebpack
Sami-L
Sami-L

Reputation: 5705

Angular 6 - Unexpected token in JSON at position 0

My Angular 5 project was working without issues, just after having updated it to version 6, it stopped building using ng build due to the next:

ERROR in ./src/app/assets/i18/en.json Module parse failed: Unexpected token in JSON at position 0 You may need an appropriate loader to handle this file type.

here is my json file:

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

Most solutions on the web are talking about CopyWebpackPlugin but the project doesn't use any Webpack configuration file.

then, following this link I tried to make the json as an array:

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

But got the following error, despite the file contains 16 lines.

Unexpected token : in JSON at position 24

Any idea ?

Upvotes: 2

Views: 7082

Answers (3)

T. Shashwat
T. Shashwat

Reputation: 1165

Hope you have resolved the issue but still if you want some minor changes you can try adding "id" to objects in array as below, I Tried this in my CLI project on Angular 6 while performing CURD operation in JSON file.

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

Upvotes: 0

Sami-L
Sami-L

Reputation: 5705

Inspired by @AndrewJuniorHoward, found that while upgrade process, all the json files were encoded to UTF-8-BOM instead of UTF-8, that's why Angular was unable to load them during build. In Visual Studio code, I just created empty files, pasted in them the content of the old json files and then overwritten them, and all worked perfectly.

Upvotes: 5

Andrew Howard
Andrew Howard

Reputation: 3072

Resave the angular.json file as UTF8. There seems to be a recent problem with upgrading to Angular 6 regarding this.

Upvotes: 3

Related Questions