How can I create a custom element in Aurelia when the .js and .html are not in the same folder?

Question

I am trying to create a custom element in Aurelia. I used the getViewStrategy method to allow my html and js files to reside in different folders of my app, a js folder for js files and an html folder for html files.

The problem I am having is when I try to require the two files for my custom element, I get an error saying I am trying to register an Element when one with the same name already exists.

app.html

<require from="../Scripts/Templates/js/myTag.js"></require>
<require from="../Content/Templates/html/myTag.html"></require>

<my-tag></my-tag>

myTag.js

export class MyTag{
    getViewStrategy(){
        return '../../Templates/html/myTag.html';
    }
}

myTag.html

<template>
    <h4>MY TAG!!!</h4>
</template>

How can I register this custom element? Thanks in advance.

Answer 1

Try the @useView decorator:

Here's an example: https://gist.run?id=3d0a2ccf8af9b7e5b512a09f4dd6b81c

import {useView} from 'aurelia-framework';

@useView('../../../Content/Templates/html/myTag.html')
export class MyTag {
}