title: Difference between HTML component and a normal component in Aurelia?
body: <p>I'm starting with the standard TypeScript skeleton for my Aurelia development. </p>
  
  <p>I wanted to add some code to the "nav-bar" component, so I decided to convert it from a simple HTML-only component to a regular component. To this end, I modified the <em>require</em> tag in my app.html from:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;require from="nav-bar.html"&gt;&lt;/require&gt; 
  </code></pre>
  
  <p>to</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;require from="nav-bar"&gt;&lt;/require&gt; 
  </code></pre>
  
  <p>Next, I created a nav-bar.ts file, which contained the following code:</p>
  
  <pre class="lang-js prettyprint-override"><code>import {autoinject} from 'aurelia-framework';
  import {customElement, bindable} from 'aurelia-framework';
  // import {HttpClient} from 'aurelia-fetch-client';
  
  @autoinject
  @customElement('nav-bar')
  export class NavBarClass {
      public attached() {
          console.log("TEST");
      }
    }
  }
  </code></pre>
  
  <p>I left the nav-bar.html exactly as is. Now the program runs and the console contains the TEST value from the instantiated NavBarClass, <em>BUT</em> the menu that used to be displayed when nav-bar was HTML-only is now missing.</p>
  
  <p>How do I get the menu back? What am I doing wrong? How does a regular component differ from an HTML-only component?</p>
  
  <p>Thanks for your help,
  -Greg</p>