christopher clark christopher clark - 1 month ago 20
HTML Question

Aurelia require html import not working

I have no errors in the console. But the console is not logging a

console.log
I put in the constructor of the
top-nav.js
. But more importantly. The simple jumbotron div is not rendering, Aurelia says in the console that it found the correct
top-nav.html
though. Here is the
App.html


<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="htmlreq/top-nav"></require>
<h1>${message}</h1>
</template>


App.js
for consistency

export class App {
message = "Hello Pathways";
}


top-nav.html


<template>
<div class="jumbotron">
<div class="container">
<p>Career &amp; Technical Education </p>
</div>
</div>
</template>


top-nav.js
the console statement is not firing. And the Jumbotron is not visible or listed anywhere in the dom.

export class TopNav {
_topnav = true;
constructor() {
console.log('constructed');
}
}

Answer

You are "requiring" the custom element but you are not "using" it.

You should do this:

<template>
    <require from="bootstrap/css/bootstrap.css"></require>
    <require from="htmlreq/top-nav"></require>
    <h1>${message}</h1>

    <top-nav></top-nav>
</template>

No need to use compose in this case.