Navigation hangs after fast transition between states

[gboston]

Navigation works as long as I don't navigate too fast between all the states. When I quickly navigate with some links with ui-sref on it, it freezes on a random state. You can see the difference between the working and non working navigation. The resolves are still called but the view aren't rendered anymore... We also use: $transition.router.stateService.target('state_name_palceholder') to navigate to other states and this still works but when navigating back to a corrupted state it gives back the freezed state.

a perfectly working navigation

Transition #2 Digest #43:   Hook -> onBefore context: main.users, undefined
trace.ts?3953:142 Transition #2 Digest #43: Started  -> "Transition#2( 'main.customers'{} -> 'main.users'{} )"
trace.ts?3953:162 Transition #2 Digest #43:   Hook -> onStart context: main.users, undefined
trace.ts?3953:181 Transition #2 Digest #43:         Resolving [object Object],[object Object],[object Object] (EAGER)
trace.ts?3953:172 Transition #2 Digest #43:   <- Hook returned: "[Promise]", transition result: "[Promise]"
trace.ts?3953:162 Transition #2 Digest #43:   Hook -> onStart context: main.users, undefined
trace.ts?3953:172 Transition #2 Digest #43:   <- Hook returned: "[Promise]", transition result: "[Promise]"
trace.ts?3953:240 VIEWCONFIG: Loaded [ViewConfig#4 from 'main.users' state]: target ui-view: '$default@main'
trace.ts?3953:162 Transition #2 Digest #43:   Hook -> onStart context: main.users, undefined
trace.ts?3953:162 Transition #2 Digest #43:   Hook -> onEnter context: main.users, undefined
trace.ts?3953:181 Transition #2 Digest #43:         Resolving [object Object],[object Object],[object Object] (LAZY)
trace.ts?3953:172 Transition #2 Digest #43:   <- Hook returned: "[Promise]", transition result: "[Promise]"
trace.ts?3953:191 Transition #2 Digest #43:               <- Resolved  Resolvable(token: "roleService", requires: []) to: {"checkPermissions":"function (roleCollection) {\n        var deferred = $q.defer();\n\n        if(permission) {\n          service.getPermission(permission, roleCollection, deferred);\n        } e...
trace.ts?3953:191 Transition #2 Digest #43:               <- Resolved  Resolvable(token: "$q", requires: []) to: "function Q(resolver)"
trace.ts?3953:191 Transition #2 Digest #43:               <- Resolved  Resolvable(token: "apiService", requires: []) to: {"getBaseUrl":"function () {\n      return '/api/zones/' + Context.getZoneId() + '/customers/' + Context.getTenantId();\n    }","pollJob":"function (jobId) {\n      return $http.get(apiService.getB...
trace.ts?3953:191 Transition #2 Digest #43:               <- Resolved  Resolvable(token: "permission", requires: ["roleService"]) to: "undefined"
trace.ts?3953:191 Transition #2 Digest #45:               <- Resolved  Resolvable(token: "users", requires: ["$q","apiService"]) to: [{"_id":"57ab344713a277bcc9f5317b","firstname":"Aug10v8","lastname":"Aug10v8","upn":"[email protected]","ownerid":"aug10v8-adc01","id":"aug10v8dev.int","role":"admin","password":"null","fullname":"Au...
trace.ts?3953:210 Transition #2 Digest #45: <- Success  "Transition#2( 'main.customers'{} -> 'main.users'{} )", final state: main.users
3trace.ts?3953:162 Transition #2 Digest #45:   Hook -> onSuccess context: main.users, undefined
trace.ts?3953:240 VIEWCONFIG: <- Removing [ViewConfig#3 from 'main.customers' state]: target ui-view: '$default@main'
trace.ts?3953:240 VIEWCONFIG: -> Registering [ViewConfig#4 from 'main.users' state]: target ui-view: '$default@main'
trace.ts?3953:216 ui-view: Updating                       [ui-view#2 tag in template from 'main' state]: fqn: 'content.$default', name: '$default@main') with ViewConfig from context='main.users'
trace.ts?3953:216 ui-view: Created scope for              [ui-view#2 tag in template from 'main' state]: fqn: 'content.$default', name: '$default@main'), scope #221
trace.ts?3953:216 ui-view: Destroying scope               [ui-view#2 tag in template from 'main' state]: fqn: 'content.$default', name: '$default@main')
trace.ts?3953:216 ui-view: Animate out                    [ui-view#undefined tag in template from '(root)' state]: fqn: 'undefined', name: 'undefined@undefined')
trace.ts?3953:216 ui-view: Fill                           [ui-view#2 tag in template from 'main' state]: fqn: 'content.$default', name: '$default@main') with: <div class="clo-filter-bar">
  <div class="blueprint-search pull-left clo-search">
    <i class="material-icons">search</i>
    <input class="clo-input" placeholder="Search..." ng-model="vm.search"...
2trace.ts?3953:162 Transition #2 Digest #45:   Hook -> onSuccess context: main.users, undefined

The malfunctioning tracing looks like this:

Transition #32 Digest #251:   Hook -> onBefore context: main.users, undefined
trace.ts?3953:142 Transition #32 Digest #251: Started  -> "Transition#32( 'main.customers'{} -> 'main.users'{} )"
trace.ts?3953:162 Transition #32 Digest #251:   Hook -> onStart context: main.users, undefined
trace.ts?3953:181 Transition #32 Digest #251:         Resolving [object Object],[object Object],[object Object] (EAGER)
trace.ts?3953:172 Transition #32 Digest #251:   <- Hook returned: "[Promise]", transition result: "[Promise]"
trace.ts?3953:162 Transition #32 Digest #251:   Hook -> onStart context: main.users, undefined
trace.ts?3953:172 Transition #32 Digest #251:   <- Hook returned: "[Promise]", transition result: "[Promise]"
trace.ts?3953:240 VIEWCONFIG: Loaded [ViewConfig#31 from 'main.users' state]: target ui-view: '$default@main'
trace.ts?3953:162 Transition #32 Digest #251:   Hook -> onStart context: main.users, undefined
trace.ts?3953:162 Transition #32 Digest #251:   Hook -> onEnter context: main.users, undefined
trace.ts?3953:181 Transition #32 Digest #251:         Resolving [object Object],[object Object],[object Object] (LAZY)
trace.ts?3953:172 Transition #32 Digest #251:   <- Hook returned: "[Promise]", transition result: "[Promise]"
trace.ts?3953:191 Transition #32 Digest #251:               <- Resolved  Resolvable(token: "roleService", requires: []) to: {"checkPermissions":"function (roleCollection) {\n        var deferred = $q.defer();\n\n        if(permission) {\n          service.getPermission(permission, roleCollection, deferred);\n        } e...
trace.ts?3953:191 Transition #32 Digest #251:               <- Resolved  Resolvable(token: "$q", requires: []) to: "function Q(resolver)"
trace.ts?3953:191 Transition #32 Digest #251:               <- Resolved  Resolvable(token: "apiService", requires: []) to: {"getBaseUrl":"function () {\n      return '/api/zones/' + Context.getZoneId() + '/customers/' + Context.getTenantId();\n    }","pollJob":"function (jobId) {\n      return $http.get(apiService.getB...
trace.ts?3953:191 Transition #32 Digest #251:               <- Resolved  Resolvable(token: "permission", requires: ["roleService"]) to: "undefined"
trace.ts?3953:191 Transition #32 Digest #253:               <- Resolved  Resolvable(token: "users", requires: ["$q","apiService"]) to: [{"_id":"57ab344713a277bcc9f5317b","firstname":"Aug10v8","lastname":"Aug10v8","upn":"[email protected]","ownerid":"aug10v8-adc01","id":"aug10v8dev.int","role":"admin","password":"null","fullname":"Au...
trace.ts?3953:210 Transition #32 Digest #253: <- Success  "Transition#32( 'main.customers'{} -> 'main.users'{} )", final state: main.users
3trace.ts?3953:162 Transition #32 Digest #253:   Hook -> onSuccess context: main.users, undefined
trace.ts?3953:240 VIEWCONFIG: <- Removing [ViewConfig#30 from 'main.customers' state]: target ui-view: '$default@main'
trace.ts?3953:240 VIEWCONFIG: -> Registering [ViewConfig#31 from 'main.users' state]: target ui-view: '$default@main'
2trace.ts?3953:162 Transition #32 Digest #253:   Hook -> onSuccess context: main.users, undefined

[gboston]

I think it has something to do with slow resolves (+/- 600ms)

[christopherthielen]

That seems strange... the ui-view named $default@main never gets notified of the updated ViewConfig. I can't tell why that happened.

Can you provide a way for me to reproduce this?

[ghost]

I'm facing the same issue. I'm not sure if it's the kind of example you're looking for, but I have a deployed example site that demonstrates this:

https://tv-tracker-73580.firebaseapp.com/

1. Go to the "Shows" screen
2. Click "Next" 9-10 times very quickly
3. Click one of the other views again "Home" or "Log In"
4. You'll notice the state router no longer renders the destination state
5. You'll notice that the URL bar is updating, and things like ui-sref-active work ("Shows" Pill no longer being highlighted), but the view isn't updated

Source code is available here: https://github.com/giannico/angular1-tv-tracker

[christopherthielen]

@giannico I fetched your code and ran it in a VM npm start but I get a message that firebase library has not been loadded.

I think I may know why the reported behavior is happening, and I'd like to test against your app.

[ghost]

Sorry @christopherthielen , it looks like the firebase version bump from 3.3.0 to 3.4.0 caused a breaking change in the application. I pushed the new package.json pinning the version to 3.3.0. If you just npm install [email protected] and then run npm start, the app should work.

Thanks for taking a look.

[christopherthielen]

@giannico it seems to work now, with bc87d9e. Can you build from master (or use this pre-built copy) and let me know if you see the same results?

http://bit.ly/2d2oowx

[ghost]

@christopherthielen, thank you, I confirmed the aforementioned issue is no longer present in the build you provided. The functionality is working great now.

[jgrund]

@christopherthielen Thanks, I'm hitting this as well. Any timeframe where this will make it into a new release?