angular.min.js:1 Uncaught SyntaxError: Unexpected token <
Posted
技术标签:
【中文标题】angular.min.js:1 Uncaught SyntaxError: Unexpected token <【英文标题】： 【发布时间】：2018-02-04 06:34:22 【问题描述】：我正在使用 Angular js 制作一个简单的项目。
我在我的 chrome 控制台中收到以下错误消息。
Uncaught SyntaxError: Unexpected token <
bootstrap.min.js:1 Uncaught SyntaxError: Unexpected token <
jquery.min.js:1 Uncaught SyntaxError: Unexpected token <
app.js:1 Uncaught ReferenceError: angular is not defined
at app.js:1
以下是我的main.html
<!Doctype html>
<html ng-app="ContactApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contacts</title>
<base href="/" />
<link rel="stylesheet" href="src/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Contacts: message</h1>
</div>
</div>
<script type="text/javascript" src='bower_components/jquery/dist/jquery.min.js'></script>
<script type="text/javascript" src='bower_components/dist/js/bootstrap.min.js'></script>
<script type="text/javascript" src='bower_components/angular/angular.min.js'></script>
<script src="src/app.js"></script>
</body>
</html>
以下是我的 server.js 文件
const express = require("express");
var app =express();
app.use(express.static("./public"))
.get("*",function(req,res)
res.sendfile("public/main.html");
)
.listen(3000);
以下是我的 app.js 文件
var angularApp = angular.module("ContactApp",[]);
angularApp.run(function($rootScope)
$rootScope.message ="Hellow From Angular App.js";
);
我的js文件的系统目录结构
我的 VSCodeOnline 主管结构
我的浏览器输出与控制台
我的尝试
我认为可能会有一些路径问题，所以我简化了路径并创建了一个 lib 文件夹并将这三个 js 文件复制到该目录中，但仍然没有工作。我可以肯定的是，因为我安装了所有这些 js 库使用凉亭，这就是我遇到这些问题的原因。 这个问题背后的真正原因是什么以及如何解决这个问题。我在 *** 上尝试过各种其他类似问题的解决方案，但没有奏效。
那么是否有一些解决方案，或者我应该始终只使用 CDN 吗？
更新
我的三个js文件
Angular.min.jsbootstrap.min.jsjquery.min.js
【问题讨论】：
你放错了你的 jquery.js 和 bootstrap.js 文件只是反向（上下）它 只是这样做了，但没有用 注释你的脚本 bootstrap.js 和 jquery.js 文件并告诉我你的控制台说什么（仅用于调试） 可能是您的.js 文件不存在，而您的 HTTP 服务器正在提供 404 页面或类似的东西
@ChaitanyaGhule 我评论说所有错误都消失了，但是因为我没有评论 app.js 脚本所以它说 angular 没有在 app.js:1 中定义
【参考方案1】：
您可能错误地使用了 express 静态中间件。 https://expressjs.com/en/starter/static-files.html
您使用 express 静态中间件将“public”的内容设置为静态文件，如下所示：
app.use(express.static("./public"))
这假设在您的节点进程运行的同一目录中，有一个名为“public”的文件夹。如果公共内部有一个名为image.jpg 的文件，那么您只需通过<img src="image.jpg> 来访问它。
但是，当您在服务器上加载脚本时，您会尝试从名为“bower_components”的文件夹中获取它们。我假设凉亭组件不在您的公用文件夹中。
<script type="text/javascript" src='bower_components/jquery/dist/jquery.min.js'></script>
由于您的服务器在您的公用文件夹中找不到脚本，因此它默认为下一行，告诉它如果没有被其他任何东西捕获，则发送 main.html。
.get("*",function(req,res)
res.sendfile("public/main.html");
)
.listen(3000);
问题是浏览器期待一个 js 文件，但得到一个 html 文件，其中很可能有一堆“
尝试转到localhost:3000/fjdlsfjd.js，您应该会看到它仍然为您的 main.html 提供服务。
解决此问题的一种方法可能是同时提供bower_components 文件夹。
app.use(express.static("relative/path/to/bower_components"))
并更改 src 属性以反映此更改
src="jquery/dist/jquery.min.js"
或者您可以将每个要静态提供的文件移动到您的公共目录中。
将静态中间件想象成类似
app.get("file.ext", func( req, res)
res.sendFile("/path/to/file.ext");
)
给定目录中的每个文件除外。
【讨论】：
这是完美且解释最精美的答案。谢谢兄弟....非常感谢确实。以上是关于angular.min.js:1 Uncaught SyntaxError: Unexpected token <的主要内容，如果未能解决你的问题，请参考以下文章
Uncaught (in promise)：消息端口在收到响应之前关闭
出现错误 - Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互
AngularJS Uncaught SyntaxError: Unexpected token :