My app-router is set up as follows:
<app-router id="router" mode="pushstate">
<app-route path="/:category" import="bower_components/my-elements/category-page.html"></app-route>
<app-route path="/product/:query" import="bower_components/my-elements/product-page.html"></app-route>
</app-router>
Navigation to my category page works fine. If I change the path in the URL to be a different category then the content updates accordingly.
However when trying to load the product page, my app gets stuck in an infinite loop. The console prints an uncaught syntax error with unexpected token '<' coming from platform.js repeatedly.
Now I have noticed that this only happens whenever the path includes a slash. If I change the path to be just "/product" then the page loads fine but as soon as a slash is added so that the path is "/product/:query" or even "/product/new" then page doesn't load. The syntax error is infinitely thrown along with "Resource interpreted as Stylesheet but transferred with MIME type text/html" and "Resource interpreted as Script but transferred with MIME type text/html"
If I change the path of product-page to "/product" then no issues but by adding a slash to any path even category-page, causes the error to occur.
Does anyone know what may be causing this?
EDIT: updated title to be relevant to issue
I was having the same issue, and I just figured out it is because of relative paths. If you change the imports in your template (as well as the app-route imports) to absolute paths, that should fix your problem.