In a SystemJS+JSPM managed project, how can I use Polymer's elements?
I've used jspm install github:Polymer/polymer to install Polymer, and also jspm install github:PolymerElements/iron-elements to install iron-elements.
There seems to be multiple issues with this:
First one, for example that in the iron-elements.html file, the imports are going to the wrong paths: <link rel="import" href="../polymer/polymer.html"> while the Polymer directory is actually named with it's version (as usual with JSPM), so the the actual import should be <link rel="import" href="../[email protected]/polymer.html"> in my case.
Second, while importing the Polymer files, it seems a bit blunt in a SystemJS environment to just place it inside index.html like that, including the version path:
<link rel="import" href="jspm_packages/bower/Polymer/[email protected]/polymer.html" />
Is there a better way have these html imports in SystemJS?
Third, since Polymer's download options are either via manual download using their "cart" like option or in Bower, if I try to fetch iron-elements or paper-elements via JSPM's github: repository or bower:, it does not download their dependencies, and even if I add the dependencies manually, their import paths would still be wrong because of the version naming of JSPM.
According to this discussion in JSPM's google group, the issue
is that Polymer assumes Bower
Which kind of forces me to ditch either SystemJS or Polymer which I really don't want to do.
However, in a different discussion (of Aurelia framework), Rob Eisenberg mentions a possibility of using Polymer with Aurelia:
You should be able to use Polymer's Paper elements. To do that you would include the Polymer framework in your page prior to Aurelia.
As far as I've learned, Aurelia is using JSPM, so can it be done?
A possible solution would be to switch to RequireJS, then I can just use Bower to add Polymer's stuff, but I would really like to use SystemJS, and I'm not sure if it will work with Aurelia. Also, I could keep using SystemJS and JSPM, and also use Bower just for Polymer stuff.
Until a better answer is found, a temporary solution is to use both JSPM and Bower, where Bower is used only for Polymer.
I don't know if you solved your problem but I've found a way to install polymer and its components through jspm.
Referring to issue https://github.com/Polymer/polymer/issues/1133, follow the next steps:
npm install jspm-bower-endpoint
jspm registry create bower jspm-bower-endpoint
With this, you will be able to install bower packages through jspm, just like you can do jspm install nom:, you will be able to do the same with bower.
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 packaging version that I couldn't solve through jspm. So just go to jspm_packages/bower/PolymerElements/paper-elements@version and run
bower install
This last step will install all the components for paper-elements.
Now, just attach the needed element to your html template through:
<link rel="import" href="jspm_packages/bower/PolymerElements/paper-elements@version/bower_components/paper-button/paper-button.html">
Hope you can find this useful!