Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Syntax Error in Angular App: Unexpected token <

I have an Angular app which runs perfectly in my local and production environment.. After a tiny change I made, I ran the app locally and it works fine.. Then I built the project and copied the dist folder to the web server. The problem is when I try to access to the app I get the following error in the Chrome Inspector:

Uncaught SyntaxError: Unexpected token < inline.1a152b6….bundle.js:1 Uncaught SyntaxError: Unexpected token < polyfills.1553fdd….bundle.js:1 Uncaught SyntaxError: Unexpected token < vendor.94d0113….bundle.js:1 Uncaught SyntaxError: Unexpected token < main.d6f56a1….bundle.js:1 

So, it seems like it is a misplaced character but in my local environment the app works fine I don't get any warning or error message on the console..

like image 764
Gerardo Tarragona Avatar asked Jul 20 '17 18:07

Gerardo Tarragona


People also ask

How do I get rid of unexpected token error?

This error can occur for a number of reasons, but is typically caused by a typo or incorrect code. Luckily, the SyntaxError: Unexpected token error is relatively easy to fix. In most cases, the error can be resolved by checking the code for accuracy and correcting any mistakes.

Why do I get unexpected token error?

Not follow them throws an error.An unexpected token occurs if JavaScript code has a missing or extra character { like, ) + – var if-else var etc}. Unexpected token is similar to syntax error but more specific. Semicolon(;) in JavaScript plays a vital role while writing a programme.


2 Answers

This is most likely the result of a 404 page or a redirect to a page that serves regular html instead of the expected JavaScript files. (A HTML page starts with <html> or a <!DOCTYPE...>)

Make sure that you have correctly uploaded the files and access the page correctly. You can verify by manually accessing the URL with the browser or look into the network tab of your browser development tools to inspect the response.

like image 74
Thomas Avatar answered Sep 24 '22 08:09

Thomas


I had the same issue:

1) I ran the command

ng build --aot --prod 

2) Everything compiled without an error

3) I deleted all the files on the server and copied it all across via FTP(FileZilla) to a windows Azure server

4) Sometimes I get the error

Unexpected token < 

and other-times not

Yesterday I noticed that the main[hash].js was missing on the server and that Filezilla did not give me an error copying it.

I then tried copying only that file.It did not work. When I removed the hash part from the filename it copies without a problem.

Work-a-round

Run:

ng  build --aot --prod --output-hashing none 

Which works every-time.

So either Filezilla or Windows Server does not allow filenames with a specific length or it does not like certain hashes.

like image 21
Cobus Swart Avatar answered Sep 25 '22 08:09

Cobus Swart