tommyd456 tommyd456 - 11 months ago 79
Node.js Question

HTML5 mode - ui-router - Uncaught SyntaxError: Unexpected token <

Trying hard to get html5 mode to play nicely with ui-router but there just seems to be loads of problems

One I can't get around at the moment is very strange so any suggestions appreciated.

I have these states:

.state('app', {
url: '/app',
templateUrl: 'views/app/app.html',
resolve: {
loggedin: checkLoggedin
.state('', {
url: "/docs",
templateUrl: "views/app/",
controller: "DocsController"

.state('app.create-doc', {
url: "/docs/create",
templateUrl: "views/app/app.editor.html",
controller: "DocController"

.state('app.edit-doc', {
url: "/docs/:short",
templateUrl: "views/app/app.editor.html",
controller: "DocController"

.state('app.account', {
url: "/account",
templateUrl: "views/app/app.account.html",
controller: "AccountController"

When NOT in html5 mode (using the hashbang), and I navigate to
everything works fine with no errors in the console.

However, when IN html5 mode and I navigate to
I get a whole load of errors in the console stating
Uncaught SyntaxError: Unexpected token <
for each of my Controllers and Services.

enter image description here

I'm sorry I can't be more detailed on this but I simply haven't got a clue what's causing the issue???

Answer Source

One big thing to look at is your URLs. Try putting a '/' in front of both your templateUrls and your Javascript include URLs so they're absolute URLs. That error is very common when the browser tries to access a JS file and it gets HTML back (usually a 404 page) instead.

As soon as you start viewing a URL like "/docs/create" the browser is going to treat relative URLs as sub-paths under there, and can easily lead to this error if you aren't trapping for it. (Looking at the Network tab in your debugger above could help confirm this.)