Unable to get Angular html5mode and UrlRewriteFilter working with certain URLs

Question

I'm using an AngularJS 1.3 webapp with a Java/Jersey REST API. I finally got html5mode working with the Tuckey UrlRewriteFilter so that something simple like localhost:8080/#/page is now just localhost:8080/page. But, I can't seem to get something more complex like localhost:8080/mypage/category/subcategory/item working properly. This url will load in html5mode when in a single browser tab, but if I open the link in a new tab I get a 404.

Here are my pom and web.xml files:

pom.xml

<filter>
    <filter-name>UrlRewriteFilter</filter-name>
    <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
    <init-param>
        <param-name>confPath</param-name>
        <param-value>/WEB-INF/urlrewrite.xml</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>UrlRewriteFilter</filter-name>
    <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
</filter-mapping>

web.xml:

<urlrewrite>
    <rule match-type="wildcard">
        <from>*/page</from>
        <to>index.html</to>
    </rule>

    // what should this rule look like in order to recognize a url like:
    // localhost:8080/mypage/category/subcategory/item
    <rule match-type="wildcard">
        <from>?</from>
        <to>index.html</to>
    </rule>
</urlrewrite>

I read through the UrlRewriteFilter documentation here and tried using different variations of the wildcard matching and regex syntax, but I always end up getting a 404.

I'll also add that I'm using angular-ui-router version 0.2.13 and my url for the page/state in question looks something like /mypage/:category/:subcategory/:item.

So my question is how can I match this pattern so that the redirect to index.html works correctly for html5mode or should I configure the routing differently to work better with the UrlRewriteFilter?

Petri Ryhänen Petri Ryhänen · Accepted Answer · 2016-09-13T06:10:23

Here is what I ended up using

<urlrewrite>
<rule match-type="regex" enabled="true">
    <condition type="request-filename" operator="notfile" />
    <condition type="request-filename" operator="notdir" />
    <condition type="request-uri" operator="notequal">(\.html|\.js)</condition>
    <from>^/html/(.*rootpage1.*|.*rootpage2.*)$</from>
    <to last="true">/html/index.html</to>
</rule>

As my app is using <base href="/myapp/html/">

I also had to change the references on my index.html from relative to href="/myapp/html/otherpage.html" because eg. when using relative references on /myapp/html/rootpage1/page1/something and the rewrite passes the url to index.html it is on rootpage1/ scope then instead of html/ scope.

Unable to get Angular html5mode and UrlRewriteFilter working with certain URLs

1 Answers