SyntaxError：预期的表达式，在运行 angularJs 和节点时得到 '<'答案

【问题标题】：SyntaxError: expected expression, got '<' while running angularJs and nodeSyntaxError：预期的表达式，在运行 angularJs 和节点时得到 '<'
【发布时间】：2015-09-27 07:08:52
【问题描述】：

我是 AngularJS 的新手，正在尝试运行基本代码。我想使用 nodejs 作为我的服务器。

我的 nodejs 服务器文件如下所示：

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

app.listen(8080);
console.log("App listening on port 8080");

app.get('*', function(req, res) {
        res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

我的 index.html 文件是：

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>

<!-- Meta-Information -->
<!-- etc… -->

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="ACME Inc.">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Vendor: Bootstrap Stylesheets http://getbootstrap.com -->

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Our Website CSS Styles -->
    <link rel="stylesheet" href="css/main.css">

</head>
<body ng-app="WebApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.min.js"></script>

<!-- Our Website Content Goes Here -->

<div ng-include='"templates/header.html"'></div>
<div ng-view></div>


<!-- Vendor: Javascripts -->
<!-- etc… -->

<!-- Our Website Javascripts -->
<script src="js/main.js"></script>

</body>
</html>

header.html

 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
    <!-- etc… -->
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul>
            <li><a href="#/contact">Contact</a></li>
            <li><a href="#/projects">Projects Table</a></li>
            <li><a href="#/about">About</a></li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

main.js

var app = angular.module('WebApp', [
    'ngRoute'
]);

/*
    * Configure the Routes
*/

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when("/", {templateUrl: "partials/home.html",  controller: "PageCtrl"})
    .when("/about", {templateUrl: "partials/about.html",controller: "PageCtrl"})
    .when("/projects", {templateUrl: "partials/projects.html",  controller: "PageCtrl"})
    .when("/contact", {templateUrl: "partials/contact.html",  controller: "PageCtrl"})
    .when("/blog", {templateUrl: "partials/blog.html",controller: "BlogCtrl"})
    .when("/blog/post", {templateUrl: "partials/blog_item.html", controller: "BlogCtrl"})
    // else 404
    .otherwise("/404", {templateUrl: "partials/404.html", controller: "PageCtrl"});
}]);



/**
 * Controls the Blog
 */
app.controller('BlogCtrl', function (/* $scope, $location, $http */) {
  console.log("Blog Controller reporting for duty.");
});

/**
 * Controls all other Pages
 */
app.controller('PageCtrl', function (/* $scope, $location, $http */) {
  console.log("Page Controller reporting for duty.");

  // Activates the Carousel
  $('.carousel').carousel({
    interval: 5000
  });

  // Activates Tooltips for Social Links
  $('.tooltip-social').tooltip({
    selector: "a[data-toggle=tooltip]"
  })
});

当我运行 server.js 时，我得到一个空白网页。当我检查控制台输出时，我收到以下错误：SyntaxError: expected expression, got '<' at Line 1

我也收到来自 angular.js 的错误

错误：[$injector:modulerr] http://errors.angularjs.org/1.2.18/$injector/modulerr?p0=WebApp&p1=[$injector:nomod] http://errors.angularjs.org/1.2.18/$injector/nomod?p0=WebApp t/http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:6:450 yc/b.modulehttp://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:20:466 yc/b.modulehttp://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:20:1 e/http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:33:199 q@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:7:278 e@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:33:139 ec@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:36:252 dc/c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:18:139 dc@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:18:356 wc@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:17:435 @http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:211:1 一个@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:144:237 ne/c/http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:31:223 q@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:7:278 ne/c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:31:207

我哪里错了？

【问题讨论】：

您的main.js 和header.html 中有什么内容？
为什么在配置中使用？
是的，删除 app.config 中的 spans，在 app.config 之后你有一个额外的 }]);
@ngLover 更新了代码。还是没有区别
代码看起来很奇怪，你可以创建小提琴吗？

标签： javascript angularjs node.js

【解决方案1】：

正是这段代码导致了问题：

app.get('*', function(req, res) {
  res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

这将为来自客户端的所有请求发送回 index.html，包括对 .js 和其他非 html 文件的请求。因此，您会遇到语法错误，因为

您要么需要在 app.get 回调中添加条件，要么使用 '*' 以外的其他路径模式

查看http://expressjs.com/guide/routing.html，它提供了处理此问题的方法。

编辑

提供静态文件的最简单方法是设置静态目录。根据您的设置，在您的 app.get 上方添加以下内容应该可以解决问题：

app.use(express.static(__dirname + '/public'));

您也可以删除app.get('/js/'...

【讨论】：

我试过这样： app.get('/', function(req, res) { res.sendfile('./public/index.html'); // 加载单个视图文件（角度将在前端处理页面更改）}）； app.get('/js/', function(req, res) { res.sendfile('./public/js/main.js'); // 加载单视图文件（angular会处理页面上的变化前端） }）;没用
您的公用文件夹在哪里，即“js”文件夹在哪里？
public 在我的根文件夹中。 js文件夹在public里面。 public 文件夹与 server.js 和 package.json 基本处于同一级别
有效！现在我已经将 server.js 中的 GET 请求处理为 app.get('/', function(req, res) { res.sendfile('./public/index.html'); ) });