Angular 6 - Unexpected token in JSON at position 0 - json

Question

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 ?

Answer 1

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.

Answer 2

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

Answer 3

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"
}
]
}