Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

$location service not compatible with 'turbolinks' (Ruby on Rails) #6638

Closed
asgeo1 opened this issue Mar 11, 2014 · 3 comments
Closed

$location service not compatible with 'turbolinks' (Ruby on Rails) #6638

asgeo1 opened this issue Mar 11, 2014 · 3 comments

Comments

@asgeo1
Copy link

asgeo1 commented Mar 11, 2014

I've been using AngularJS (v1.2.14) with a Ruby on Rails app, which has turbolinks turned on. It's been working great and I haven't had any issues (up until now).

I notice now though there is an issue when including the $location service. Simply importing this service into directive/controller/service will cause a JS error when clicking the browser's back button:

TypeError: Cannot call method 'charAt' of undefined
    at Object.LocationHashbangUrl.$$parse (http://test.delman.dev/assets/angular.js?body=1:8839:41)
    at http://test.delman.dev/assets/angular.js?body=1:9318:21
    at Scope.$eval (http://test.delman.dev/assets/angular.js?body=1:12076:28)
    at Scope.$digest (http://test.delman.dev/assets/angular.js?body=1:11904:31)
    at http://test.delman.dev/assets/angular.js?body=1:9327:45
    at http://test.delman.dev/assets/angular.js?body=1:4336:7
    at Array.forEach (native)
    at forEach (http://test.delman.dev/assets/angular.js?body=1:323:11)
    at fireUrlChange (http://test.delman.dev/assets/angular.js?body=1:4335:5)
    at jQuery.event.dispatch (http://test.delman.dev/assets/jquery.js?body=1:3075:9) 

I guess I could just avoid the $location service... the problem is some 3rd party libraries (i.e. angular-strap) are including it.

Not ruling out this being a turbolinks issue either - I'm not really sure what's causing the error in the AngularJS internals

@caitp
Copy link
Contributor

caitp commented Mar 11, 2014

According to the docs, turbolinks does its own weird version of PJAX routing, without requiring you to fiddle with response (by removing layout, for example).

Now, $location is doing 2 things: 1) on click events, it will check the URL you clicked on, and if it's the app url, and if it's an app url, it gets parsed. 2) on browser url change, it will try to parse the url.

I think you're running into situation #2, because otherwise I'd expect the link to just not be followed. So here's what's happening:

  var withoutBaseUrl = beginsWith(appBase, url) || beginsWith(appBaseNoFile, url);
  var withoutHashUrl = withoutBaseUrl.charAt(0) == '#'
  // ...

$location looks for the base url, but it's not finding it, and this means that it tries to call charAt() of an undefined variable.

The quickest solution is to A) turn on html5 mode and B) make sure that all your turbo links are relative to the application base url.

I can't guarantee that will work (as I haven't been debugging this), but I think the chances are pretty good

@asgeo1
Copy link
Author

asgeo1 commented Mar 11, 2014

Yes, turning on html5mode does indeed fix the issue. Well done!

@caitp
Copy link
Contributor

caitp commented Mar 11, 2014

Alright, I think we can close this then? happy hacking

@caitp caitp closed this as completed Mar 11, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants