Question

我正在使用角度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文件复制到该目录中但仍然无法正常工作。我确信是因为我安装了所有这些使用bower的js库就是为什么我遇到这些问题。这个问题背后的真正原因是什么以及如何解决这个问题。我已经尝试过类似问题的stackoverflow上的各种其他解决方案但是没有用。

对此有一些解决方案，还是我应该只使用CDN？

更新

我的三个js文件

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

Answer 1

您可能错误地使用了快速静态中间件。 https://expressjs.com/en/starter/static-files.html

您使用express静态中间件将“public”的内容设置为静态文件，如下所示：

app.use(express.static("./public"))

这假设在运行节点进程的同一目录中，有一个名为“public”的文件夹。如果公共内部有一个名为image.jpg的文件，那么您只需执行<img src="image.jpg>即可访问该文件。

但是当你在服务器上加载脚本时，你会尝试从名为“bower_components”的文件夹中获取它们。我假设bower组件不在你的公共文件夹中。

 <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文件很可能有一堆“＆lt;”在其中并且正在抛出错误。

尝试转到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未捕获的SyntaxError：意外的标记＆lt;

1 个答案: