Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add location sync code for hash-based navigation from AngularJS #21995

Closed
jasonaden opened this Issue Feb 2, 2018 · 3 comments

Comments

Projects
None yet
3 participants
@jasonaden
Copy link
Contributor

jasonaden commented Feb 2, 2018

AnguarJS applications using hash-based URL navigation can encounter a problem after #21728 which added a value to history.state. In fact, AngularJS applications using hash-based URL navigation will encounter this problem any time something exists in history.state.

It turns out the browser publishes a popstate event when the hash on the URL changes. So that's how the Angular router was getting notified of URL changes caused by the AngularJS router when using hash-based URL navigation. Apps didn't need the "upgrade" code because of this.

The change applied in #21728 gives the option to pass a "state" to the history API calls for Angular's Location service. This is something AngularJS had, but was never implemented in Angular.

The router used these new APIs to store it's navigationId in the history API which allows us to sync the two routers much better. However, there was a side effect in AngularJS which is if it sees the history API had been used, it assumes you want to update location through the history API rather than location.hash or location.url (both of which will trigger the popstate event Angular's router hooks into). If you use the history API directly, a popstate isn't published and therefore we needed to add the sync code to keep the two routers in sync (this is similar code anyone using HTML5 URLs would already have done). That code looks slightly different to manage hash-based URLs, and we will need to add this solution to the @angular/router/upgrade package for other projects to take advantage of.

@jpzwarte

This comment has been minimized.

Copy link

jpzwarte commented Apr 27, 2018

@jasonaden is this related perhaps to #23573?

@vincentjames501

This comment has been minimized.

Copy link

vincentjames501 commented Jun 11, 2018

+1. This would be great to add to the @angular/router/upgrade package. Right now if I try that using hash based routing in my AngularJS/Angular hybrid application it blows up. I just ran into this issue today while upgrading to Angular 6.

@jasonaden jasonaden self-assigned this Jun 19, 2018

@jasonaden jasonaden added jira: sync and removed jira: sync labels Jul 16, 2018

@jasonaden jasonaden changed the title Add location sync code for hash-based navigation from AngularJS GST-16 ⁃ Add location sync code for hash-based navigation from AngularJS Jul 18, 2018

@jasonaden jasonaden changed the title GST-16 ⁃ Add location sync code for hash-based navigation from AngularJS Add location sync code for hash-based navigation from AngularJS Jul 26, 2018

@jasonaden jasonaden added the jira-sync label Jul 26, 2018

jasonaden added a commit to jasonaden/angular that referenced this issue Feb 8, 2019

feat(router): add hash-based navigation option to setUpLocationSync
The `setUpLocationSync` function in @angular/router/upgrade didn't previously let you sync hash-based navigations. With this change, you can now pass an option to `setUpLocationSync` that will make sure location changes run in Angular in hash-based apps.

Fixes angular#24429 angular#21995

jasonaden added a commit to jasonaden/angular that referenced this issue Feb 8, 2019

feat(router): add hash-based navigation option to setUpLocationSync
The `setUpLocationSync` function in @angular/router/upgrade didn't previously let you sync hash-based navigations. With this change, you can now pass an option to `setUpLocationSync` that will make sure location changes run in Angular in hash-based apps.

Fixes angular#24429 angular#21995

jasonaden added a commit to jasonaden/angular that referenced this issue Feb 13, 2019

feat(router): add hash-based navigation option to setUpLocationSync
The `setUpLocationSync` function in @angular/router/upgrade didn't previously let you sync hash-based navigations. With this change, you can now pass an option to `setUpLocationSync` that will make sure location changes run in Angular in hash-based apps.

Fixes angular#24429 angular#21995

jasonaden added a commit to jasonaden/angular that referenced this issue Feb 19, 2019

feat(router): add hash-based navigation option to setUpLocationSync
The `setUpLocationSync` function in @angular/router/upgrade didn't previously let you sync hash-based navigations. With this change, you can now pass an option to `setUpLocationSync` that will make sure location changes run in Angular in hash-based apps.

Fixes angular#24429 angular#21995

IgorMinar added a commit that referenced this issue Feb 20, 2019

feat(router): add hash-based navigation option to setUpLocationSync (#…
…28609)

The `setUpLocationSync` function in @angular/router/upgrade didn't previously let you sync hash-based navigations. With this change, you can now pass an option to `setUpLocationSync` that will make sure location changes run in Angular in hash-based apps.

Fixes #24429 #21995

PR Close #28609

IgorMinar added a commit that referenced this issue Feb 20, 2019

feat(router): add hash-based navigation option to setUpLocationSync (#…
…28609)

The `setUpLocationSync` function in @angular/router/upgrade didn't previously let you sync hash-based navigations. With this change, you can now pass an option to `setUpLocationSync` that will make sure location changes run in Angular in hash-based apps.

Fixes #24429 #21995

PR Close #28609
@jasonaden

This comment has been minimized.

Copy link
Contributor Author

jasonaden commented Feb 26, 2019

Fixed with #28609.

@jasonaden jasonaden closed this Feb 26, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.