Error when getting angular-translate JSON files in angular app

Question

I have an angular app with some i18n JSON files. The files work fine- the language of the site is changed perfectly depending on which one is selected. However, I get a funny console error which I can't figure out-

Uncaught SyntaxError: Unexpected token : at en.json: 2

Resource interpreted as Script but transferred with MIME type application/octet-stream

The same error appears in the console for each file.

Is there something wrong with the way my file is structured?

example of data in en.json:

{ 
    "WELCOME" : "Welcome",
    "HOME" : "Home",
    "GO" : "Go",
    "LOGOUT" : "Log Out"
}

Answer 1

There's nothing wrong with your JSON file but, according to the console log, it seems your web server does not set correct response header Content-Type which should be application/json. So your browser tries to interpret your file as a JavaScript file and find an invalid token.

For instance with Nginx, you could use mime type configuration file provided by HTML5-Boilerplate project (https://github.com/h5bp/server-configs-nginx/blob/master/mime.types) and include it into your Nginx configuration:

include /etc/nginx/mime.types;

It contains the following directive setting application/json as content type for JSON:

types {
  application/json                      json;
}