<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[X] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Multiple inheritance from one class leads to multiple/shared metadata when the base class has an annotation.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import 'reflect-metadata';
import { Injectable, Inject } from '@angular/core';

class A {}
class B {}
class C {}

// Enabling this decorator leads to same log output for booth classes
//@Injectable()
class BaseClass {
  constructor(protected a : A) {}
}

@Injectable()
class Cls1 extends BaseClass {
  constructor(@Inject(B) protected b : B, @Inject(A) a : A) {
    super(a);
  }
}

@Injectable()
class Cls2 extends BaseClass {
  constructor(@Inject(C) protected c : C, @Inject(A) a : A) {
    super(a);
  }
}

console.log(Reflect.getMetadata('parameters', Cls1))
console.log(Reflect.getMetadata('parameters', Cls2))"><pre class="notranslate"><code class="notranslate">import 'reflect-metadata';
import { Injectable, Inject } from '@angular/core';

class A {}
class B {}
class C {}

// Enabling this decorator leads to same log output for booth classes
//@Injectable()
class BaseClass {
  constructor(protected a : A) {}
}

@Injectable()
class Cls1 extends BaseClass {
  constructor(@Inject(B) protected b : B, @Inject(A) a : A) {
    super(a);
  }
}

@Injectable()
class Cls2 extends BaseClass {
  constructor(@Inject(C) protected c : C, @Inject(A) a : A) {
    super(a);
  }
}

console.log(Reflect.getMetadata('parameters', Cls1))
console.log(Reflect.getMetadata('parameters', Cls2))
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
The DI/Typescript-Metadata should affect only the classes where they are present.</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Simple example project: <a href="https://github.com/draconisNoctis/angular2_di_issue">https://github.com/draconisNoctis/angular2_di_issue</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Any larger project needs inheritance of components/services etc.</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-final</li>
<li><strong>Browser:</strong> all &amp; nodejs</li>
<li><strong>Language:</strong> all | ES5</li>
</ul>
<p dir="auto">Dependency Injection not working for Components/Directives inherited from Angular2 Components/Directives if using TypeScript Compiler instead of Angular Template Compiler.</p>
<p dir="auto"><strong>Steps to reproduce and a minimal demo of the problem</strong></p>
<ol dir="auto">
<li>Define DatePicker directive inherited from DefaultValueAccessor.</li>
<li>Add any additional parameter to DatePicker constructor (e.g. <code class="notranslate">logger: Logger</code>).</li>
<li>Compile source code with TypeScript Compiler.</li>
<li>Run application.</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@Injectable()
class Logger {}

@Directive({
  selector: '[datePicker]'
})
class DatePicker extends DefaultValueAccessor {
   constructor(renderer: Renderer, element: ElementRef, logger: Logger) {
     super(renderer, element);
     if (!logger) {
      console.error('Logger is undefined');
     } else {
       console.info('Logger is defined');
     }
   }
}"><pre class="notranslate"><code class="notranslate">@Injectable()
class Logger {}

@Directive({
  selector: '[datePicker]'
})
class DatePicker extends DefaultValueAccessor {
   constructor(renderer: Renderer, element: ElementRef, logger: Logger) {
     super(renderer, element);
     if (!logger) {
      console.error('Logger is undefined');
     } else {
       console.info('Logger is defined');
     }
   }
}
</code></pre></div>
<p dir="auto">Minimal demo: <a href="http://plnkr.co/edit/UIybCDlayhXRO7x0Y7Lk?p=preview" rel="nofollow">http://plnkr.co/edit/UIybCDlayhXRO7x0Y7Lk?p=preview</a></p>
<p dir="auto"><strong>Current behavior</strong><br>
DatePicker resolved using ctorParameters from DefaultValueAccessor (renderer, element) instead of metadata from DatePicker constructor (renderer, element, logger).<br>
(see <code class="notranslate">ReflectionCapabilities.parameters(typeOrFunc: Type): any[][]</code> implementation for details)</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
DatePicker resolved using parameters from its constructor metadata (renderer, element, logger).</p>
<p dir="auto"><strong>Other information</strong><br>
Current implementation of <code class="notranslate">ReflectionCapabilities.parameters(typeOrFunc: Type): any[][]</code> work properly only if code was compiled using Angular Template Compiler, otherwise it will never check metadata, because ctorParameters decorator data inherited from parent hides it.</p>