AngularJS HTML5 Mode – How do direct links work without server specific changes?

The AngularJS documentation does in fact mention this

Server side Using this mode requires URL rewriting on server side,
basically you have to rewrite all your links to entry point of your
application (e.g. index.html)

In this case, one Java-based solution is to tell the server “map all urls to index.html.” This can be done in any HTTP Server or container. I implemented this using Java/Servet since I want my application to be HTTP server agnostic (ie Apache versus NginX, or Tomcat/JBoss only).

In web.xml:

  <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

  <servlet>
      <servlet-name>StaticServlet</servlet-name>
      <jsp-file>/index.jsp</jsp-file>
  </servlet>

  <servlet-mapping>
      <servlet-name>StaticServlet</servlet-name>
      <url-pattern>/app</url-pattern>
  </servlet-mapping>

And index.jsp simply looks like:

<%@ include file="index.html" %>

And add the following to the tag within index.html:

<base href="https://stackoverflow.com/app" />

Leave a Comment