I am trying to incorporate app-router into my Polymer app by following the guides below:
https://erikringsmuth.github.io/app-router/#/
My Polymer code is as follows for the element where I have incorporated app-router:
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../app-router/app-router.html">
<polymer-element name="my-element">
<template>
<style></style>
<app-router mode="pushstate">
<app-route path="/:id" import="elements/new-page.html"></app-route>
</app-router>
</template>
<script>
Polymer({});
</script>
</polymer-element>
The id variable should be bound to the element below. The id is simply used as an index to get specific JSON data.
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="my-service.html">
<polymer-element name="new-page" attribute="id">
<template>
<style></style>
<my-service data="{{data}}"></my-service>
<img src="{{data[id].bannerImage}}"/>
<h2>{{data[id].contentHeading}}</h2>
<template repeat="{{content in data[id].content}}">
<img src="{{content}}" class="content"/><br>
</template>
</template>
<script>
Polymer({});
</script>
</polymer-element>
However when I navigate to localhost:8000/1 for example, I get a 404 error. I don't think I am using app-router correctly hence the error.
Would someone be able to spot my mistake?
I believe you have to setup a rewrite rule on your server so it always targets your index.html file. You can find this kind of routing almost anywhere, but if you need one for Apache2 you can take the one from the Zend Skeleton Application : Zend Skeleton Application .htaccess file
Just don't forget to adapt to your project (especially index.html instead of index.php).