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

Claies · Accepted Answer

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 <

Tags:

javascript

angularjs

node.js

user3871

1 Answers

Claies

Recent Activity

Donate For Us