cant make new routing in Polymer 1.0 starter-kit (via page.js and iron-page)

Question

i am new to polymer and i just start it with Polymer 1.0 starter-kit

i understand the structure of Polymer app and used the page.js for making a new rout like this.

window.addEventListener('WebComponentsReady', function() {

    // We use Page.js for routing. This is a Micro
    // client-side router inspired by the Express router
    // More info: https://visionmedia.github.io/page.js/
    page('/', function () {
      app.route = 'home';
    });

    page('/users', function () {
      app.route = 'artworks';
    });

//my new routing def. <<<<<<<<
    page('/artworks', function () {
      app.route = 'artworks';
    });

    page('/users/:name', function (data) {
      app.route = 'user-info';
      app.params = data.params;
    });

    page('/contact', function () {
      app.route = 'contact';
    });

    // add #! before urls
    page({
      hashbang: true
    });

  });

as i understood the page.js sets the app.route to some values and the Polymer iron-pages uses the app.route to select the right section to show with selected="{{route}}" the code is like this:

<iron-pages attr-for-selected="data-route" selected="{{route}}">
  <section data-route="home">home section</section>
  <section data-route="users">users section</section>
  <section data-route="artworks">artworks section</section>
  <section data-route="user-info">user-info section</section>
  <section data-route="contact">contact section</section>
</iron-pages>

after all what is the problem!? well when i use localhost:8000/artworks the page.js wont change it to localhost:8000/#!/artworks but it do just the same for every other routed address like localhost:8000/users or localhost:8000/contact as a result the web browser will search for the file at localhost:8000/artworks folder and finds nothing so a 404 err will occur.

i can not understand now. what did i missed here? any idea?

Answer 1

i don't know exactly why but it seems that the Polymer were not reading the routing file at all! so i just copy-pasted the routing code in my app.js file and everything works normal now!

so now my app.js has all the routing codes at the end and i also attached the page.js in the head of my index.html(the main file of Polymer app)

i have no idea why, but it's working now.

Answer 2

Not sure if this would work, but maybe using relative addresses based on your port might help. For example try something like app.route = window.location.protocol + '//' + window.location.hostname + ":8000" + window.location.pathname + "home";

Answer 3

I had the same problem, and it appears to be a problem of cache ; the routing.html page was cached by navigator, so new routes were not seen. Clearing the cache resolved my problem. Hope this helps !