title: Why do all components with Component selectors have to be used in an Angular 2 application?
body: <p><em>Please be aware I am working with tutorial code here, so not everything is strictly correct, but it works. Most of the time.</em></p>
  
  <p>I have a component class that is decorated as follows:</p>
  
  <pre><code>@Component({
      selector: "click-here",
      template: `
          &lt;button (click) = "onClickThere($event)"&gt;Click here!&lt;/button&gt;
          {{clickMessage}}
      `
  })
  </code></pre>
  
  <p>And it was used like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;click-here&gt;Loading...&lt;/click-here&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Then I added a new component class, but its decorator has:</p>
  
  <p><code>selector: "type-here"</code></p>
  
  <p>When I run the application with <code>npm start</code>, I get a legion of errors in the browser, starting with:</p>
  
  <p><code>The selector "click-here" did not match any elements</code></p>
  
  <p>Why does every selector have to match an element? Working like this is not feasible; there must be a way to be able to have multiple <code>Component</code> decorators, all with different <code>selector</code> values, and only use some of them. How would I achieve that? What am I doing wrong that the tutorial hasn't included a correct version of? Must each <code>Component</code> have a name or something?</p>