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
– Quentin, Commented Jul 18, 2015 at 21:30
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, Commented Jul 18, 2015 at 21:35
@Claies okay I've changed it to app.get('/', and res.send('./public/index.html');, see above please — user3871
– user3871, Commented Jul 18, 2015 at 21:41
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, Commented Jul 18, 2015 at 21:41
@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? — user3871
– user3871, Commented Jul 18, 2015 at 21:44

Claies · Accepted Answer · 2015-07-18 21:53:26Z

17

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.

answered Jul 18, 2015 at 21:53

Claies

22.4k4 gold badges56 silver badges81 bronze badges

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

5 Comments

Cesar Vega Over a year ago

But how it is if my folder for the angular app is in /public folder server from a server.js file outside /server that contains the express application ??

Coder1000 Over a year ago

Hello, would you know the solution to this ? stackoverflow.com/questions/44022938/…

Codiee Over a year ago

hi, i'ts not working for me, I am having the same issue still facing Unexpected token < error.

Claies Over a year ago

@Codiee if you are having a similar problem, you should create a new question with the specifics of the stack you are using, and reference this question / answer if you feel it is relevant. This question and answer are 2 1/2 years old, and trying to troubleshoot your current issues now through comments is not efficient, or really how this site was designed to be used.

Sudhir Kaushik Over a year ago

Now, dependencies aren't loading which were earlier loading fine when running gulp serve.

mattyc · Accepted Answer · 2019-07-04 22:57:58Z

0

I was able to resolve my issue with the unexpected token by moving my server.js file from the DIST directory into the directory above.

So my folder/file structure looks like this:

webroot - root folder
- server.js
- dist (folder)
  - browser (subfolder)
  - server (subfolder)

answered Jul 4, 2019 at 22:57

mattyc

313 bronze badges

Collectives™ on Stack Overflow

Node / Angular app Uncaught SyntaxError: Unexpected token <

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related