AngularJS Ui-Router nested views not working with html5mode

Question

I'm using AngularJS with ui-router and I have a problem with nested views while using Html5Mode. This problem only happens with html5, if I'm not using it, everything works fine. I tried to work with base <base href="/"> but didn't work as well.

Also, the problem only happens within nested views, on the main ui-view it's ok.

This is the code I'm using:

index.html

<div>
    <ul>
        <li ui-sref="menu">Menu</li>
        <li ui-sref="user">User</li>
        <li ui-sref="contact">Contact</li>
    </ul>
    <div ui-view autoscroll="false"></div>
</div>

child template.html

<div class="container">
    <div>
        <ul>
            <li ui-sref="user.data">My Info</li>
            <li ui-sref="user.order">My Order</li>
            <li ui-sref="user.budget">My Budget</li>
        </ul>
    </div>
    <div ui-view></div>
</div>

app.js

.state("user", {
    url: "/User",
    templateUrl: "content/user.html",
    controller: "UserCtrl"
})
.state('user.data', {
    url:"/MyData",
    templateUrl: "content/user/user_data.html",
    controller: 'UserCtrl'
})

If I use the html5 WITH `, i can navigate, but when i refresh the page, I get errors like this:

Resource interpreted as Stylesheet but transferred with MIME type text/html

And if I use WITHOUT <base href="/" /> then it doesn't work at all. But again, only for the child ui-view, the parent view is still working.

Answer 1

I haven't got such problem until now, so my knowledge is limiting, but i've heard a few things that can help you. As this ui.router tutorial says:

HTML5 Mode

The UI Router framework gives you ultimate control over the URLs generated for your site by allowing you to enable HTML5 mode. When enabled, this mode does not generate hash (#) locations, but uses the HTML5 history API to generate clean URLs. The only caveat to this approach is that you must build your application to work under each generated path, rather than just at the root, which is customary in most single-page applications.

I hope this helps! Cheers.