Angular 6 - Unexpected token in JSON at position 0

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 ?

The first json is valid, the second one (the array is invalid). Are you sure the problem is here. Use this validator https://jsonlint.com/ — lealceldeiro, Jul 10 '18 at 15:38
I agree, your JSON is perfectly valid the way it was originally. This is likely something to do with your Angular.json configuration. Also just an FYI when you get an error that says `at postion 24...` it literally means at character position 24 , not line 24. — Narm, Jul 10 '18 at 15:56
@Narm the angular.json file was generated automatically while upgrade process. — Sami-L, Jul 10 '18 at 16:05
@lealceldeiro you're right the second json is not valid, thanks for the link. — Sami-L, Jul 10 '18 at 16:06
What package are you using to handle localization, `@ngx-translate`? — Narm, Jul 10 '18 at 16:35

score 5 · Accepted Answer · answered Jul 10 '18 at 16:41

5

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.

answered Jul 10 '18 at 16:41

Sami-L

5,553
18
59
87

Nice, glad you were able to solve it. Good info to know for future reference! – Narm Jul 10 '18 at 16:45

score 3 · Answer 2 · answered Jul 10 '18 at 15:38

3

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

answered Jul 10 '18 at 15:38

Andrew Howard

2,818
5
33
59

1

Open up angular.json in notepad ++. Then under encoding tab, there should be a "Encode as UTF-8". This just sounds like a problem with the angular.json rather than your "en.json" file to me. – Andrew Howard Jul 10 '18 at 15:46

score 0 · Answer 3 · answered Jul 25 '18 at 10:02

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

Angular 6 - Unexpected token in JSON at position 0

3 Answers3