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

Question

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.

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 1

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