AngularJS ui-router ui-sref causing "Uncaught TypeError: Cannot read property '0' of undefined" error

Question

I have an angularJS component using ui-router with 2 simple route states.

export default function Routes($stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
        .state('details', {
          url: '/',
          template: '<div>...</div>'
        })
        .state('pdf', {
          url: '/viewpdf',
          template: '<pdf-viewer></pdf-viewer>'
        });

    $urlRouterProvider.otherwise(function ($injector, $location) {
        var $state = $injector.get("$state");
        $state.go("details");
    });
}

In the details view I have a controller that fetches a PDF document, then changes the route state in the callback using $state.go('pdf');

In the pdf view I have a ui-sref link going back to the details view:

<a ui-sref="details">Back to Details</a>

Intermittently, when I press the Back to Details button, it throws an error from page.js and does not change the route state.

Uncaught TypeError: Cannot read property '0' of undefined
    at new Context (page.js:208)
    at Function.page.replace (page.js:154)
    at onpopstate (page.js:347)
    at B (history.min.js:21)
    at history.min.js:22
Context @ page.js:208
page.replace @ page.js:154
onpopstate @ page.js:347
B @ history.min.js:21
(anonymous) @ history.min.js:22

Looking up the error source I get: (page.js: 208)

/**
   * Initialize a new "request" `Context`
   * with the given `path` and optional initial `state`.
   *
   * @param {String} path
   * @param {Object} state
   * @api public
   */

function Context(path, state) {
    /* ERROR STACK ENDS ON THIS LINE */
    if ('/' == path[0] && 0 != path.indexOf(base)) path = base + path;
    /* END */
    var i = path.indexOf('?');

    this.canonicalPath = path;
    this.path = path.replace(base, '') || '/';

    this.title = document.title;
    this.state = state || {};
    this.state.path = path;
    this.querystring = ~i ? path.slice(i + 1) : '';
    this.pathname = ~i ? path.slice(0, i) : path;
    this.params = [];

    // fragment
    this.hash = '';
    if (!~this.path.indexOf('#')) return;
    var parts = this.path.split('#');
    this.path = parts[0];
    this.hash = parts[1] || '';
    this.querystring = this.querystring.split('#')[0];
  }

The url and view stay at /viewpdf. If I wait a couple seconds and hit the back button again, it will work correctly.

What is causing this behavior, and how do I fix it?

Edit I should clarify, when I refer to the back button, I am referring to the Back to Details button in the /viewpdf view, not the browser back button. The browser back button does not exhibit the bug.

Answer 1

This may get it working:

$state.go('state',{},{
    reload: true
});

reload Docs:

https://ui-router.github.io/ng1/docs/latest/interfaces/transition.transitionoptions.html#reload

You may also want to add a .then() to check if your pdf state is still loading when changing back to details state:

$state.go(..
    .then(
        onfulfilled,
        onrejected
    );

then() Docs:

https://ui-router.github.io/ng1/docs/latest/interfaces/state.transitionpromise.html#then

Update:

If other nav buttons are placed within the state's component this section of the Docs may be of use.

https://github.com/angular-ui/ui-router/wiki#user-content-view-load-events

$rootScope.$on('$viewContentLoaded',
  function(event, viewConfig){
      // Access to all the view config properties.
      // and one special property 'targetView'
      // viewConfig.targetView
  });

Within this listener you could do something like $scope.loaded = true with ng-disabled for nav buttons.

This test code configures a directive for a nav control along with disabling it until the view's DOM is loaded:

angular.module('app',['ui.router'])
  .component('componentHome', {
    template: '<div>Home Page Contents...</div>',
    controller: ['$scope','$state','$rootScope',function($scope,$state,$rootScope){
      $scope.loaded = false;
      $rootScope.$on('$viewContentLoaded',
      function(event, viewConfig){
          $scope.loaded = true;
      });
    }]
  })
  .component('componentA', {
    template: '<div><go></go></div>',
    controller: ['$scope','$state','$rootScope',function($scope,$state,$rootScope){
      $scope.loaded = false;
      $rootScope.$on('$viewContentLoaded',
      function(event, viewConfig){
          $scope.loaded = true;
      });
      $scope.stateName = 'b';
      $scope.stateLabel = 'B';
    }]
  })
  .component('componentB', {
    template: '<div><go></go></div>',
    controller: ['$scope','$state','$rootScope',function($scope,$state,$rootScope){
      $scope.loaded = false;
      $rootScope.$on('$viewContentLoaded',
      function(event, viewConfig){
          $scope.loaded = true;
      });
      $scope.stateName = 'a';
      $scope.stateLabel = 'A';
    }]
  })
  .directive('go',['$state',function($state){
    return {
      restrict: 'E',
      template: '<button ng-disabled="!loaded" state="stateName">Go to Page {{ stateLabel }}</button>',
      link: function(scope,element){
        element.on('click',function(e){
          $state.go(scope.stateName,{},{
            reload: true
          }).then(
            function(){
              // fulfilled
            },
            function(){
              // rejected
            }
          );
        });
      }
    };
  }])
  .config(function($stateProvider){
    $stateProvider.state('/',{ url: '/', component: 'componentHome' });
    $stateProvider.state('a',{ url: '/a', component: 'componentA' });
    $stateProvider.state('b',{ url: '/b', component: 'componentB' });
  })
;

using html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="jquery.js"></script>
    <script src="angular.js"></script>
    <script src="angular-ui-router.min.js"></script>
    <style>
      .active{ border: 1px dashed red; }
    </style>
  </head>
  <body ng-app="app">
      <a ui-sref="/"  ui-sref-active="active">Home Page</a>
      <a ui-sref="a" ui-sref-active="active">Page A</a>
      <a ui-sref="b" ui-sref-active="active">Page B</a>
      <div>
        <ui-view></ui-view>
      </div>
    <script src="app.js"></script>
  </body>
</html>