Getting a “Transition Rejection” when using ui router with template url

I have a basic angularjs (1.8.2) application with the latest version of ui router (1.0.29).

The application will load and work fine but I have noticed in the console I get the following errors when I initially go to a state (using the ui-sref route) with a template url:

Transition Rejection($id: 0 type: 2, message: The transition has been superseded by a different transition, detail: Transition#2( ‘home'{} -> ‘page2′{} ))

It only happens the first time a user goes to a state with a template url, after that there are no more errors and the application continues to work.

Demo Here

All the information I have found online just says that I have a configuration error with ui router but all the documentation I have found shows that this should work without error.

Any help is appreciated, thanks.

var app = angular.module('plunker', ['ui.router', 'editor']);

// routing configuration
app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {

    // default route
    $urlRouterProvider.otherwise('/');

    // available states
    var states = [
        {
            name: 'home',
            url: '/',
            template: '<div><h3>HOME PAGE</h3></div>'
        },
            {
            name: 'page2',
            url: '/page2',
            controller: 'page2Ctrl',
            templateUrl: 'page2.html',
        },
            {
            name: 'page3',
            url: '/page3',
            controller: 'page3Ctrl',
            templateUrl: 'page3.html',
        }
    ];

    // Loop over the state definitions and register them
    states.forEach(function (state) {
        $stateProvider.state(state);
    });
}]);

app.controller('mainCtrl', function($scope) {
  $scope.content = 'World';
});

app.controller('page2Ctrl', function($scope) {
  $scope.hasLoaded = true;
});

app.controller('page3Ctrl', function($scope) {
  $scope.hasLoaded = true;
});

Answer

Error caused because there are 2 ui-sref for each state. Remove the one from li element and it works fine:

<li role="presentation" ui-sref-active="active">
   <a ui-sref="home" ui-sref-opts="{reload: true, inherit: false}">
   Home
   </a>
</li>