Angular Ui Router, Route Resolve Breaking Refresh Button

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 int

Solution 1:

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]

Solution 2:

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!