Angular ui-router fails to load let alone resolve factory dependencies

Question

UI router works fine as long as I'm not using resolve. I fail to understand the tricks. I would appreciate your help in understanding the problem. Following is the code.

var myApp = angular.module('myApp', ['ui.router']);

UI Router in action [Not Working] - Console doesn't print anything.

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('state1', {
        url: '/',
        resolve: {
            param1: function (RandomFactory) {
                console.log('test');
                return RandomFactory();
            }
        },
        controller: 'RandomController',
        });
    $urlRouterProvider.otherwise("/");
}]);

UI Router [Working] - Console prints.

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('state1', {
        url: '/',
        resolve: {
            param1: function () {
                console.log('test');
                return "hello";
            }
        },
        controller: 'RandomController',
        });
    $urlRouterProvider.otherwise("/");
}]);

Factory

myApp.factory('RandomFactory', ['', function () {
    return "Hello there";
}])

Controller

myApp.controller('RandomController', ['$scope', function ($scope, param1) {
    $scope.param = param1;
}]);

I've gone through the following posts.

1. angular-ui router -- inherited resolved dependencies for NAMED dependencies
2. Angular ui-router fails to resolve named dependencies
3. Angular-ui-router: managing dependencies with resolve
4. Promise dependency resolution order in angular ui-router

May be I'm missing something, but I've spent more than 5 hours on this.

Here is a fiddle for this - http://jsfiddle.net/kshitij/NPN7T/8/

---

Solution

Empty strings in the factory definition was the issue. Though the framework should define an error for this case as it'll help new comers.

Answer 1

please see here : http://plnkr.co/edit/cyZPh5h1lIYykqrh8Igh?p=preview

var myApp = angular.module('myApp', ['ui.router']);

myApp.factory('RandomFactory', function () {
    return "Hello there";
});

myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('state1', {
        url: '/state1',
        template:"<p>{{param1}}</p>",
        controller: function($scope,param1) {

            $scope.param1 = param1;

       },
        resolve: {
            param1: function (RandomFactory) {
                return RandomFactory;
            }
        }
    });
    $urlRouterProvider.otherwise("/state1");
}]);

you've few mistakes in factory definition it should be like (remove empty string)

myApp.factory('RandomFactory', [function () {
    return "Hello there";
}])

and you should return RandomFactory instead of execute it when you resolving it

resolve: {
            param1: function (RandomFactory) {
                return RandomFactory;
            }
        }

Answer 2

It looks to me like your resolve function in state1 is not being invoked because you've given it a dependency to be injected (RandomFactory) that doesn't exist.

Why doesn't it exist? You've declared it in an incorrect manner using ['', function() {...}]. If you don't want to inject any dependencies, just omit the first item of the array rather than using an empty string. Like this: [function() {...}]. It's too bad there isn't a nice error message but this seems to be why it's not working.

See here which works for me:

http://plnkr.co/edit/QYfMSV6zdBC0Ra2HiF2Z?p=preview