Angular UI-Router not displaying template

Question

I have come across a very weird bug. My UI-Router is set up as follows with the ui-view element in the home template.

.state('main.home.one', {
    url: '/',
    templateUrl: 'partials/home/one',
    controller: "OneCtrl"
})
.state('main.home.two', {
    url: '/two/',
    templateUrl: 'partials/home/two',
    controller: "TwoCtrl",
})

• when I navigate from main.home.one to main.home.two using $state.go() it works fine

• when I navigate from main.home.one to main.home.two using the url /two/ it does not work and while it successfully called the template from the server, it loads !-- uiView: undefined --

• If I change the url to '/two' from '/two/' then it works fine when navigating by url

• Only ui-view elements work, attributes in a <div ui-view> don't work

My goal to to load a state parameter as such: "/two/:id" which of course breaks things. If anyone can shed some insight into this problem, I would be much appreciative.

Answer 1

Trailing slashes are an important part of the route with UI router. Check out this section of the FAQ on making trailing slashes optional, hopefully that will help!

Edit: Related code from the link

How to: Make a trailing slash optional for all routes

How can I have my routes be activated when the url contains either a trailing slash or not?

Set strictMode to false in your config block:

$urlMatcherFactoryProvider.strictMode(false)

For older version of ui-router, add this snippet to your module's config function. It creates a rule on $urlRouterProvider that maps all urls that are missing a trailing slash to the same url but with the trailing slash appended.

You'll need to specify all urls with a trailing slash if you use this method.

$urlRouterProvider.rule(function ($injector, $location) {
    var path = $location.url();

    // check to see if the path already has a slash where it should be
    if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
        return;
    }

    if (path.indexOf('?') > -1) {
        return path.replace('?', '/?');
    }

    return path + '/';
});

Note: All routes in app/scripts/app.js must be redefined with trailing /. This means that routes such as /things/:id become /things/:id/ as well.