Clever Geek Handbook

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

I am new to AngularJS and was trying to get some 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:

<!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 webpage. When I check the console output I get the following error:SyntaxError: expected expression, got '<' at Line 1

I am also getting angular.js error

Error: [$ injector: modulerr] http://errors.angularjs.org/1.2.18/ $ injector / moduler ? 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 Us / b.modulehttp: //ajax.googleapis.com/ ajax / libs / angularjs / 1.2.18 / angular.min.js: 20: 466 Us /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?

+3


source share


1 answer


This is the 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 clients, including .js

other non-html files. Hence, you get syntax errors like <invalid JavaScript in isolation.

You either need to put conditionals in your callback app.get

or use a different path template other than'*'

Have a look at http://expressjs.com/guide/routing.html which provides ways to deal with this.



EDIT

The easiest way to serve static files is to set up a static directory. By adding the following, yours app.get

should do the trick based on your setup:

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

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

+4


source






More articles:


All Articles