polymer error on reloading

Question

i have installed the polymer starter kit and once i load the starter kit every thing gets loaded properly and the url looks like http://127.0.0.1:8887/ then once i click on any view that page gets open and url changes to http://127.0.0.1:8887/view1 but if i reload the browser now, instead of showing the same page it displays the entry not found error.i have tried searching over internet for solution but i didn't find one.what should i do to fix it.

Answer 1

When you refresh the page (http://127.0.0.1:8887/view1) you request the view1 resource from the server, but the server can't find it because there isn't. That path (.../view1) is only recognized by the polymer app itself and not the server.

Try using hash in the path. Add the use-hash-as-path attribute to your app-location element inside the main page.

So, it should look like this:

<app-location route="{{route}}" use-hash-as-path></app-location>

EDIT

It is not enough to add the use-hash-as-path property. You will also need to change slightly the href in the menu items.

href="/view1" to href="#/view1"

The code with more details:

<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

<app-drawer-layout fullbleed>

  <!-- Drawer content -->
  <app-drawer>
    <app-toolbar>Menu</app-toolbar>
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a name="view1" href="#/view1">View One</a>
      <a name="view2" href="#/view2">View Two</a>
      <a name="view3" href="#/view3">View Three</a>
    </iron-selector>
  </app-drawer>
  ...
</app-drawer-layout>