Keep Coding

My application makes use of polymer for front-end and app engine endpoints (Java) for my backend. For reasons I don't understand, my endpoints client is not loading and I could see some strange url requests failing which seem to have been modified by app-route in my polymer front-end. I see the following failures:-
https://(app-id).appspot.com/_ah/api/images/gweld_logo.png - Failed to load
resource: the server responded with a status of 404 ()
https://(app-id).appspot.com/src/_ah.html - Failed to load resource: the server responded with a status of 404 ()
My polymer code is based on the starter kit provided by polymer-cli. Here's the code for my-app.html:-
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
.
.
<template is="dom-if" if="{{!userSignedIn}}">
<div class="container">
<paper-card image="/images/gweld_logo.png" alt="(Company Name)" class="logo">
<div class="card-content horizontal layout center-justified">
Company Portal
</div>
<div class="card-actions horizontal layout center-justified">
<google-signin label-signin="Sign-in"
client-id="(client-id)"
scopes="https://www.googleapis.com/auth/userinfo.email"
signed-in="{{userSignedIn}}">
</google-signin>
</div>
</paper-card>
</div>
</template>
<template is="dom-if" if="{{userSignedIn}}">
.
.
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1" paper-drawer-toggle>View One</a>
</iron-selector>
.
.
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-view1 name="view1"></my-view1>
<my-view404 name="view404"></my-view404>
</iron-pages>
.
.
</template>
.
.
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
}
In my-view1.html, I make use of google-client-loader element to load the client for my app engine endpoints api.
Here's how I defined static-files in appengine-web.xml:-
<static-files>
<include path="/service-worker.js"/>
<include path="/bower_components/**.js"/>
<include path="/*.json"/>
<include path="/index.html"/>
<include path="/src/**.html"/>
<include path="/bower_components/**.html"/>
<include path="/bower_components/**.css"/>
<include path="/images/*.png"/>
<include path="/**.ico"/>
</static-files>
I have the following in my web.xml:-
<servlet>
<servlet-name>SystemServiceServlet</servlet-name>
<servlet-class>com.google.api.server.spi.SystemServiceServlet</servlet-class>
<init-param>
<param-name>services</param-name>
<param-value>(values removed here)</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>SystemServiceServlet</servlet-name>
<url-pattern>/_ah/spi/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
While I want index.html to be loaded for all requests, I don't want any request to load the client library intercepted by my client side routing. Please let me know how I can solve the above issues. Also, what is the correct practice to use client side routing (app-route) with app engine endpoints?