Issues with creating REST rules with UrlRewriteFilter

Question

I set up my tomcat server to work with urlRewriterFilter to enable the html5 feature in AngularJS and remove the # from the urls. It seems like the urlRewriterFilter is working fine with requests in the format of: <SERVER>/<APP_NAME>/tracks - the page is loading properly.

The problem: is with requests like: <SERVER>/<APP_NAME>/tracks/<TRACK_NAME>/<TRACK_ID>. - Which loads the index.html Ok but the resources are not.

So I am getting 404 since the path is wrong

<SERVER>/<APP_NAME>/tracks/<TRCK_NAME>/bower_components/underscore/underscore.js 

instead of:

<SERVER>/<APP_NAME>/bower_components/underscore/underscore.js 

Question: How to tell UrlRewriterFilter not to concatenate the urls after it had matched a rule? Did I add the libraries in index.html in a wrong way?

urlrewrite.xml

<urlrewrite default-match-type="wildcard">
    <!-- All requests to root are forwarded to home page. -->

    <rule>
        <from>/signup</from>
        <to>index.html</to>
    </rule>

    <rule>
        <from>/tracks</from>
        <to>index.html</to>
    </rule>

    <rule>
        <from>/tracks/**</from>
        <to>/index.html</to>
    </rule>

</urlrewrite>

Chrom dev console

GET http://localhost:8080/devstage-1.0/tracks/analysis/bower_components/moment/moment.js 404 (Not Found) 

It tries to load moment from http://localhost:8080/devstage-1.0/tracks/analysis instead of http://localhost:8080/devstage-1.0/

UrlRewriteFilter log: (snippet)

DEBUG|http-apr-8080-exec-2|o.s.s.web.FilterChainProxy    | /tracks/analysis/bower_components/moment/moment.js at position 1 of 12 in additional filter chain; firing Filte
r: 'CORSFilter'
DEBUG|http-apr-8080-exec-10|o.s.s.web.FilterChainProxy    | /tracks/analysis/bower_components/angular-route/angular-route.js at position 3 of 12 in additional filter chai
n; firing Filter: 'SecurityContextPersistenceFilter'
DEBUG|http-apr-8080-exec-8|o.s.s.web.FilterChainProxy    | /tracks/analysis/bower_components/angularytics/dist/angularytics.js at position 1 of 12 in additional filter ch
ain; firing Filter: 'CORSFilter'
DEBUG|http-apr-8080-exec-2|o.s.s.web.FilterChainProxy    | /tracks/analysis/bower_components/moment/moment.js at position 2 of 12 in additional filter chain; firing Filte
r: 'WebAsyncManagerIntegrationFilter'

I load the resources in the index.html like this:

<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/underscore/underscore.js"></script>

Answer 1

It stemmed from a bug with the way I was calculating the base URL. Once it was added at the first line of the head, resources were loaded fine.

<base href='http://localhost:8080/<MY_APP_NAME>/'/>