7

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
user3871
  • 12,432
  • 33
  • 128
  • 268
  • 1
    `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 Jul 18 '15 at 21:30
  • 4
    `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 Jul 18 '15 at 21:35
  • @Claies okay I've changed it to `app.get('/',` and `res.send('./public/index.html');`, see above please – user3871 Jul 18 '15 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 Jul 18 '15 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 Jul 18 '15 at 21:44
  • because you are asking the node server / express to fetch the file, to which the server has to send the file back as a response. Otherwise, remote clients don't have access to the server hard disk. The first request is for the HTML file, and once that is parsed, the browser sees a request for the other resources, and makes a request for each of these resources from the server individually. – Claies Jul 18 '15 at 21:47
  • were you able to get this worked out? – Claies Jul 19 '15 at 12:43
  • I am facing the same issue, didn't find any solution yet.I am loading my other js file from index.html, index.html is loading but when loading any template getting "Uncaught SyntaxError: Unexpected token <" this error. – Codiee Nov 22 '17 at 13:18

2 Answers2

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.

Claies
  • 22,124
  • 4
  • 53
  • 77
  • 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 ?? – Cesar Vega Apr 15 '16 at 19:31
  • Hello, would you know the solution to this ? http://stackoverflow.com/questions/44022938/heroku-deployment-browser-console-error-uncaught-syntaxerror-unexpected-token – Coder1000 May 17 '17 at 17:07
  • hi, i'ts not working for me, I am having the same issue still facing Unexpected token < error. – Codiee Nov 23 '17 at 10:40
  • @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. – Claies Nov 23 '17 at 11:19
  • Now, dependencies aren't loading which were earlier loading fine when running gulp serve. – Sudhir Kaushik Jan 06 '18 at 13:00
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)

mattyc
  • 31
  • 3