SystemJS with polymers + elements
In a SystemJS + JSPM managed project, how can I use Polymer elements?
I used jspm install github:Polymer/polymer
to install Polymer and also jspm install github:PolymerElements/iron-elements
to install iron elements.
There seem to be several problems with this:
At first, for example, in the iron-elements.html file, the import goes in the wrong paths:, <link rel="import" href="../polymer/polymer.html">
while the Polymer directory is actually named with its version (as usual with JSPM), so the actual import should be <link rel="import" href="../polymer@1.0.5/polymer.html">
in my case.
Second, when importing Polymer files, it seems a bit dumb in the SystemJS environment to just place it inside index.html, including the version path:
<link rel="import" href="jspm_packages/bower/Polymer/polymer@1.0.5/polymer.html" />
Is there a better way to import this html into SystemJS?
Third, since the Polymer download options can be either manually loaded using their "basket" as an option, or in Bower if I try to get the iron items or paper items through the JSPM repository, github:
or bower:
it doesn't load their dependencies, and even if I will add dependencies manually, their paths import
will still be wrong due to the name of the JSPM versions.
According to this discussion in google group JSPM problem
is that Polymer assumes Bower
What force is making me rip up SystemJS or Polymer, which I really don't want to do.
However, in another discussion (Aurelia framework) Rob Eisenberg mentions the possibility of using Polymer with Aurelia:
You should be able to use plastic paper elements. For this you will include the Polymer structure on your pre-Aurelia page.
As far as I know, Aurelia uses JSPM, so what can be done?
A possible solution would be to switch to RequireJS, then I can just use Bower to add the Polymer stuff, but I'd really like to use SystemJS and I'm not sure if it will work with Aurelia. Also, I could continue to use SystemJS and JSPM, and also use Bower for Polymer materials only.
Update
Until a better answer is found, a temporary solution would be to use both JSPM and Bower, where Bower is only used for Polymer.
source to share
I don't know if you've solved your problem, but I found a way to install polymer and its components via jspm.
Referring to the issue https://github.com/Polymer/polymer/issues/1133 follow these steps:
npm install jspm-bower-endpoint
jspm registry create bower jspm-bower-endpoint
With this you can install bower packages via jspm, just like you can do jspm install nom: you can do the same with a gazebo.
Now install Polymer and Paper elements (or any other collection).
jspm install bower:polymer
jspm install bower:PolymerElements/paper-elements
In this last step, I had a small problem with the packaging version that I could not solve with jspm. So just go to jspm_packages / bower / PolymerElements / paper-elements @version and run
bower install
In this last step, all the components for the paper elements will be installed.
Now just attach the required element to your html template with:
<link rel="import" href="jspm_packages/bower/PolymerElements/paper-elements@version/bower_components/paper-button/paper-button.html">
Hope you can find this useful!
source to share