AngularJS All slashes in URL changed to %2F

Question

I'm having a massive problem with AngularJS routing.

Up until recently everything has been fine with the following route:

$routeProvider.when('/album/:albumId', {
    controller: 'albumPageController',
    templateUrl: 'views/album.html'
});

and using the href:

<a href="/#/album/{{album.id}}">Link</a>

However, now all of the slashes are being encoded into %2F.

So when I click the link, or type localhost:8000/#/album/1 into the browser, the URL is changed to:

http://localhost:8000/#%2Falbum%2F1

I've tried several things to correct this:

Using ng-href instead of href, Not using the first / (ie href="#/album/{{album.id}}") Running the app in Homestead localhost (Laravel's linux vagrant machine) instead of localhost on Windows 10

Any help would be much appreciated!

Answer 1

%2F is the percent-encoding for the forward-slash / character.

This problem is related to the fact that AngularJS 1.6 has changed the default for hash-bang urls in the $location service.

To revert to the previous behavior:

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

For more information, see SO: angularjs 1.6.0 (latest now) routes not working.