Unexpected token < in first line of HTML
JavascriptHtmlAngularjsSyntax ErrorUncaught ExceptionJavascript Problem Overview
I have an HTML file :
<!DOCTYPE HTML>
<html lang="en-US" ng-app="Todo">
<head>
<meta charset="UTF-8">
<title>DemoAPI</title>
<meta name="viewport">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<link rel="stylesheet" href="./Client/css/styling.css" />
<script type="text/javascript" src="core.js"></script>
</head>
The error says:
Uncaught SyntaxError: Unexpected token < core.js: 1
It shows the error at <!doctype html> of the app.html.
core.js looks like this:
angular.module('Todo', [])
.controller('mainController', function($scope, $http)
{
$scope.formData = {};
// get all and show them
$http.get('/musicians')
.success(function(data) {
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
//get with an id
$scope.getOneTodo = function() {
$http.get('/musicians' + id)
.success(function(data) {
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
// send the text to the node API
$scope.createTodo = function() {
$http.post('/musicians', $scope.formData)
.success(function(data) {
$scope.formData = {}; // clear the form
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
})
};
// delete
$scope.deleteTodo = function(id) {
$http.delete('/musicians' + id)
.success(function(data) {
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};
/*
$scope.updateTodo = function(id) {
$http.delete('/musicians' + id)
.success(function(data) {
$scope.todos = data;
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
};*/
});
It also gives me Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=Todo&p1=Error%3A%2…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)
Besides, in console, when I click at core.js, it shows the contents of app.html and name it core.js.
Here is the snapshot:
Also, as in the image, when I click index.html, it shows app.html. However, I do not have any file that is named index.html and I load app.html by default instead of index.html.
I have tried adding/removing type="text/javascript" but no help with that either.
Also, status 200 is returned on get request for core.js.
What might be wrong?
Javascript Solutions
Solution 1 - Javascript
Your page references a Javascript file at /Client/public/core.js.
This file probably can't be found, producing either the website's frontpage or an HTML error page instead. This is a pretty common issue for eg. websites running on an Apache server where paths are redirected by default to index.php.
If that's the case, make sure you replace /Client/public/core.js in your script tag <script type="text/javascript" src="/Client/public/core.js"></script> with the correct file path or put the missing file core.js at location /Client/public/ to fix your error!
If you do already find a file named core.js at /Client/public/ and the browser still produces a HTML page instead, check the permissions for folder and file. Either of these might be lacking the proper permissions.
Solution 2 - Javascript
In my case I got this error because of a line
<script src="#"></script>
Chrome tried to interpret the current HTML file then as javascript.
Solution 3 - Javascript
I experienced this error with my WordPress site but I saw that there were two indexes showing in my developer tools sources.
[Chrome Developer Tool Error][1] [1]: https://i.stack.imgur.com/YbpgZ.jpg
So I had the thought that if there are two indexes starting at the first line of code then there's a replication and they're conflicting with each other. So I thought that then perhaps it's my HTML minification from my caching plugin tool.
So I turned off the HTML minify setting and deleted my cache. And poof! It worked!
Solution 4 - Javascript
Check your encoding, i got something similar once because of the BOM.
Make sure the core.js file is encoded in utf-8 without BOM
Solution 5 - Javascript
Well... I flipped the internet upside down three times but did not find anything that might help me because it was a Drupal project rather than other scenarios people described.
My problem was that someone in the project added a js which his address was: <script src="http://base_url/?p4sxbt"></script> and it was attached in this way:
drupal_add_js('',
array('scope' => 'footer', 'weight' => 5)
);
Hope this will help someone in the future.
Solution 6 - Javascript
We had the same problem sometime ago where a site suddenly began giving this error. The reason was that a js include was temporarily remarked with a # (i.e. src="#./js...").
Solution 7 - Javascript
I had this problem in an ASP.NET application, specifically a Web Forms.
I was forcing a redirect in Global.asax, but I forgot to check if the request was for resources like css, javascript, etc. I just had to add the following checks:
VB.NET
If Not Response.IsRequestBeingRedirected _
And Not Request.Url.AbsoluteUri.Contains(".WebResource") _
And Not Request.Url.AbsoluteUri.Contains(".css") _
And Not Request.Url.AbsoluteUri.Contains(".js") _
And Not Request.Url.AbsoluteUri.Contains("images/") _
And Not Request.Url.AbsoluteUri.Contains("favicon") Then
Response.Redirect("~/change-password.aspx")
End If
I was forcing logged users which hadn't change their passwords for a long time, to be redirected to the change-password.aspx page. I believe there is a better way to check this, but for now, this worked. Should I find a better solution, I edit my answer.
Solution 8 - Javascript
For me this was a case that the Script path wouldn't load - I had incorrectly linked it. Check your script files - even if no path error is reported - actually load.
Solution 9 - Javascript
I had the same issue. I published the angular/core application on iis.
To change the Identity of the application pool solved my issue. Now the Identity is LocalSystem
Solution 10 - Javascript
I also faced same issue.
In my case when I changed script attribute src to correct path error got fixed.
<script src="correct path"> </script>
Solution 11 - Javascript
If someone around still have this issue as I had. Try adding this line of code to your header.
<base href="/" />
It will align your html file to the static directory on Nodejs you are setting.