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:

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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