<p dir="auto">We currently get two docs exported for Type Interface: one for core, and one for router. This is confusing -- and I think unnecessary duplication? Can we make Router depend on the Type exported from core?</p>
<p dir="auto">I would like to create extensions for some components already deployed in Angular 2, without having to rewrite them almost completely, as the base component could undergo changes and wish these changes were also reflected in its derived components.</p>
<p dir="auto"><strong>Example</strong></p>
<p dir="auto"><strong>I created this simple example to try to explain better the problem:</strong></p>
<p dir="auto">With the following base component <code class="notranslate">app/base-panel.component.ts</code>:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component, Input} from 'angular2/core';

@Component({
    selector: 'base-panel',
    template: '&lt;div class=&quot;panel&quot; [style.background-color]=&quot;color&quot; (click)=&quot;onClick($event)&quot;&gt;{{content}}&lt;/div&gt;',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class BasePanelComponent { 

  @Input() content: string;

  color: string = &quot;red&quot;;

  onClick(event){
    console.log(&quot;Click color: &quot; + this.color);
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">,</span> <span class="pl-smi">Input</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/core'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'base-panel'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;div class="panel" [style.background-color]="color" (click)="onClick($event)"&gt;{{content}}&lt;/div&gt;'</span><span class="pl-kos">,</span>
    <span class="pl-c1">styles</span>: <span class="pl-kos">[</span><span class="pl-s">`</span>
<span class="pl-s">    .panel{</span>
<span class="pl-s">    padding: 50px;</span>
<span class="pl-s">  }</span>
<span class="pl-s">  `</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">BasePanelComponent</span> <span class="pl-kos">{</span> 

  @<span class="pl-smi">Input</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">content</span>: <span class="pl-smi">string</span><span class="pl-kos">;</span>

  <span class="pl-c1">color</span>: <span class="pl-smi">string</span> <span class="pl-c1">=</span> <span class="pl-s">"red"</span><span class="pl-kos">;</span>

  <span class="pl-en">onClick</span><span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"Click color: "</span> <span class="pl-c1">+</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">color</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">Would you like to create another derivative component only alter, for example, a basic component behavior in the case of the example color, <code class="notranslate">app/my-panel.component.ts</code>:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component} from 'angular2/core';
import {BasePanelComponent} from './base-panel.component'

@Component({
    selector: 'my-panel',
    template: '&lt;div class=&quot;panel&quot; [style.background-color]=&quot;color&quot; (click)=&quot;onClick($event)&quot;&gt;{{content}}&lt;/div&gt;',
    styles: [`
    .panel{
    padding: 50px;
  }
  `]
})
export class MyPanelComponent extends BasePanelComponent{

  constructor(){
    this.color = &quot;blue&quot;;
  }
}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/core'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">BasePanelComponent</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./base-panel.component'</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'my-panel'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;div class="panel" [style.background-color]="color" (click)="onClick($event)"&gt;{{content}}&lt;/div&gt;'</span><span class="pl-kos">,</span>
    <span class="pl-c1">styles</span>: <span class="pl-kos">[</span><span class="pl-s">`</span>
<span class="pl-s">    .panel{</span>
<span class="pl-s">    padding: 50px;</span>
<span class="pl-s">  }</span>
<span class="pl-s">  `</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">MyPanelComponent</span> <span class="pl-k">extends</span> <span class="pl-smi">BasePanelComponent</span><span class="pl-kos">{</span>

  <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">color</span> <span class="pl-c1">=</span> <span class="pl-s">"blue"</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><a href="http://plnkr.co/edit/bWa1JmH7NaSaJffLsl0x?p=preview" rel="nofollow">Example in Plunker</a></p>
<p dir="auto"><strong>Problem/Limitation</strong></p>
<p dir="auto">As you can see in the implementation of the derivative component <code class="notranslate">app/my-panel.component.ts</code>, much of the implementation was repeated, and the single part really inherited was the <code class="notranslate">class</code> <code class="notranslate">BasePanelComponent</code>, but the annotation <code class="notranslate">@Component</code> had to basically be completely repeated, not just the changed portions, as the <code class="notranslate">selector: 'my-panel'</code>.</p>
<p dir="auto"><strong>Feature request</strong></p>
<p dir="auto">After a few days of research around this possible limitation (question on <a href="http://stackoverflow.com/q/36475626/2290538" rel="nofollow">StackOverflow </a>and <a href="http://pt.stackoverflow.com/q/121960/2998" rel="nofollow">StackOverflowPt (my native language)</a>), concludes that even the current version there is no mechanism for the annotations inheritance. So I wonder if it is possible to be implemented this possibility/feature functionality for future versions of the angular library?</p>