<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>
I upgraded my project from SystemJs to webpack (angular-cli). I realized that input and output decorators defined in a base class of a component are not recognized as valid properties. Sample code:</p>
<p dir="auto">`@Component({<br>
selector: 'foo',<br>
template: '...'<br>
})<br>
export class FooComponent extends FooBase {<br>
}</p>
<p dir="auto">export class FooBase {<br>
<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/input/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/input">@input</a>() protected testInput: any;<br>
}`</p>
<p dir="auto">In my html I wanted to use this component normally set <code class="notranslate">testInput</code> variable. With SystemJs there was no problem with this structure. Since I use core-js I get the following error:</p>
<blockquote>
<p dir="auto">Unhandled Promise rejection: Template parse errors:<br>
Can't bind to 'testInput' since it isn't a known property of 'foo'.</p>
</blockquote>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">All input and output decorators defined in base classes should be recognized as valid properties of the component.</p>
<p dir="auto"><strong>Reproduction of the problem</strong></p>
<p dir="auto">I started to debug this problem and I found that the root couse of the problem is the <code class="notranslate">getPrototypeOf()</code> function in the es7 shim of core-js.</p>
<p dir="auto">This function is much more simplier than it was in System-Js:</p>
<p dir="auto"><code class="notranslate">getPrototypeOf()</code> in core-js:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = Object.getPrototypeOf || function(O){
  O = toObject(O);
  if(has(O, IE_PROTO))return O[IE_PROTO];
  if(typeof O.constructor == 'function' &amp;&amp; O instanceof O.constructor){
    return O.constructor.prototype;
  } return O instanceof Object ? ObjectProto : null;
};"><pre class="notranslate"><code class="notranslate">module.exports = Object.getPrototypeOf || function(O){
  O = toObject(O);
  if(has(O, IE_PROTO))return O[IE_PROTO];
  if(typeof O.constructor == 'function' &amp;&amp; O instanceof O.constructor){
    return O.constructor.prototype;
  } return O instanceof Object ? ObjectProto : null;
};
</code></pre></div>
<p dir="auto"><code class="notranslate">getPrototypeOf()</code> in SystemJs:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" function GetPrototypeOf(O: any): Object {
        let proto = Object.getPrototypeOf(O);
        if (typeof O !== &quot;function&quot; || O === functionPrototype) {
            return proto;
        }
        if (proto !== functionPrototype) {
            return proto;
        }

        let prototype = O.prototype;
        let prototypeProto = Object.getPrototypeOf(prototype);
        if (prototypeProto == null || prototypeProto === Object.prototype) {
            return proto;
        }

        let constructor = prototypeProto.constructor;
        if (typeof constructor !== &quot;function&quot;) {
            return proto;
        }

        if (constructor === O) {
            return proto;
        }

        return constructor;
    }"><pre class="notranslate"><code class="notranslate"> function GetPrototypeOf(O: any): Object {
        let proto = Object.getPrototypeOf(O);
        if (typeof O !== "function" || O === functionPrototype) {
            return proto;
        }
        if (proto !== functionPrototype) {
            return proto;
        }

        let prototype = O.prototype;
        let prototypeProto = Object.getPrototypeOf(prototype);
        if (prototypeProto == null || prototypeProto === Object.prototype) {
            return proto;
        }

        let constructor = prototypeProto.constructor;
        if (typeof constructor !== "function") {
            return proto;
        }

        if (constructor === O) {
            return proto;
        }

        return constructor;
    }
</code></pre></div>
<p dir="auto">The first function returns an anonymus function when it reaches the parent of the component since it is using <code class="notranslate">Object.getPrototypeOf()</code> the second returns with the correct parent function. I know that it is not connected direcly to Angular but I'am not an expert of these shims and I cannot decide which is better and why. So that I didn't want to submit a ticket to core-js for the first time.<br>
Since <a href="https://github.com/angular/angular/commit/66df335998d097fa8fe46dec41f1183737332021">Angular also switched to core-js</a> it can be problematic in the future. What is the proposal for this? Is it a core-js bug?</p>
<p dir="auto">PS.: If someone would face with the same problem, my <strong>workaround</strong> was to remove all decorators from the base class and specify them explicitly in the <a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/component/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/component">@component</a> attribute.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Described above.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 7, IntelliJ, npm, angular-cli</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.X<br>
Angular 2.0.0 final</li>
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]<br>
all</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript 2.2</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   v6.5.0</li>
</ul>
<p dir="auto">In Ionic we use a lot of attributes. For example, say we have an attribute called <code class="notranslate">primary</code> that we only want added if the platform is Android. Doing something like this on an element:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div [attr.primary]=&quot;isAndroid&quot;&gt;&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div [attr.primary]="isAndroid"&gt;&lt;/div&gt;
</code></pre></div>
<p dir="auto">Would be added as <code class="notranslate">primary="true"</code> for Android and <code class="notranslate">primary="false"</code> for iOS. We want it to not add <code class="notranslate">primary</code> at all if iOS, and add just <code class="notranslate">primary</code> if Android.</p>
<p dir="auto">cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/IgorMinar/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/IgorMinar">@IgorMinar</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/adamdbradley/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/adamdbradley">@adamdbradley</a></p>