title: Angular 2 multiple components with the same selector
body: <p>How do you deal with the following situation where two components use the same selector? (removed the word "Component" to avoid clutter):</p>
  
  <p>app.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Person as Person1 } from './person1';
  import { Person as Person2 } from './person2';
  @Component({
    selector: 'app',
    template: '&lt;person1???&gt;&lt;/person1&gt;&lt;person2???&gt;&lt;/person2&gt;',
    directives: [Person1, Person2]
  })
  export class App {
  
  }
  </code></pre>
  
  <p>person1.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
    selector: 'person',
    template: '&lt;h1&gt;Person 1&lt;/h1&gt;'
  })
  export class Person {
  
  }
  </code></pre>
  
  <p>person2.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
    selector: 'person',
    template: '&lt;h1&gt;Person 2&lt;/h1&gt;'
  })
  export class Person {
  
  }
  </code></pre>
  
  <p>This isn't a problem with React since you'd just use <code>&lt;Person1 /&gt;</code> and <code>&lt;Person2 /&gt;</code></p>