Node / Angular app Uncaught SyntaxError: Unexpected token <

Question

I'm following this node/angular tutorial and am getting the following errors:

enter image description here

I'm bootstrapping my app through node, which renders index page:

module.exports = function(app) {

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

Which renders:

<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>

I'd like Node to handle the initial page load, but Angular to handle the rest of the routing. The problem is here: It doesn't seem my angular routing is working. I put a self-exec fn run() in there to test, but it's not being called.

I'm simply trying to test display the testpage.html template:

app.js file:

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

The angular error isn't very helpful. I'm not sure what Unexpected token < means as I cannot find where I've added an extra < anywhere.

EDIT:

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

enter image description here

It should be able to find the stuff in bower components as the pathing is correct:

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

Unexpected token < suggests that angular.js is an HTML document, not a JavaScript file. Check you are serving up what you think you are serving up for the request. — Quentin
app.get('*', function(req, res) { res.sendfile('./public/index.html'); is going to send index.html for every request to the server; requests for .js files, requests for .jpg or .png files, everything. — Claies
@Claies okay I've changed it to app.get('/', and res.send('./public/index.html');, see above please — Growler
well, then you also need an express command to send the .js files, any image files, etc. With this change, instead of sending the index.html for those requests, you just aren't sending anything. — Claies
@Claies I'm quite confused. If node is serving up index.html, and this html file contains references/requests to the js files it needs, why do I need an extra express command? — Growler

Claies Claies · Accepted Answer · 2015-07-18T21:53:26

You are missing some settings in your app file on the server to handle all of the requests being made to the server. Here is a basic sample working express file, which you can modify to fit your environment:

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

This file uses express.static to serve any content which is in the specific directory regardless of name or type. Also keep in mind that Express use statements are processed in order, and the first match is taken, any matches after the first are ignored. So in this example, if it isn't a file in the /js, /bower_components, /css, or /partials directory, the index.html will be returned.

Node / Angular app Uncaught SyntaxError: Unexpected token <

2 Answers