Angular-ui Router - Resolve Not Waiting For Promise To Resolve Due State Switching

I know there is already a similar question Angular-UI Router - Resolve not waiting for promise to resolve? but is not exactly like my problem. I have two states: .state('entities',

Solution 1:

As listed in the docs, the resource immediately returns a value (empty object or empty array), then fetches the data and later assigns it.

https://docs.angularjs.org/api/ngResource/service/$resource

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data. This is a useful trick since usually the resource is assigned to a model which is then rendered by the view.

This works fine when used directly inside a controller but doesn't work with the router's resolve, because for the router library, the value is already resolved with the initial value.

So as @Dmitriy noted, you should use the promise of the resource, that is provided via the $promise field. This will not resolve before the value is present or an error occured.

For more details see this great post on the topic: http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/

Solution 2:

If you use angular $resource you should return xyzService.listEntities().$promise

https://docs.angularjs.org/api/ngResource/service/$resource