<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></p>

<p dir="auto">When using multiple @ HostListener decorator on same function, such as code below</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  @HostListener('click', ['$event'])
  @HostListener('mouseover', ['$event'])
  @HostListener('focus',['$event'])
  private eventRouter(e) {
     console.log(e);
  }"><pre class="notranslate">  @<span class="pl-smi">HostListener</span><span class="pl-kos">(</span><span class="pl-s">'click'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'$event'</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
  @<span class="pl-smi">HostListener</span><span class="pl-kos">(</span><span class="pl-s">'mouseover'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'$event'</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
  @<span class="pl-smi">HostListener</span><span class="pl-kos">(</span><span class="pl-s">'focus'</span><span class="pl-kos">,</span><span class="pl-kos">[</span><span class="pl-s">'$event'</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
  <span class="pl-k">private</span> <span class="pl-s1">eventRouter</span><span class="pl-kos">(</span><span class="pl-s1">e</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-s1">e</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto">Only the first decorator will be listened, but the function got the latest decorator event, and the middle decorator and the last decorator will never be trigger.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">fix this bug</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 2.3.0</li>
</ul>

<ul dir="auto">
<li><strong>Browser:</strong> [all ]</li>
</ul>

<ul dir="auto">
<li><strong>Language:</strong> [TypeScript 2.0.7]</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</li>
</ul>
<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="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] 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">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[x] 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></p>

<p dir="auto">Angular library authors should inline templates (html/css) to ensure overall compatibility between different consumer types.</p>
<p dir="auto">This can be done with a fairly simple <a href="https://github.com/filipesilva/angular-quickstart-lib/blob/master/inline-resources.js">script</a>, but it has a few pitfalls:</p>
<ul dir="auto">
<li>special care must be taken to maintain sourcemap lines (inline over TS sources before <code class="notranslate">ngc</code>).</li>
<li>unit testing requires a separate module.id based setup to load templates into karma.</li>
<li>no watch mode.</li>
</ul>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Since inlining is heavily encouraged for library AOT compilation, it should be included as an option for <code class="notranslate">ngc</code> (e.g. <code class="notranslate">angularCompilerOptions.inlineTemplates</code>).</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
An example library can be found at <a href="https://github.com/filipesilva/angular-quickstart-lib">https://github.com/filipesilva/angular-quickstart-lib</a>.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Less work for everyone building and shipping components, one less point of failure.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 4.x</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [ TypeScript 2.x ]</p>
</li>
</ul>
<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/jasonaden/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/jasonaden">@jasonaden</a></p>