How to debug a blank page error (caused by a UI-Router)?

Question

I'm just curious if anyone knows how to debug a situation when you have a blank page for a UI-Router. (Of course, no errors in the console)

By executing console.log for router events (take it here ), I found you that it went into the correct state, but after I did not stop at the checkpoint inside the state controller, I indicated in the UI-Router state:

.state('invited-user', { parent: 'authPublic', url: '/users/invitation/accept?back_link&invitation_token', templateUrl: 'auth/invited-form.html', controller: 'InvitedUserController', data: { hidePageNavigation: true } }) 

so I assume the controller is a problem. Already tried to mock this:

 .state('invited-user', { parent: 'authPublic', url: '/users/invitation/accept?back_link&invitation_token', templateUrl: 'auth/invited-form.html', controller: function(){ debugger }, data: { hidePageNavigation: true } }) 

but without any results, unfortunately.

I am looking for a solution to the current problem and a general approach on how to debug such situations in general.

Answer 1

So, I came to the conclusion that the debug logic should be like this:

• console.log router events (code here ) to verify router logic
• check the pattern of the current state of the router (if necessary, lure it)
• check current state controller (layout with empty function if necessary)
• check all patterns and controllers of parental states from the current one, starting from the closest parent and go up.

Actually, it would be nice to have an exception from the window to see the exact problem, but, unfortunately, we have what we have.