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?
Related
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">
I have seen this go back and forth in starter kits and I was wondering what is the best practice for importing element bower elements?
Should each element import the same bower packages redudntly? Or should there be be just one html sheet that imports all the bower elements?
Also, why is <link rel="import" href="../bower_components/polymer/polymer.html"> always imported in each element regardless?
example- each element imports it's own elements, sometimes redudently(other elements may import these also):
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="my-view1">
Or one html sheet importing all elements:
<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.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-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/iron-form/iron-form.html">
<link rel="import" href="../bower_components/google-map/google-map.html">
<link rel="import" href="../bower_components/google-map/google-map-poly.html">
<link rel="import" href="../bower_components/google-map/google-map-marker.html">
<link rel="import" href="../bower_components/google-map/google-map-directions.html">
<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../bower_components/paper-radio-group/paper-radio-group.html">
I believe that with the establishment of the PPL pattern which got announced at Google I/) 2016, and the Polymer build mechanism, a basic structure emerged driven by Polymer CLI.
What I do depends on whether I am attempting to build a re-useable element or just one component which might be re-useable. In a re-useable alement I always import polymer and just those elements that I have used within the element. I reference everything via ../import-element/import-element.html
With my own application I have a rule that tries to lazy load everything via this.importHref except that which is going to be on display when that element initially loads. I have build a behavior for elements that include iron-pages so support that. In this case I import polymer, any elements that will initially be on display. I don't import the rest
html imports are de-duped by Polymer, so it doesn't matter if you attempt to load things more than once, they will only be loaded once.
In this case I reference the bower component elements with an absolute url /bower_components/import-element/import-element.html and for those in my app with relative urls. I currently store ALL custom element for my app in the same directory, so to reference them I am using just import-element.html. I think this last paragraph is not accepted practice, but I just find it easier not having to effectively map two physical directories to the same url.
TL;DR;
I don't that solid best practice has emerged yet.
Longer read
My personal opinion is that import links are generally not a good idea at all, because you will run into trouble when bundling. Unless you want to bundle your entire application, in which case imports' location doesn't matter.
You may want to bundle related elements. For example there can be <app-page-admin-panel>m <app-page-user-profile>, etc. Each of them could be lazy-loaded the first time they are required. Bundled HTML imports don't give you such flexibility AFAIK.
If you bundle everything, there will be nothing to lazy-load of course.
If you create a bundle for each element loaded on-demand is a step forward but what about common elements? If both admin panel and user profile elements import <paper-button> would you include it in each bundle? This is probably safe, albeit wasteful wrt bandwidth. Polymer itself, however, cannot be imported multiple times. Thus importing it in each element is probably not a good idea.
Possible future solution - ES6 module imports
Personally I very much hope for ES6 imports. With import "polymer" you are safe, because bundled or not, it will be guaranteed by the module loader (and browser in the future) that you will only ever import it once. You may want to see my answer to that other question: Modules in Polymer.
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
I am learning polymer. Want to link paper-button, but doesn't work. where is the mistake?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<paper-button>flat button</paper-button>
</body>
</html>
You code is working with a proper bower configuration. Here is the single module I installed, I guess this is your problem:
bower install Polymer/paper-elements
This is documented in the guide Using elements of the Polymer project.
Check here. it is working.
I make it using following way. I think your imported links are not loading.
<script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.min.js?20150316"></script>
<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-button/paper-button.html">
<body>
<paper-button>flat button</paper-button>
</body>
I'm using Polymer in one of my web projects. In the index.html page, I included the script and include tags in the following way:
<link rel="import" href="bower_components/core-item/core-item.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<script src="scripts/jquery.min.js"></script>
<link href="styles/css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="styles/mycss.css">
In the body tag, I'm using a paper-button the following way:
<paper-button class="blue-ripple" role="button" tabindex="0">Hello</paper-button>
It is rendering perfectly on Chrome (40.0.2214.111 m) but the ripple style is not working on Firefox (35.0.1). I've checked the console and there seem to be no conflicts or warnings or errors.
You need to load the polyfills:
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
See https://www.polymer-project.org/docs/start/platform.html
In the third link tag your href point to styles/css.
This could be the problem.