Syntax Error in Angular App: Unexpected token <

Question

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 pr

Answer 1

Got this error as well using angular with express.

I guess when you build an angular project the project is stored in 'dist/the-app' not just 'dist' so this solved my problem on express.

// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist/the-app')));

for me, this error was due to not setting the proper path of the built application.

Answer 2

In my experience i'm add other assets to wwwroot is conflicted to detect static base address for asp.net core.

For example:

wwwroot
      |--> assets 
                  |---> ckeditor

Is conflict with angular -> src -> assets and show this error

Uncaught SyntaxError: Unexpected token < inline.1a152b6….bundle.js:1
...

Answer 3

It depends on the server, you are using. For example with Apache, you set the .htaccess file to a relative path on your drive, where your app is located with RewriteBase. Also set the <base href=""> accordingly.

With node, the

app.use(express.static(__dirname + '/dist'));

should go before app.get.

Check also, that the build had no errors and all files were copied to dist.

Answer 4

<meta http-equiv="Cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">

add above lines to index.html

Reason: Chrome caches the index.html so the hash in main.hash.js does not get updated and we get the "unexpected token error <".

Answer 5

I solved by changing in index.html

<base href="/">

to

<base href=".">

or you can set the exact path to the folder that contains your index.html:

<base href="/path/to/index-folder">

Answer 6

In my case the <!--...--> was the cause of the error