SyntaxError: expected expression, got '

Question

I am new to AngularJS and was trying to get a basic code running. I want to use nodejs as my server.

My nodejs server file looks like this:

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)
});

my index.html file is:

<!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]"
  })
});

When I run server.js I get a blank web page. When I check the console output I get the following error: SyntaxError: expected expression, got '<' at Line 1

I also get an error from angular.js

Error: [$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 a@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

Where am I going wrong?

snozza · Accepted Answer

It's this piece of code that is causing the problem:

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)
});

This will send back index.html for all requests from the clients, including those for .js and other non-html files. Hence, you are getting syntax errors as < is not valid JavaScript in isolation.

You either need to put conditionals in your app.get callback, or use a different path pattern other than '*'

Take a look at http://expressjs.com/guide/routing.html which provides ways to handle this.

EDIT

The easiest way to serve static files will be to set the static directory. Adding the following above your app.get should do the trick based on your setup:

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

You can also remove app.get('/js/'...

SyntaxError: expected expression, got '<' while running angularJs and node

Tags:

javascript

angularjs

node.js

user1692342

1 Answers

snozza

Recent Activity

Donate For Us