Angular UI Router, route resolve breaking refresh button

Question

I am having an issue with Angular UI router. When I route the below state, it works completely fine. However, when I refresh the page, the resolve gets the data, it is injected into the controller, but the view does not load. In short, the state works fine when it is routed to via a ui-sref link or $state.go, but not when the page is refreshed. Has anyone encountered this issue before?

  $stateProvider.state('information', {
        templateUrl: 'information.html',  
        resolve:{
             'infoData': function($q, myFactory) {
                 var data = {};
                 data.first = myFactory.get(1);
                 return $q.all({first: data.first.$promise});  
              }
        },
        controller: function($scope, infoData){
          console.log(infoData);
        }
    }

score 0 · Answer 1 · answered May 01 '14 at 00:01

0

I've encountered this a few times. In my routes.js file I always use html5 mode, gets rid of the hash bang that angular defaults to.

// Set HTML5 mode to true
$locationProvider.html5Mode(true).hashPrefix('!');

I also have this in my .htaccess

RewriteEngine on
#let angular do its thing
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.html [NC,L]

answered May 01 '14 at 00:01

Shan Robertson

2,742
3
25
43

Then definitely try that snippet in your .htaccess! – Shan Robertson May 01 '14 at 00:04
What is the snippet doing exactly? I am thinking that this non-resolution is more related to the ui-router framework than an angular thing itself. – Conqueror May 01 '14 at 00:07

score 0 · Answer 2 · edited May 23 '17 at 12:14

I don't know if I can directly answer your question, but I can maybe point you in the right direction. Your symptoms seemed similar to mine.

This answer led me to realize that Angular UI Router seems to swallow state errors by default. Upon adding a global listener to the $stateChangeError event and logging the error, I was able to see that some of the dependencies in my resolve function (in your case, myFactory) weren't loaded when I was refreshing the page. This wasn't an issue via normal navigation of the rest of the application because it was a shared dependency amongst a couple of my controllers that had properly loaded it.

In my project, we're using RequireJS along with Angular, so the solution for me was to just add my dependency to the define list for my new controller (doesn't seem relevant for you, so I won't go into details). Also, for what it's worth, my project is using Angular 1.2.13 and Angular UI Router 0.2.10.

Hope this helps... upvote the answer I referenced if it does!

Had this problem from a while back, ultimately was caused by angular-ui itself and was fixed in the newer versions. — Conqueror, Sep 05 '14 at 01:36

Angular UI Router, route resolve breaking refresh button

2 Answers2

Linked