Polymer Routing -
i new polymer testing things out using polymer template:
https://www.polymer-project.org/1.0/start/toolbox/set-up
everything working correctly except when type in direct url, example site.com/page
app-route: https://github.com/polymerelements/app-route load things correctly if click href link /page not load correctly if type in url directly (i 404 error).
what missing? haven't change code demo app (demo app doesn't work me when type in url directly).
you need add .htaccess file index.html is. here full working code routing , iron-pages in it.
.htaccess
rewriteengine on rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewriterule .* /
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"> <title>....</title> <meta name="description" content="...."> <link rel="manifest" href="/manifest.json"> <link rel="import" href="/src/main-app.html" async> <style> ..... </style> </head> <body> <main-app></main-app> <script> window.performance && performance.mark && performance.mark('index.html'); polymer = {lazyregister: true, dom: 'shadow'}; (function() { if ('registerelement' in document && 'import' in document.createelement('link') && 'content' in document.createelement('template')) { // platform good! } else { // polyfill platform! var e = document.createelement('script'); e.src = '/bower_components/webcomponentsjs/webcomponents.min.js'; document.body.appendchild(e); } })(); </script> </body> </html>
main-app.html
<!-- start of imports --> <link rel="import" href="../bower_components/polymer/polymer.html"> <!-- iron ajax --> <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html"> <!-- route --> <link rel="import" href="../bower_components/app-route/app-location.html"> <link rel="import" href="../bower_components/app-route/app-route.html"> <!-- iron pages--> <link rel="import" href="../bower_components/iron-pages/iron-pages.html"> <!-- fragments --> <link rel="import" href="you-page-to-go-to.html"> <dom-module id="main-app"> <template> <style> .... </style> <!-- app routing --> <app-location route="{{route}}"></app-location> <app-route route="{{route}}" pattern="/:page" data="{{routedata}}" tail="{{subroute}}"> </app-route> <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible"> <!-- general --> <you-page-to-go-to name="you-page-to-go-to"></you-page-to-go-to> </iron-pages> </template> <script> polymer({ is: 'main-app' properties: { page: { type: string, reflecttoattribute: true, observer: '_pagechanged' }, title:{ type:string, value:"null" } }, /* route */ observers: [ '_routepagechanged(routedata.page)' ], _routepagechanged: function(page) { this.page = page || 'home'; this.draweropened = false; }, _pagechanged: function(page, oldpage) { if (page != null) { this.title = page; this.importhref( this.resolveurl('main-' + page + '.html'), function() { this._pageloaded(boolean(oldpage)); }, null, true); } }, _pageloaded: function(shouldresetlayout) { if (shouldresetlayout) { this.async(function() { }, 1); } }, }); </script> </dom-module>