Syntax Error in Angular App: Unexpected token <
AngularAngular CliAngular Problem Overview
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..
Angular Solutions
Solution 1 - Angular
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.
Solution 2 - Angular
I had the same issue:
-
I ran the command
ng build --aot --prod
-
Everything compiled without an error
-
I deleted all the files on the server and copied it all across via FTP(FileZilla) to a windows Azure server
-
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.
Solution 3 - Angular
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.
Solution 4 - Angular
The problem is with the <base href="/"> part of index.html file, it seems angular generates build file inside dist/{yourProjectName}/ but the index.html files goes through the dist/ for build files. Now you have 2 options:
-
Change the
<base href="/">part of theindex.htmlfile to<base href="/dist/{yourProjectName}/">but now you have inconsistency between theng servecommand andng buildand you can't see your project throughng serve. So you have change that part every time! -
The seccond approach that I recommend, is just changing the output path of the project! Go to your
angular.jsonfile of your project and change the"outputPath": "dist/{yourProjcetName}",to"outputPath": "dist/"and don't change thebase href!
Solution 5 - Angular
<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 <".
Solution 6 - Angular
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">
Solution 7 - Angular
I'm totally new to Angular so it may not help or at least seem obvious to a lot of you, but in my case it happened every time I reloaded a page that's not the root page, and it came from the fact that, in my index.html file, the base tag looked like this <base href="./">, I had to remove the . so it looks like this : <base href="/"> .
Solution 8 - Angular
.NET Core solution if you use SpaStaticFile service collection extension and API project for example.
Base href: /
// ConfigureServices
// Correct RootPath to your angular app build, based on angular.json prop
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "App/dist";
});
// Configure
// In order to serve files
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(
Path.Combine(Directory.GetCurrentDirectory(), "App", "dist")),
RequestPath = ""
});
Solution 9 - Angular
I was facing the same issue.
In my case, the main.bundle.js was missing. Copying that file again to the dist folder solved the issue.
One more change that I did was to change the following in the index.html file in the dist -
<base href=".">
To
<base href="/">
Solution 10 - Angular
In my case was a mismatch route path in the server file. the route to statics must be the dir containing both the index.html and the assets dir, not the assets dir itself.
app.use(express.static(path.resolve(__dirname,'/dist')));
app.get('/*', function (req, res) {
res.sendFile(path.join(path.resolve(__dirname, '/dist/index.html')));
});
Solution 11 - Angular
I have tried below which is worked for me.
Here
The HTML <base href="xyz"/> specifies a base path for accessing relative URLs to assets such as images, scripts, and style sheets.
For example, given the <base href="/myApp/">, if your app wanted to access css file from the URL such as assets/css/styles.css, it will goes into a server request for myApp/assets/css/styles.css
I have deployed my angular build on Xampp server locally in below two way:
- xampp -> htdocs -> "build files" (including assets, .htaccess, index.html, etc.)
- xampp -> htdocs -> myApp -> "build files" (including assets, .htaccess, index.html, etc.)
For 1.
Now, I wanted my browser to access localhost:80/assets/css/styles.css, and here our assets folder is in root level, thus for access the css we have to put <base href="./"> which access assets folder from root level.
URL Will goes to : localhost:80/assets/css/styles.css
For 2.
i wanted my browser to access localhost:80/myApp/assets/css/styles.css, so here our assets folder is in root level, thus for access the css we have to put <base href="/myApp/"> which access assets folder from inside the myApp.
URL Will goes to : localhost:80/myApp/assets/css/styles.css
Solution 12 - Angular
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.
Solution 13 - Angular
I have a webapi project and angular, after trying different ways, following resolved the redirection issue for me
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
//For angular url rewriting
app.Use(async (context, next) =>
{
await next();
if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
{
context.Request.Path = "/index.html";
await next();
}
})
.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new List<string> { "index.html" } })
.UseStaticFiles();
app.UseAuthentication();
app.UseMvc();
}
Solution 14 - Angular
You can try change the base tag from <base href="/"> to <base href="/project-app/"> inside index.html file.
Solution 15 - Angular
node server : server.js
const express = require('express');
const app = express();
const path = require('path');
const port = process.env.PORT || 3000;
const pathDeploy = path.join(__dirname, 'dist', 'oursurplus');
app.use(express.static(pth));
app.listen(port, () => {
console.log(`running on port ${port}`);
});
app.get('/*', (req, res) => {
res.sendFile(path.join(pathDeploy, 'index.html'));
});
package.json must have the script:
scripts: {
"build": "ng build --prod --baseHref=\"./\""
}
Solution 16 - Angular
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
...
Solution 17 - Angular
In my case the <!--...--> was the cause of the error
Solution 18 - Angular
I had the same issue, very irritating. I tried several of the solutions found here, but none worked.
Adding the following in the Application Settings blade of the application in the Azure portal did the trick -
App Setting Name: WEBSITE_NODE_DEFAULT_VERSION Value: 6.9.1
> Before and after - excerpts from the deployment log.
remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 0.10.40.
remote: Selected npm version 1.4.28
remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 6.9.1.
remote: Selected npm version 3.10.8
Solution 19 - Angular
With a little change in the .htaccess file i managed to fixed this problem.
I changed some lines from https://angular.io/guide/deployment#fallback to the following:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html
Solution 20 - Angular
In my case it was the result of incorrect input of UTF-8 characters.
Syntax was:
<component [inputField]="Artikelns Mått"></component>
First it was solved by just replacing the å with a. But, thats not really a solution.
What solved it was adding '' around the text.
<component [inputField]="'Artikelns Mått'"></component>
Error:
Error: Template parse errors:
Parser Error: Unexpected token 'å' at column 11 in [Artikelns mått] in CadComponent@25:28 ("
<div class="col-md-4">
<lte-box>
<lte-box-header [ERROR ->][headerTitle]="Artikelns mått"></lte-box-header>
<lte-box-body>
<table "): CadComponent@25:28
Parser Error: Lexer Error: Unexpected character [å] at column 12 in expression [Artikelns mått] at column 13 in [Artikelns mått] in CadComponent@25:28 ("
<div class="col-md-4">
<lte-box>
<lte-box-header [ERROR ->][headerTitle]="Artikelns mått"></lte-box-header>
<lte-box-body>
<table "): CadComponent@25:28
at SyntaxError.BaseError [as constructor] (webpack:///./@angular/compiler/src/facade/errors.js?:31:27) [<root>]
at new SyntaxError (webpack:///./@angular/compiler/src/util.js?:163:16) [<root>]
at TemplateParser.parse (webpack:///./@angular/compiler/src/template_parser/template_parser.js?:170:19) [<root>]
at JitCompiler._compileTemplate (webpack:///./@angular/compiler/src/jit/compiler.js?:381:68) [<root>]
at eval (webpack:///./@angular/compiler/src/jit/compiler.js?:264:62) [<root>]
at Set.forEach (<anonymous>) [<root>]
at JitCompiler._compileComponents (webpack:///./@angular/compiler/src/jit/compiler.js?:264:19) [<root>]
at createResult (webpack:///./@angular/compiler/src/jit/compiler.js?:146:19) [<root>]
at Zone.run (webpack:///./zone.js/dist/zone.js?:112:43) [<root> => <root>]
at eval (webpack:///./zone.js/dist/zone.js?:534:57) [<root>]
at Zone.runTask (webpack:///./zone.js/dist/zone.js?:150:47) [<root> => <root>]
at drainMicroTaskQueue (webpack:///./zone.js/dist/zone.js?:432:35) [<root>]
Solution 21 - Angular
I found this to error to be a broad instance of many possible errors. In our application that was using Jhipster generated project, We added google analytics in the index.html. We also tried matomo analytics. Inside the index.html we have script tags as well.
The error was that someone commented out a line of code in our google analytics snippet.
here is an example of the code where the error lived:
<script>
(function (b, o, i, l, e, r) {
b.GoogleAnalyticsObject = l;
b[l] || (b[l] =
function () {
(b[l].q = b[l].q || []).push(arguments)
});
b[l].l = +new Date;
e = o.createElement(i);
r = o.getElementsByTagName(i)[0];
e.src = '//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e, r)
}(window, document, 'script', 'ga'));
ga('create', '123123'); <! --
ga('send', 'pageview');
-->
</script>
Notice the last three lines where there was <! --. That cause the error for us.
In index.html script tag, to comment out a line we use \\ double back slash. Someone may have attempted to comment this line out using <!-- --> .
This is tricky cause it could have been anywhere.
But its always a good place to start in the index.html
Hope this helps a little.
Solution 22 - Angular
I had the same problem and realized that I had changed the app.use(express.static(static folder)) statement after my last deploy causing this same unexpected token < error.
Make sure that your app.use(express.static(static folder)) statement contains the appropriate static folder where your js and css files are located and relative to where you are running node.
If you are using Angular and precompiling (ng build --prod) your front-end Angular code into a dist folder containing these files and not putting your back-end node files in the same folder (e.g a separate backend), then you may need to include the correct path as well.
For my example, I have my precompiled (ng build --prod) Angular files in /dist right off the project directory. Note that I also changed angular.json to be "outputPath": "dist" prior to precompiling to ensure this is where the precompiled Angular code would go. My server.js file that just starts the node server is at the project root, but my app.js file that contains the app.use(express.static(static folder)) statement and all the rest of my back-end node code is in a folder called /backend. The following statements both work for me in this case to correctly find the js and css files and eliminate the unexpected token < error:
app.use(express.static(path.join('dist')));
or
app.use(express.static(path.join(__dirname, '../dist')));
Both statements appropriately direct node to look for the static js and css files in the /dist folder.
Solution 23 - Angular
Judging by the number of answers, this issue can show up for a host of reasons.
I'll add mine incase it helps others. In my case, I was trying to directly hit a url that I wanted to forward back to index.html and let Angular handle it.
So if I went to http://example.com/some-angular-route/12345
In the network tab, I noticed that it was serving the scripts with the angular route in the url (http://example.com/some-angular-route/runtime.js)
Naturally, since nginx couldn't find /some-angular-route/runtime.js, it fell back to serve to index.html since I set try_files (in the nginx config) to test the $uri first and if couldn't find it, serve index.html. So essentially:
- index.html has a script tag that tries to load
http://example.com/some-angular-route/runtime.js - fallback in nginx config serves index.html when it can't resolve the file
- contents of runtime.js are now same as index.html which starts with
<html> - Since that isn't valid js, you get
Uncaught SyntaxError: Unexpected token <
So how do we get /some-angular-route/ out of the url for runtime.js? We have to make sure you have the base-href set to /. You can do this from the cli with the flag --base-href=/
That flag will add some-angular-route but load a file like runtime.js (which is a relative url) from /.
Solution 24 - Angular
After ng build go to dist/your project folder say 'something'. Then open the index.html file and change the base URL, which is
If you put your project folder on nginx or apache then tour base URL should be
<base href="http://localhost/something/">
and in my case, version of Angular is: 7.1.4
Solution 25 - Angular
I was facing this issue because I had generated the components but the routing was not proper or had not done with routing, so I think any of you gets this error first of all, check have you left something incomplete.
For me it was because of routing.
Solution 26 - Angular
in your index.ts change
<!--doctype html-->
<!DOCTYPE html>
remember... The declaration is NOT case sensitive. check the following link
Solution 27 - Angular
the solution for me was: in index.html
<base href="./">
Solution 28 - Angular
I had the same problem cause I had used --base-href and --deploy-url with same parameters. like this:
ng build --base-href /spo/ --deploy-url /spo/
When I removed --deploy-url flag everything start to working fine.
Solution 29 - Angular
Just add after of / the folder name of you project just like said Gerardo Tarragona.
Example:
/myProject
Regards
Solution 30 - Angular
For a quick workaround though (WHICH IS DEFINITELY NOT RECOMMENDED AND NOT A GOOD PRACTICE) you can build in non prod mode. Try ng build only.
Solution 31 - Angular
I also had the same problem a couple of times, I solved it this way:
Build the project with a user other than root (ubuntu - normaluser)
root$ chown -R ubuntu:ubuntu my-project-folder/
ubuntu$ cd my-project-folder/
ubuntu$ npm install
ubuntu$ ng build -xxx params xx etc
In production server show nginx user :
root$ grep -rh user /etc/nginx/*
user www-data; # in my case
Now move or replace my-project-folder
root$ mv my-project-folder/ /var/www/awesome.com
And change permissions to nginx user
root$ chown -R www-data:www-data /var/www/awesome.com
(Y)
Solution 32 - Angular
Step 1: Build Project with following command Ref:
ng build --aot --prod --output-hashing none
Step 2: Add dist folder to code versioning/on server
git add /dist/* -f
Step 3: Checkout build on server and try to refresh page.
Solution 33 - Angular
For me, the problem cause was permissions of the /assets directory after copying the files genrated in /dist/* to the production machine. The /assets directory was copied over, but upon copying, the permissions on it were being set like this:
drwx------ 4 admin admin 4096 Feb 21 08:58 assets/
I needed to chmod -R a+rx assets to get it to look like this:
drwxr-xr-x 4 admin admin 4096 Feb 21 08:58 assets/
And then everything worked perfectly because the web server user could access files in the directory.
The problem here is that (as other people on this question have stated) the problem is really a "file not found" error that's returning a 200 status code. So the browser is requesting a file in /assets, layout-helpers.js in my case, not finding it, and returning the contents of index.html, which the browser then tries to interpret as a JavaScript file, resulting in the contents being returned not being valid JavaScript.
The problem was visible in the web server error logs. It's just be the last I would look for what seems like a JavaScript error, so I wasted a good amount of time looking elsewhere.
Fixing the directory permissions fixed everything.
This was my resolution, hopefully this helps someone else.
Solution 34 - Angular
In my case, I just had to do a 'hard refresh' of the page to clear its cache (using Chrome under Linux it's done by pressing ctrl + F5). After that, everything worked fine again.
Cheers,