A weird case of AngularJS router url encoding gone wrong

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:

manfredsteyer/ngUpgrade-without-preparation

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:

angularjs 1.6.0 (latest now) routes not working

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:

feat($location): default hashPrefix to '!' by petebacondarwin · Pull Request #14202 · angular…

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.