A weird case of AngularJS router url encoding gone wrong

Abou Kone
Abou Kone
Aug 30, 2017 · 2 min read

I was going through the ngUpgrade process of updating an existing AngularJS (v 1.2)application to Angular and ran into a peculiar error in getting the application up and running. The Angular version being quite outdated, my first task was to get it running with a more recent version of AngularJS, v1.6.6 to be more exact. My ngUpgrade/Angular (cli)/AngularJS set up is close to what is described here based on the Victor Savkin recommendations:

where both my Angular and AngularJS applications are running side by side with the Angular router handling Angular component routes and the AngularJS router handling my existing legacy AngularJS routes and this is where things get interesting. I was running into the exact same issue that is described in this StackOverflow post:

If i tried to navigate to an AngularJS route, let’s say for example/admin , I would get redirected to /#!/#/%2Fadmin ! Many cases of WTF later and trying different things to no avail, I ran into the issue posted above which linked to this issue on the AngularJS repo:

Long story short, if you’re updating to Angular 1.6 in an existing AngularJS application and your routing breaks with all kinds of encoding getting mixed in the url, a breaking change is a culprit:

The hash-prefix for $location hash-bang URLs has changed from the empty
string "" to the bang "!". If your application does not use HTML5 mode
or is being run on browsers that do not support HTML5 mode, and you have
not specified your own hash-prefix then client side URLs will now contain
a "!" prefix. For example, rather than mydomain.com/#/a/b/c will become
mydomain/#!/a/b/c.

If you actually wanted to have no hash-prefix then you should configure
this by adding a configuration block to you application:

$locationProvider.hashPrefix("");

This will fix the issue and get you going on your merry way. Long term though, the takeaway is to update your routing to make it compatible with Google’s AJAX crawling though. This would mean updating all your href to use the bang as well and setting the prefix to the bang.

Code d'Ivoire

Nous sommes une communauté de coders en Cote d'Ivoire.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store