admin管理员组

文章数量:1349205

Here is the code of my index.html:

<html>
  <head>
    <meta charset="UTF-8" >
    <title>Index</title>
    <link rel="stylesheet" href="styles/main.css" />
    <link rel="stylesheet" ng-href="bower_ponents/bootstrap/dist/css/bootstrap.min.css" />
 </head>
 <body ng-app="app">


    <div ng-view></div>

    <script src="bower_ponents/angular/angular.min.js"></script>
    <script src="bower_ponents/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_ponents/angular-route/angular-route.min.js"></script>
    <script src="bower_ponents/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script src="scripts/angular/app.js"></script>
    <script src="scripts/angular/controllers.js"></script>
 </body>
</html>

However, it shows the error in return:

bootstrap.min.js:1 Uncaught SyntaxError: Unexpected token <

ui-bootstrap-tpls.min.js:1 Uncaught SyntaxError: Unexpected token <

Is it the problem of my code or bootstrap? I found the error exists when I add 

<script src="bower_ponents/bootstrap/dist/js/bootstrap.min.js"></script>

and 

<script src="bower_ponents/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

into the index.html. Does anyone know the cause of the error? Thanks :)

Here is the code of my index.html:

<html>
  <head>
    <meta charset="UTF-8" >
    <title>Index</title>
    <link rel="stylesheet" href="styles/main.css" />
    <link rel="stylesheet" ng-href="bower_ponents/bootstrap/dist/css/bootstrap.min.css" />
 </head>
 <body ng-app="app">


    <div ng-view></div>

    <script src="bower_ponents/angular/angular.min.js"></script>
    <script src="bower_ponents/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_ponents/angular-route/angular-route.min.js"></script>
    <script src="bower_ponents/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script src="scripts/angular/app.js"></script>
    <script src="scripts/angular/controllers.js"></script>
 </body>
</html>

However, it shows the error in return:

bootstrap.min.js:1 Uncaught SyntaxError: Unexpected token <

ui-bootstrap-tpls.min.js:1 Uncaught SyntaxError: Unexpected token <

Is it the problem of my code or bootstrap? I found the error exists when I add 

<script src="bower_ponents/bootstrap/dist/js/bootstrap.min.js"></script>

and 

<script src="bower_ponents/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

into the index.html. Does anyone know the cause of the error? Thanks :)

  • javascript
  • node.js
  • angular-ui-bootstrap
  • webstorm
Share Improve this question edited Jul 30, 2019 at 10:39 Palle Due 6,3214 gold badges20 silver badges34 bronze badges asked Sep 28, 2016 at 15:51 seeseeskyseeseesky 331 gold badge2 silver badges3 bronze badges 6
  • Have you looked inside the files? Is there something wrong with them? – Hugo G Commented Sep 28, 2016 at 15:55
  • 1 Your webserver is most likely returning a default error message, which is in html. Probably a 404. – tcooc Commented Sep 28, 2016 at 15:56
  • Can you download the JS files by the given URLs using a browser? I think @tcooc is right. That's a HTML response from the server. – Hugo G Commented Sep 28, 2016 at 15:58
  • You say "it shows an error". What is showing an error? When is this error shown? If it is your development environment, you can probably safely configure your development environment to ignore this error. – BPS Commented Sep 28, 2016 at 16:14
  • Thanks you guys, it is the problem of bootstrap.min.js. A whole set of HTML is stored inside the js while the bootstrap is retrieved from bower.... – seeseesky Commented Sep 28, 2016 at 16:18
 |  Show 1 more ment

4 Answers 4

Reset to default 3

Its definitely a problem with the bootstrap file. The line 1 contains '<'.

Try manually opening the files and removing it.

I was getting the same issue with the ASP.Net. All I had to do is to clean the solution and rebuild it.

Solution from Discord discussion: Working with Bootstrap, Angular, React, Vue

The problem occurs because sirv public --single decides to send index.html for any route/resource that doesn't exist in the public directory - Issue with Routing.

You'll know right away that you have a problem when you are requesting, say, an image and you get back 200 text/html response instead of a 404.

The browser will try to parse the index.html content as though it were an image (or script in the case of this bug) and barf out. Even worse is that the cache is now polluted with garbage data for that URL and the only way to fix it is:

  1. Clear the cache or disable the cache pletely. as shown in the Chrome DevTools image below.
  2. Fix any broken/unavailable routes in your Frontend App
  3. Restart your Dev Server

Hope that helps... I know it drove me nuts for a while!

It is because of files' addresses are not true, so make them correct. Based on my addresses:

 correct <link rel="stylesheet" href="./css/bootstrap.rtl.min.css" />

 wrong <link rel="stylesheet" href="/public/css/bootstrap.rtl.min.css" />

 correct  <script src="./js/bootstrap.bundle.min.js"></script>

wrong <script src="/public/bootstrap.bundle.min.js"></script>

本文标签： javascriptUncaught SyntaxError Unexpected token lt when using bootstrap jsStack Overflow

版权声明：本文标题：javascript - Uncaught SyntaxError: Unexpected token &lt; when using bootstrap js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743857449a2551114.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。