节点/角度应用程序未捕获的语法错误：意外的令牌 <答案

【问题标题】：Node / Angular app Uncaught SyntaxError: Unexpected token <节点/角度应用程序未捕获的语法错误：意外的令牌 <
【发布时间】：2015-10-08 08:24:57
【问题描述】：

我正在关注this node/angular tutorial 并收到以下错误：

我正在通过节点引导我的应用程序，它呈现索引页面：

module.exports = function(app) {

    app.get('*', function(req, res) {
        res.sendfile('./public/index.html');
        ...
    });

呈现：

<html ng-app="DDE">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>

    <script src="js/app.js"></script>
    <script src="js/controllers/main.js"></script>

</head>
<body>
    This is the index page
    <div ng-view></div>

我希望 Node 来处理初始页面加载，而 Angular 来处理其余的路由。问题就在这里：我的角度路由似乎不起作用。我在其中放了一个 self-exec fn run() 进行测试，但它没有被调用。

我只是想测试显示testpage.html 模板：

app.js 文件：

angular
    .module('DDE', [
        'ngRoute'
    ])
    .config(['$routeProvider',
        function($routeProvider) {
            $routeProvider.
                when('/test', {
                    run : (function() {
                        alert('hit');
                    })(),
                    templateUrl: '../html/partials/testpage.html'
                }).
                otherwise({
                    redirectTo: '/test'
                });
        }
    ]);

角度误差不是很有帮助。我不确定Unexpected token < 是什么意思，因为我找不到在哪里添加了额外的<。

编辑：

app.get('/', function(req, res) {
    res.send('./public/index.html'); 
});

当路径正确时，它应该能够在 bower 组件中找到东西：

root/bower_components/angular/angular.js
root/bower_components/angular-route/angular-route.js

【问题讨论】：

Unexpected token < 表明 angular.js 是 HTML 文档，而不是 JavaScript 文件。检查您提供的服务是您认为为请求提供的服务。
app.get('*', function(req, res) { res.sendfile('./public/index.html'); 将为每个请求发送index.html 到服务器；对 .js 文件的请求、对 .jpg 或 .png 文件的请求、一切。
@Claies 好的，我已将其更改为 app.get('/', 和 res.send('./public/index.html');，请参见上文
好吧，那么您还需要一个快速命令来发送 .js 文件、任何图像文件等。通过此更改，您不再为这些请求发送 index.html发送任何东西。
@Claies 我很困惑。如果 node 正在提供 index.html，并且这个 html 文件包含对它需要的 js 文件的引用/请求，为什么我需要一个额外的 express 命令？

标签： javascript angularjs node.js

【解决方案1】：

通过将我的 server.js 文件从 DIST 目录移动到上面的目录，我能够解决我的意外令牌问题。

所以我的文件夹/文件结构如下所示：

webroot - 根文件夹
- server.js
- dist（文件夹）
  - 浏览器（子文件夹）
  - 服务器（子文件夹）

【讨论】：

【解决方案2】：

您在服务器上的应用程序文件中缺少一些设置来处理向服务器发出的所有请求。这是一个基本的示例工作 express 文件，您可以对其进行修改以适应您的环境：

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/bower_components', express.static(__dirname + '/../bower_components'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

此文件使用express.static 来提供特定目录中的任何内容，无论名称或类型如何。还要记住，Express use 语句是按顺序处理的，第一个匹配项被接受，第一个匹配项之后的任何匹配项都将被忽略。所以在本例中，如果不是/js、/bower_components、/css 或/partials 目录中的文件，则会返回index.html。

【讨论】：

但是，如果我的 Angular 应用程序文件夹位于 /server 外部的 server.js 文件中的 /public 文件夹服务器中，情况如何？
您好，您知道解决方法吗？ stackoverflow.com/questions/44022938/…
嗨，我不适合我，我遇到同样的问题仍然面临意外令牌
@Codiee 如果您遇到类似的问题，您应该使用您正在使用的堆栈的具体情况创建一个新问题，如果您认为相关，请参考此问题/答案。这个问题和答案已有 2 1/2 年的历史了，现在尝试通过 cmets 解决您当前的问题效率不高，或者该网站的设计目的实际上是如何使用的。
现在，依赖项没有加载，而之前运行 gulp serve 时加载正常。