title: How to setup AngularJS $locationProvider HTML5 mode for non-root base urls?
body: <p>I have a working AngularJS (1.3.8) application, which is deployed as a web app in Tomcat under an application context 'app'.</p>
  
  <p>URLs look like this:</p>
  
  <pre><code>https://www.myserver.com/app/#/login 
  
  https://www.myserver.com/app/#/register
  </code></pre>
  
  <p>etc. Routes are defined like this:</p>
  
  <pre><code>$routeProvider.when(
      'login',
      {templateUrl: 'partials/login.html?' + now, controller: 'LoginController'}
  );
  
  $routeProvider.when(
      'register',
      {templateUrl: 'partials/register.html?' + now, controller: 'RegistrationController'}
  );
  
  $routeProvider.otherwise(
      {redirectTo: 'login'}
  );
  </code></pre>
  
  <p>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. </p>
  
  <p>My assumption was that I just need to call</p>
  
  <pre><code>$locationProvider.html5Mode({
      enabled: true,
      requireBase: false
  });
  </code></pre>
  
  <p>and now the app URLs change to  </p>
  
  <pre><code>https://www.myserver.com/app/login 
  
  https://www.myserver.com/app/register
  </code></pre>
  
  <p>This is not working. When I request the URL </p>
  
  <pre><code>https://www.myserver.com/app
  </code></pre>
  
  <p>Angular redirects to  </p>
  
  <pre><code>https://www.myserver.com/login
  </code></pre>
  
  <p>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.</p>
  
  <p>I tried to use the base tag, changing the $locationProvider call to</p>
  
  <pre><code>$locationProvider.html5Mode({
      enabled: true
  });
  </code></pre>
  
  <p>and using </p>
  
  <pre><code>&lt;base href="/app"&gt;
  </code></pre>
  
  <p>Surprisingly, this has no effect. Still, entering <a href="https://www.myserver.com/app" rel="nofollow">https://www.myserver.com/app</a> leads to a AngularJS-redirect to <a href="https://www.myserver.com/login" rel="nofollow">https://www.myserver.com/login</a>. The URL <a href="https://www.myserver.com/app/login" rel="nofollow">https://www.myserver.com/app/login</a> is not available. </p>
  
  <p>This is how I use the base tag:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;link href="css/mycss" rel="stylesheet" type="text/css"&gt;
      ...
      &lt;script src="js/my.js"&gt;&lt;/script&gt;
      &lt;base href="/app"&gt;
  &lt;/head&gt;
  &lt;body class="ng-cloak"&gt;
      &lt;ng-view&gt;&lt;/ng-view&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also encounterd other problems. For example, if I change the location of the base tag inside the HTML file like this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;base href="/app"&gt;
      &lt;link href="css/mycss" rel="stylesheet" type="text/css"&gt;
      ...
      &lt;script src="js/my.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="ng-cloak"&gt;
      &lt;ng-view&gt;&lt;/ng-view&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>then suddenly the JS and CSS files can not be resolved any more during load.</p>
  
  <p>Can somebody explain what I am doing wrong?</p>