How to setup AngularJS $locationProvider HTML5 mode for non-root base urls?

Question

I have a working AngularJS (1.3.8) application, which is deployed as a web app in Tomcat under an application context 'app'.

URLs look like this:

https://www.myserver.com/app/#/login 

https://www.myserver.com/app/#/register

etc. Routes are defined like this:

$routeProvider.when(
    'login',
    {templateUrl: 'partials/login.html?' + now, controller: 'LoginController'}
);

$routeProvider.when(
    'register',
    {templateUrl: 'partials/register.html?' + now, controller: 'RegistrationController'}
);

$routeProvider.otherwise(
    {redirectTo: 'login'}
);

Everything is working fine. What I now need to do is remove the hashbangs from the URLs and use the HTML5 mode of $location. So far, I can not get this to work.

My assumption was that I just need to call

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

and now the app URLs change to

https://www.myserver.com/app/login 

https://www.myserver.com/app/register

This is not working. When I request the URL

https://www.myserver.com/app

Angular redirects to

https://www.myserver.com/login

Overall, the whole routing and resource loading is broken with this change. For example, the partials URLs in the routing definitions can not be resolved. They are only working when I add a '/app/' prefix.

I tried to use the base tag, changing the $locationProvider call to

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

and using

<base href="/app">

Surprisingly, this has no effect. Still, entering https://www.myserver.com/app leads to a AngularJS-redirect to https://www.myserver.com/login. The URL https://www.myserver.com/app/login is not available.

This is how I use the base tag:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <link href="css/mycss" rel="stylesheet" type="text/css">
    ...
    <script src="js/my.js"></script>
    <base href="/app">
</head>
<body class="ng-cloak">
    <ng-view></ng-view>
</body>
</html>

I also encounterd other problems. For example, if I change the location of the base tag inside the HTML file like this:

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <base href="/app">
    <link href="css/mycss" rel="stylesheet" type="text/css">
    ...
    <script src="js/my.js"></script>
</head>
<body class="ng-cloak">
    <ng-view></ng-view>
</body>
</html>

then suddenly the JS and CSS files can not be resolved any more during load.

Can somebody explain what I am doing wrong?

Pankaj Parkar · Accepted Answer · 2015-07-15 10:03:01Z

4

I believe you must have trailing / inside base href

<base href="/app/">

answered Jul 15, 2015 at 10:03

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

dionysus Over a year ago

Where do you set the base tag? Is this base tag supposed to set within the $locationProvider.html5Mode() method? Please provide an example of how and where this is supposed to be set.

Pankaj Parkar Over a year ago

base tag will appear in head tag & $locationProvider.html5Mode() inside app.config phase

Shubham Tiwari Over a year ago

Pankaj, what if the production files lies under myserver/MyProject/ whereas during development MyProject will be your root folder, so in this scenario do we have to manually edit the index.html base href after deployment. Also the above solution does not work during development running on local server.

Pankaj Parkar Over a year ago

@ShubhamTiwari this can be taken care while creating build of your application, check this answer basically you should place a placeholder on your index.html and then replace it from automation tool like grunt or gulp

Collectives™ on Stack Overflow

How to setup AngularJS $locationProvider HTML5 mode for non-root base urls?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related