I get the following error using Polymer CDN (Polygit.org):
https://polygit.org/components/promise-polyfill/promise-polyfill-lite.html Failed to load resource: the server responded with a status of 404 ()
My head tag has the following:
<base href="https://polygit.org/components/" />
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="promise-polyfill/promise-polyfill-lite.html">
<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="iron-image/iron-image.html">
<link rel="import" href="paper-styles/demo-pages.html">
This is because polygit.org serves taylorhakes/promise-polyfill and not the fork maintained by PolymerLabs as its promise-polyfill component.
This can be verified by comparing the polygit.org/components/promise-polyfill/bower.json manifest to the one found in the taylorhakes/promise-polyfill repository.
As was stated by danielx you have to include promise-polyfill from PolymerLabs.
The following line will tell polygit to pull the latest release of promise-polyfill from polymerlabs organisation from github:
<link href="https://polygit.org/promise-polyfill+polymerlabs+*/components/"
rel="import">
Related
Summary
I'm working on a Polymer project based off the Polymer starter kit, and I ran into a problem where icons from the default icon set aren't appearing. Their size and style is calculated correctly, but there's no SVG within the tag when I use inspect element. I've tried icons from maps and social which all work, but the ones from icons just don't have an image.
I've tried various different solutions:
Following this Stack Overflow question here, I did the accepted solution with no results.
I deleted all of my Polymer components and did a fresh bower install + bower update. Still no go.
I saw somewhere that the Polymer Starter Kit has a conflict with the my-icons.html file, so I renamed it to custom-icons.html. This also didn't work.
This is very confusing and frustrating because the problem seemed to pop up out of nowhere. One day the default iron-icons were working, and the next they weren't.
My imports
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-localstorage/iron-localstorage.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="app-data.html">
<link rel="import" href="log-out.html">
<link rel="import" href="custom-icons.html">
Utilization
<a href="/#/home-quotes" tabindex="-1">
<paper-icon-item>
<iron-icon icon="icons:settings" item-icon></iron-icon> <!-- This doesn't work -->
Home
</paper-icon-item>
</a>
<a href="/#/secret-quotes" hidden$="[[!storedUser.loggedin]]" tabindex="-1">
<paper-icon-item>
<iron-icon icon="maps:add-location" item-icon></iron-icon> <!-- This works? -->
Secret Quotes
</paper-icon-item>
</a>
UPDATE The bug has been fixed in Polymer Starter Kit 2.1.1. Now when you run polymer init starter-kit, the generated codebase will include the fix.
I suspect the problem is a naming conflict with your iconset (Issue #934), which was recently fixed.
Before the fix, the name of the custom iconset in Polymer Starter Kit was icons, which is unfortunately also the name of the default iconset from <iron-icons>. Since your custom-icons.html import occurs after iron-icons.html, your iconset takes precedence.
The fix is to rename your custom icons to avoid the name conflict, allowing for both iconsets to coexist. That is, change the iconset's name attribute in your custom-icons.html to something like this:
<iron-iconset-svg name="my-custom-icons" size="24">
I am attempting to include my Polymer tools in my template page but the server is not properly routing to the files. I have put the files in their respective paths, but I get a 404 when I click on the live links.
<link rel="import" href="<%= static_path(#conn, "/assets/polymer/iron-elements/iron-pages/iron-pages.html") %>"/>
<link rel="import" href="<%= static_path(#conn, "/assets/polymer/iron-elements/iron-ajax/iron-ajax.html") %>"/>
<link rel="import" href="<%= static_path(#conn, "/assets/polymer/iron-elements/iron-meta/iron-meta.html") %>"/>
<link rel="import" href="<%= static_path(#conn, "/assets/polymer/iron-elements/iron-iconset-svg/iron-iconset-svg.html") %>"/>
<link rel="import" href="<%= static_path(#conn, "/assets/polymer/iron-elements/iron-iconset/iron-iconset.html") %>"/>
<link rel="import" href="<%= static_path(#conn, "/assets/polymer/iron-elements/iron-flex-layout/iron-flex-layout.html") %>"/>
<link rel="import" href="<%= static_path(#conn, "/assets/polymer/iron-elements/iron-icons/iron-icons.html") %>"/>
<link rel="import" href="<%= static_path(#conn, "/assets/polymer/iron-elements/iron-icons/maps-icons.html") %>"/>
<link rel="import" href="<%= static_path(#conn, "/assets/polymer/iron-elements/iron-icons/social-icons.html") %>"/>
You may use vulcanize to build a single file from multiple dependencies. Here is example setup for following elements:
<paper-dropdown-menu label="Your favourite pastry">
<paper-menu class="dropdown-content">
<paper-item>Croissant</paper-item>
<paper-item>Donut</paper-item>
<paper-item>Financier</paper-item>
<paper-item>Madeleine</paper-item>
</paper-menu>
</paper-dropdown-menu>
Create target.html:
<link rel=import href=bower_components/paper-dropdown-menu/paper-dropdown-menu.html>
<link rel=import href=bower_components/paper-menu/paper-menu.html>
<link rel=import href=bower_components/paper-item/paper-item.html>
Vulcanize elements:
vulcanize --inline-scripts --inline-css target.html > web/static/assets/polymer/rubber.html
Start serving polymer assets by adding into endpoint.ex:
only: ~w(css fonts images js favicon.ico robots.txt polymer)
Add HTML import for the bundle:
<link rel="import" href="<%= static_path(#conn, "/polymer/rubber.html") %>">
Most probably you would like to serve polyfill library also. Copy webcomponents-lite.js under web/static/vendor/ for this.
NOTE: brunch produces following error:
Component JSON file "bower_components/paper-elements/.bower.json" must have main property.
and stop processing other bower_components AFAICS. To prevent it you may work with bower/vulcanize from within some sub-folder of you project root. Moreover there is no need to process polymer's bower_components with brunch while you are using vulcanize.
See also a question about Polymer CDN - it may be possibly to load elements from CDN.
You most likely have your static asset path incorrect. I believe if you change it to:
"/polymer/iron-elements/..."
(notice the removal of "/assets"). You should be good to go.
I am importing polymer.html, paper-input.html, core-input.html but i am still getting the error that Polymer is not a function. What am I missing?
section of the imports below:
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input-decorator.html">
<link rel="import" href="../../../bower_components/core-input/core-input.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
try this.importHref if the error is being thrown on Polymer.importHref
Sometimes the documentation doesn't always match their demos.
if it is being thrown on things like your paper-input try check that it is the correct directory
I'm updating a little Polymer element to 1.x. It works fine in Chrome and Safari, but in the latest Firefox I get several "uncaught exception: Element name could not be inferred." errors.
Seems to be related to the html imports, because if I remove everything from the component.html except for the imports, then the errors still occur.
In the index.html I have this:
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="src/element.html">
In the element.html this:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
[EDIT] - Somehow the errors disappeared. I suspect due to either a Firefox or Polymer update.
Clear your browser cache to solve the problem.
install polymer#^1.1.0 which resolved to 1.7.0
it works for me
On my web page, I attempt to import the paper-toast element from the same directory as the other two Polymer elements. All have been installed with Bower and all have the same privileges.
<html>
<head>
<title>New Movement Entertainment</title>
<link rel=stylesheet href=css/home.css type=text/css>
<link rel="import" href="bower_components/paper-shadow/paper-shadow.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<script src=scripts/jquery.js></script>
However, upon page load I am greeted with a 404 Not Found for the paper-toast import. I have tried reinstalling the element and even putting its folder in the paper-input directory (which I know imports fine). Does anyone have any ideas?