Back button Inconsistent behaviour - using location:replace

[raynerprogramming]

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

Steps to create:

1. Go to state 'Error'
2. Got to state 'Home'
3. click 'go foo'
4. right click -> back
5. click 'go foo'
6. right click -> back

I would expect the 'back' page to be Home each time, but only the first one goes to the home state. All subsequent 'backs' go to the Error page. It seems that the 'Home' state is removed from the history after the first back. I'm using location: replace to make all the child states go back to the Home state (seems the issue is here with the replace).

[whiterockerart]

I have a similar problem. I go from one state to another and when I go back by using browsers backbutton I either don't go anywhere or I go back in history, loosing som params in the url and can't forward to the state I was previously on.

Can't share code, comapny secrets you know.

[adrianhara]

Browser back button doesn't work for me either for some reason: the url changes correctly after the # however the view remains the same, there is no view transition to the correct component. I also noticed that navigating directly to a deep-link url doesn't navigate to the correct component but rather to the root component. I know the navigation's not happening because not only is the UI not correct, but also the component controllers are not instantiated.

Any idea what I'm doing wrong?

Note: different to the demos in the tutorial (https://ui-router.github.io/tutorial/ng1/hellogalaxy) I don't include the ui-srefs to components on the index.html page, rather I have a shell component that I include directly in the index.html page and this shell's template has ui-srefs to other components and a ui-view to render them in.

[adrianhara]

Found it: my state URLs weren't prefixed with / :|

[christopherthielen]

@raynerprogramming

This is due to the timing of $state.go inside a controller.

The reason it works the first time is that loading the templates (via templateUrl) introduces a delay between the successful state change and the component being loaded. That's causes the $state.go to be executed in a different digest loop than the code that updates the URL.

Your code works if you introduce a delay before processing the $state.go().

   controller: function($scope,$state, $timeout) {
      $timeout().then(() => $state.go("home.foo.bar",{},{location: 'replace'}))
    }, 

Here's a working plunker: http://plnkr.co/edit/rcWRE6y785tbajP3uhdU?p=preview

Note: in 1.0, the preferred mechanism is to use redirectTo:, or to return a $state.target() from an onEnter.

Here's a plunker demonstrating each approach:

• http://plnkr.co/edit/cH8uLeVTHEvztQMOrJSG?p=preview (redirectTo)
• http://plnkr.co/edit/KxUTlxVdINDabZeohLlV?p=preview (onEnter hook)

The onEnter hook most closely resembles your controller based approach because it allows a parent state to be directly activated as long as a deeper state was already active. For example, it allows this:

trans #1: home -> home.foo (redirects -> home.foo.bar -> home.foo.bar.boo)
trans #2: home.foo.bar.boo -> home.foo.bar (ok, works)

Where as the redirectTo hook always redirects of the state is about to be activated:

trans #1: home -> home.foo (redirects -> home.foo.bar -> home.foo.bar.boo)
trans #2: home.foo.bar.boo -> home.foo.bar (redirects -> home.foo.bar.boo)

---

I'm closing this bug as wontfix.
Because { location: replace } being tied to the digest cycle is core angular 1, I'm afraid that even if we found a mechanism to account for the "$state.go in a controller" approach, it would introduce problems for approaches that other users might be using. I've also provided three workarounds and I think one of them should be sufficient for your app.