Menu
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?
632
I believe you must have trailing / inside base href
<base href="/app/">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
