tommyd456 tommyd456 - 9 days ago 8
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('app.docs', {
url: "/docs",
templateUrl: "views/app/app.docs.html",
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
/#/app/docs/create
everything works fine with no errors in the console.

However, when IN html5 mode and I navigate to
/app/docs/create
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

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.)