我正在使用 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 Director 结构 
我的浏览器控制台输出 
我的尝试
我认为可能会有一些路径问题，所以我简化了我的路径并创建了一个 lib 文件夹并将这三个 js 文件复制到该目录但仍然没有用。我可以肯定的是，因为我安装了所有这些 js 库使用 bower 这就是我遇到这些问题的原因。 这个问题背后的真正原因是什么以及如何解决这个问题。我在 stackoverflow 上针对类似问题尝试了各种其他解决方案，但没有奏效。
那么有什么解决办法吗？还是我应该只使用 CDN？
已更新
我的三个js文件
最佳答案
您可能错误地使用了 express 静态中间件。 https://expressjs.com/en/starter/static-files.html
您使用 express static 中间件将“public”的内容设置为静态文件，如下所示:
app.use(express.static("./public"))
这假设在您的 Node 进程运行的同一目录中，有一个名为“public”的文件夹。如果 public 中有一个名为 image.jpg 的文件那么您只需通过执行 <img src="image.jpg> 即可访问它.
但是当您在服务器上加载脚本时，您会尝试从名为“bower_components”的文件夹中获取它们。我假设 Bower 组件不在您的公共(public)文件夹中。
<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 属性以反射(reflect)此更改
src="jquery/dist/jquery.min.js"
或者您可以将要静态提供的每个文件移动到您的公共(public)目录中。
把静态中间件想象成做类似的事情
app.get("file.ext", func( req, res) {
res.sendFile("/path/to/file.ext");
})
给定目录中的每个文件除外。
关于javascript - Angular .min.js :1 Uncaught SyntaxError: Unexpected token <，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45894442/