<p dir="auto">**I'm submitting a bug report **</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report
[ ] feature request
[ ] support request"><pre class="notranslate"><code class="notranslate">[x] bug report
[ ] feature request
[ ] support request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Unable to create custom TypeScript decorators when using AoT compiler.</p>
<p dir="auto">Reproduce steps:</p>
<ul dir="auto">
<li>Create new angular-cli project.</li>
<li>Run project using: <code class="notranslate">ng serve --port 3000</code> (serve without AoT)</li>
<li>Create a new decorator and use it in one of the <code class="notranslate">Component</code>s:</li>
</ul>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function test(props: any) {
      return function(target: any) {
           console.log(&quot;Running decorator...&quot;, props, target);
      }
}

@Component({
     template: &quot;Hello!&quot;
})
@test({})
class MyComponent {
    // ...
}"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-s1">props</span>: <span class="pl-smi">any</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">target</span>: <span class="pl-smi">any</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">"Running decorator..."</span><span class="pl-kos">,</span> <span class="pl-s1">props</span><span class="pl-kos">,</span> <span class="pl-s1">target</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</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">template</span>: <span class="pl-s">"Hello!"</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
@<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">class</span> <span class="pl-smi">MyComponent</span> <span class="pl-kos">{</span>
    <span class="pl-c">// ...</span>
<span class="pl-kos">}</span></pre></div>
<ul dir="auto">
<li>Note that the logic of the decorator works great and executed (printed to the browser's log).</li>
<li>Now close the cli, and run again, now the command: <code class="notranslate">ng serve --aot --port 3000</code> (serve with AoT)</li>
<li>The decorator is stripped from the Component and the logic of the decorator does not executed.</li>
</ul>
<p dir="auto">The generated factory file contain the actual decorator logic, but it does not execute it when creating the Component.</p>
<p dir="auto">Tried to change <code class="notranslate">angularCompilerOptions</code> and change <code class="notranslate">skipMetadataEmit</code> - but still the same.</p>
<p dir="auto">When running with JIT compiler all works, only AoT compiler causes problems.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
The decorator should execute when using AoT compiler.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
In the description above.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Same compiler behavior for AoT and regular compiler.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Dotans-MacBook-Pro:~ dotansimha$ ng --version
angular-cli: 1.0.0-beta.19-3
node: 6.9.1
os: darwin x64"><pre class="notranslate"><code class="notranslate">Dotans-MacBook-Pro:~ dotansimha$ ng --version
angular-cli: 1.0.0-beta.19-3
node: 6.9.1
os: darwin x64
</code></pre></div>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.1.0</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> all</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> all / TypeScript?</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Dotans-MacBook-Pro:~ dotansimha$ node --version
v6.9.1
Dotans-MacBook-Pro:~ dotansimha$ npm --version
3.10.8
Dotans-MacBook-Pro:~ dotansimha$ watchman --version
4.7.0"><pre class="notranslate"><code class="notranslate">Dotans-MacBook-Pro:~ dotansimha$ node --version
v6.9.1
Dotans-MacBook-Pro:~ dotansimha$ npm --version
3.10.8
Dotans-MacBook-Pro:~ dotansimha$ watchman --version
4.7.0
</code></pre></div>
<p dir="auto">Right now, we have to specify the attribute name as a parameter of the <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Attribute/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Attribute">@Attribute</a> decorator.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Directive({selector: 'input})
class Component {
   constructor(@Attribute('type') private type:String, private element:ElementRef){
        if(type === 'date') {
        }           
   }
}"><pre class="notranslate">@<span class="pl-smi">Directive</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">selector</span>: <span class="pl-s">'input})</span>
<span class="pl-s">class Component {</span>
<span class="pl-s">   constructor(@Attribute('</span><span class="pl-s1">type</span><span class="pl-s">') private type:String, private element:ElementRef){</span>
<span class="pl-s">        if(type === '</span><span class="pl-s1">date</span>') {
        }           
   }
}</pre></div>
<p dir="auto">It would be very interesting to be able to specify this attribute name directly by naming correctly the corresponding parameter, in order to avoid duplicates code.</p>
<p dir="auto">So for example :</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Directive({selector: 'input})
class Component {
   constructor(@Attribute() private type:String, private element:ElementRef){
        if(type === 'date') {
        }           
   }
}"><pre class="notranslate">@<span class="pl-smi">Directive</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">selector</span>: <span class="pl-s">'input})</span>
<span class="pl-s">class Component {</span>
<span class="pl-s">   constructor(@Attribute() private type:String, private element:ElementRef){</span>
<span class="pl-s">        if(type === '</span><span class="pl-s1">date</span>') {
        }           
   }
}</pre></div>
<p dir="auto">What do you think ?</p>