Angular JS IE9 Hashbang url rewriting

Question

Quite an odd situation here.

So I have two routes: /RouteA (/ also defaults to here) and /RouteB

/RouteA actually uses client side routing while /RouteB does not if that matters.

When I try navigating to /RouteB, the URL is initially /RouteB which is correct.

Since IE9 doesn't support HTML5, Angular rewrites the url with a hashbang to /#/RouteB

When the rewriting occurs, it forces a browser refresh (can we stop this behavior?) which sends me right back to / (which is ultimately /RouteA.

Is there a way to prevent the browser from resending the request when the url is rewritten?

The base tag is currently <base href="/"/>.

I tried doing something like this which allows me to land on the page, but breaks the anchor tag in the main menu thats trying to send me back to /RouteA:

  if (window.history && window.history.pushState) {
     $locationProvider.html5Mode(true);
  }
  else {
     window.location.hash = '/';       
     $locationProvider.html5Mode(false);
  }

e.g. /#/RouteB becomes /RouteB/#/. Then clicking on a link back to /RouteA, the route ends up becoming /RouteB/RouteA which obviously breaks.

So I tried the solution from a similar question but it yielded the same results as above. $location / switching between html5 and hashbang mode / link rewriting

Does anyone have any ideas?

Thanks in advance!

I don't see what's the big problem with it reloading on first visit back to /#/RouteB. At some point it's going to have to go back to that anyway otherwise you'll end up with urls like /RouteB/#/RouteA. The hashbang is a workaround for browsers that don't support pushstate, it's not going to be as pretty as pushstate. — Kevin B
I could care less about the reload if it didn't redirect me back to /RouteA. The problem is that anything after the # is ignored when a page is refreshed. So refreshing someSite.com/#/RouteB is the same as going to someSite.com as everything after the # is ignored. — Garrett Stevenson
So, the problem is, if you link them directly to /RouteB it's rewriting to /RouteA? it should be taking you to /#/RouteB. If that's rendering RouteA instead, I'd like to see your routing. — Kevin B
something wrong in your routing design. Sounds like you are expecting a single page app to work on multiple server routes which doesn't make sense — charlietfl
Its two separate single page apps on two separate server routes. Server side there is a specific route for RouteA and RouteB with the default route of / also leading to RouteA. RouteA is the default SPA that is hit when you navigate to this site. Hence why the refresh of foo.com/#/RouteB is sending me back to RouteA. Unfortunately that behavior cannot change. — Garrett Stevenson

Garrett Stevenson Garrett Stevenson · Accepted Answer · 2015-04-10T17:50:33

I managed to get it working. It isn't pretty, but since there is no client side routing happening in /RouteB so it is good enough.

Before the two different apps shared an angular module. Instead I created two different modules and had those depend on the previously shared module.

angular.module('sharedModule', ['dependancy1', ...]);

<!-- RouteA app -->
<div ng-app="sharedModule">...

<!-- RouteB app -->
<div ng-app="sharedModule">...

Became

angular.module('sharedModule', ['dependancy1', ...]);
angular.module('routeAModule', ['sharedModule']);
angular.module('routeBModule', ['sharedModule']);


<!-- RouteA app -->
<div ng-app="routeAModule">...

<!-- RouteB app -->
<div ng-app="routeBModule">...

Then in routeBModule I used the fix from this post: $location / switching between html5 and hashbang mode / link rewriting that was also mentioned above in my question.

Now when navigating to /RouteB the route gets rewritten to /RouteB#/ which wont reload / and dumping me back a different page.

There were two gotcha's with this solution.

Navigating to this page with a trailing / can mess up relative links. e.g. /RouteB#/ becomes /RouteB/#/ so trying to link to /NewRoute would end up linking to /RouteB/NewRoute
Anchor tags on this page with a href="#" cause the page to refresh.

There are likely many improvements that can be made to this and if I make them ill try to remember to update this answer.

Also if anyone has a better solution please feel free to post it.

<3 IE9

Angular JS IE9 Hashbang url rewriting

2 Answers