AngularJS URL get escaped with $locationProvider.html5Mode(true)

Question

I am building an AngularJS application, it works well with hash URL. If I click on an anchor <a href="#/3125/"> then the URL is updated to http://localhost:8000/app/index.html#/3125/ which is desired.

Now I plan to change the URL to HTML5 mode, so I configured the application with below code

var demoApp = angular.module('demoApp', ['demoResources']);
    demoApp.config(['$locationProvider', function($locationProvider) {
        $locationProvider.html5Mode(true);
}]);

Unfortunately, this time if I click on the same anchor, I got URL escaped as http://localhost:8000/app/index.html#%2F3125%2F thus the link is broken. However, the expected URL is http://localhost:8000/app/index.html/3125.

Does anyone know why this is not working? I am using Angular 1.2.1

Community · Accepted Answer · 2017-05-23 12:03:46Z

1

You should add a <base> tag in the <head> section of your application :

<base href="/app"/>

See the "Relative Links" section in the $location documentation.

See also AngularJS subdirectory routing not working, with <base> tag applied

edited May 23, 2017 at 12:03

CommunityBot

11 silver badge

answered Jan 24, 2014 at 19:47

Juljan

8132 gold badges9 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS URL get escaped with $locationProvider.html5Mode(true)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related