Why gulp-livereload causes "Uncaught SyntaxError: Unexpected token <"?

Question

In my gulpfile.js I set up express to always return index.html.

var server = express();
server.use(livereload({ port: 35729 }));
server.use(express.static('./app'));
server.all('*', function(req, res) {
  res.sendFile('index.html', { root: './app' });
});

server.listen(8000);
refresh.listen(35729);

All works fine the first time I navigate to localhost:8000. My Angular routes redirect to http://localhost:8000/home.

But, if then I refresh http://localhost:8000/home, I see the following error in the console:

Uncaught SyntaxError: Unexpected token <

Why is this happening?

DEMO HERE

Answer 1

It's an error caused by angular route. The scripts references in your index.html needs to be relative to the root. Otherwise they will not be found.

<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>

<script src="/app.js"></script>
<script src="/home/home.js"></script>
<script src="/home/home-controller.js"></script>
<script src="/dashboard/dashboard.js"></script>
<script src="/dashboard/dashboard-controller.js"></script>