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

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?

Yip, remove spans in app.config and you have an extra }]); after app.config — logee
– logee, Commented Jul 9, 2015 at 5:17

snozza · Accepted Answer · 2015-07-09 12:46:33Z

4

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/'...

edited Jul 9, 2015 at 12:46

answered Jul 9, 2015 at 7:13

snozza

2,25316 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1692342 Over a year ago

I tried like this : 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) }); app.get('/js/', function(req, res) { res.sendfile('./public/js/main.js'); // load the single view file (angular will handle the page changes on the front-end) }); Didnt work

snozza Over a year ago

where is your public folder, i.e. where is the 'js' folder located?

user1692342 Over a year ago

public is in my root folder. js folder is inside public. public folder is basically in same level as server.js and package.json

user1692342 Over a year ago

It works! Right Now I have handled the GET Request in server.js as app.get('/', function(req, res) { res.sendfile('./public/index.html'); ) });

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related