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

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?

Recommended topics

Hot tags