title: Angular 2, component inside main component
body: <p>I've played with the angular 2 demo on angular.io.
  Now I want to create a new component and use it inside my app.</p>
  
  <p>My current app:</p>
  
  <pre><code>import {Component, Template, bootstrap} from 'angular2/angular2';
  import {UsersComponent} from './components/users/component.js';
  
  // Annotation section
  @Component({
    selector: 'my-app'
  })
  @Template({
    url:"app.html"
  })
  // Component controller
  class MyAppComponent {
    newName:string;
    names:Array&lt;string&gt;;
    constructor() {
      this.name = 'Florian';
    }
  
    showAlert(){
      alert("It works");
    }
  
    addName(){
      names.push(newName);
      newName = "";
    }
  }
  
  bootstrap(MyAppComponent);
  </code></pre>
  
  <p>My component:</p>
  
  <pre><code>import {Component, Template, bootstrap} from 'angular2/angular2';
  // Annotation section
  @Component({
    selector: 'users'
  })
  @Template({
    url:"./template.html"
  })
  // Component controller
  class UsersComponent {
    newName:string;
    names:Array&lt;string&gt;;
    constructor() {
  
    }
  
    addName(){
      names.push(newName);
      newName = "";
    }
  }
  </code></pre>
  
  <p>I'm not sure if the syntax of my user component is correct at all.</p>
  
  <p>My app template:</p>
  
  <pre><code>&lt;h1&gt;Hello {{ name }}&lt;/h1&gt;
  &lt;h2&gt;{{2+2}}&lt;/h2&gt;
  &lt;hr /&gt;
  &lt;button (click)="showAlert()"&gt;Click to alert&lt;/button&gt;
  &lt;users&gt;&lt;/users&gt;
  </code></pre>
  
  <p>So how do I wire up the User component?</p>
  
  <p>The error I get in the console:</p>
  
  <pre><code> "Error loading "components/users/component.js" at &lt;unknown&gt;↵Error loading "components/users/component.js" from "app" at http://localhost:8080/app.es6↵Cannot read property 'replace' of undefined"
  </code></pre>