The URL in the routes using ngRoute is encoded

[samarthagarwal]

Recently I have noticed that when using ngRoute module in an AngularJS app, the route contains #! in the URL, which was earlier just the #.

For example, www.webiste.com/#/login becomes www.website.com/#!/login but that does not work. As soon as I try to navigate to www.website.com/#!/login, the URL changes to www.website.com/#!%2Flogin.

I have to enable the html5Mode and also disable the requireBase which removes the base as a whole using the code,

$locationProvider.html5Mode({
       enabled: true,
       requireBase: false
});

and the URL changes to www.website.com/login which works fine but is misleading and is not what Angular SPA URLs look like.

If I do not enable the html5Mode, the URL is encoded and I cannot get around it. So www.website.com/#/login becomes www.website.com/#!/#%2Flogin (Notice the later / is encoded as %2F).

[gkalpak]

This is a documented breaking change.

[Charan2k16]

If you are encountering the issue with angular 1.6 and further versions, this might be because AngularJS 1.6 has changed the default for hash-bang urls in the $location service.

Further you can resolve the same by using :

app.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);