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