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

Did you check the real JSON using a service like jsonlint.com? — glepretre
– glepretre, Commented Mar 17, 2014 at 13:46

gentooboontoo · Accepted Answer · 2014-03-21 10:27:14Z

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;
}

edited Mar 21, 2014 at 10:27

answered Mar 18, 2014 at 8:43

gentooboontoo

4,8933 gold badges22 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bookthief Over a year ago

Thanks, can you tell me how I can set the correct response header?

glepretre Over a year ago

@bookthief Which webserver do you use?

gentooboontoo Over a year ago

How do you serve your angular app (how do you launch it) or where is it hosted?

gentooboontoo Over a year ago

I have edited the answer with an example of mime type configuration with Nginx.

Collectives™ on Stack Overflow

Error when getting angular-translate JSON files in angular app

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related