Search code examples
angular5web-componentpolymer-2.x

Multiple polymer 2 imports fail

I'm in a bit of a trouble and I hope that I'll find the answer here: I have an angular 5 app using polymer 2 components. First I add the elements dynamically the head of the dom like this <link id="ace-widget-link" rel="import" href="https://lostinbrittany.github.io/ace-widget/components/ace-widget/ace-widget.html">

Then the user select some elements to add to his dashboard What I do is to append the element tag to the dom like so <ace-widget></ace-widget>

Now here comes the problems:

  1. The first element that I add is only displayed when I refresh the page.

  2. If add two or more elements only the first one appears (even after refresh).

Note that when I added the links statically to index.html everything worked fine.

Solution

  • So after all I figured it out, I was using some polymer components of different versions which produced a conflict that was the origin of the whole problem. Note that another thing that helped is adding each import link only when the widget is inserted instead of adding all the links at once before the widget adding begins. I hope that this helps someone else.