Angular All slashes in URL changed to %2F


I'm having a massive problem with Angular 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/{{}}">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:


I've tried several things to correct this:

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

Any help would be much appreciated!

Problem courtesy of: MC123


%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) {

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

Solution courtesy of: georgeawg


A bit late to the party but adding a '!' to your URLs will work just fine. This bothered me for a bit as well. This is a change in the latest AngularJS 1.6.x and I read somewhere that Google requires SPAs to have that '!' after the hash. As a result my routes look as they should but my navigation makes sure I add '!' in my references. For example:

    <li><a href="#!/">Home</a></li>
    <li><a href="#!/page2">Page 2</a></li>
    <li><a href="#!/page3">Page 3</a></li>
    <li><a href="#!/page4">Page 4</a></li>

I hope this helps you.


Discussion courtesy of: realnsleo

slash encoding can be disabled:

$urlMatcherFactoryProvider.type('SlashFix', {
  raw:    true,

       url: '/{slug:SlashFix}'


as described here

Discussion courtesy of: Igor Simic

The most simple solution is to add a ! to client-side URLs (if not using HTML5 mode, which you probably do if you're here).

Client-side, update URLS like this:

#/foo/bar > #!/foo/bar

And since you keep the #, there is no issue of conflict with server-side routing. Everyone happy.

Discussion courtesy of: Overdrivr

Remove the hash symbol from the link, since you are using html5mode you do not need a hash symbol for routing

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


<a href="/album/{{}}">Link</a>
Discussion courtesy of: Umer Z

For me, i fixed the problem with @Igor Simic and @Umer Z solution :

app.config(function($locationProvider) {

    enabled: false,
    requireBase: true

<a href="#/mylink/"> <span>MyLink</span></a>

Which give :

Hope this help.

Discussion courtesy of: Nizardinho

This recipe can be found in it's original form on Stack Over Flow.