Using web components in aurelia

Help Requests
1

I am trying to use vanilla web components in aurelia. The html import is proving to be a bit odd.
I have installed and activated the template plugin

aurelia.use.plugin('aurelia-html-import-template-loader');

Installed the component via jspm and try to require it in the view template
<require from="bmc-charts/src/chart.html"></require>

The error message I get states that there is no template tag:

ERROR [app-router] Error: (SystemJS) There was no template element found in

The component does not have a template because it does not use one.
Code can be seen here:
[https://github.com/baremetalcomponents/bmc-charts/blob/master/src/chart.html](http://github source)

I would like to use the required element in the template so that I don’t have to worry about versioning in the import.

What is required to import and use this component?

2

As stated in official doc, i think your usage of the element is incorrect. http://aurelia.io/docs/integration/polymer#setup

If you wish to use html import, put url in a links element and place before the template element

3

  1. If this was a polimer component I would agree with you, but it’s not…

  2. aurelia-html-import-template-loader as I understand it is suppose to assist in the link usage.

  3. require.from should support by some way or another importing web components (not polimer web components, just standard based components)

  4. You don’t want to manage the links manually because if you install it via jspm you need to manually update the links everytime you get a new version because the path includes the version number and this opens opportunity for bugs.

If these things are not taken seriously then it forces people to have to deploy via bower so that you don’t need to deal with the versioning issue.

4

so this works

<template>
    <require from="bmc-charts/src/axis/time-axis.html"></require>
    <require from="bmc-charts/src/axis/linear-axis.html"></require>
    <require from="bmc-charts/src/charts/scatter-chart.html"></require>
    <require from="bmc-charts/src/chart.html"></require>

    <h1>Welcome</h1>

    <bmc-chart padding="30, 30, 50, 70" data.bind="data">
        <time-axis field="date"></time-axis>
        <linear-axis field="value" axis="y"></linear-axis>
        <scatter-chart></scatter-chart>
    </bmc-chart>
</template>

To make this work I just added a empty template tag in the web components.
It’s not ideal to have redundant template tags, but it’s not a big deal either.

1 Like