angular.min.js:1 Uncaught SyntaxError: Unexpected token <答案

【问题标题】：angular.min.js:1 Uncaught SyntaxError: Unexpected token <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 库使用凉亭，这就是我遇到这些问题的原因。这个问题背后的真正原因是什么以及如何解决这个问题。我在 stackoverflow 上尝试过各种其他类似问题的解决方案，但没有奏效。

那么是否有一些解决方案，或者我应该始终只使用 CDN 吗？

更新

我的三个js文件

Angular.min.js bootstrap.min.js jquery.min.js

【问题讨论】：

你放错了你的 jquery.js 和 bootstrap.js 文件只是反向（上下）它
只是这样做了，但没有用
注释你的脚本 bootstrap.js 和 jquery.js 文件并告诉我你的控制台说什么（仅用于调试）
可能是您的.js 文件不存在，而您的 HTTP 服务器正在提供 404 页面或类似的东西
@ChaitanyaGhule 我评论说所有错误都消失了，但是因为我没有评论 app.js 脚本所以它说 angular 没有在 app.js:1 中定义

标签： javascript jquery angularjs node.js

【解决方案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");
})

给定目录中的每个文件除外。

【讨论】：

这是完美且解释最精美的答案。谢谢兄弟....非常感谢确实。