<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
[ ] 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
[ ] 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">I am trying to create a custom component which I install using <code class="notranslate">npm install ./package_path</code>. However the templateUrl is loaded relative to the root of the dev server instead of relative to the package.</p>
<p dir="auto">I have read the documentation on component relative paths on the <a href="https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html" rel="nofollow">Angular 2 Docs</a> as well as on Thoughtram.</p>
<p dir="auto">The component is being bundled as a commonjs module and <code class="notranslate">module.id</code> is added on the Component decorator.</p>
<p dir="auto">The only thought that came to mind is maybe it has something to do with the fact that <code class="notranslate">angular-cli</code> is using webpack and there is some disconnect between the two. However I imagine that would be a common problem and after searching issues in both <code class="notranslate">angular</code> and <code class="notranslate">angular-cli</code> I'm at a loss.</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">To load relatively to the package.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.4</li>
<li><strong>Browser:</strong> all</li>
<li><strong>Language:</strong> Typescript 2.0</li>
</ul>
<p dir="auto">Typescript Code</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { Component, Input } from '@angular/core';

import { Card } from './card.model';

@Component({
  moduleId: module.id,
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss'],
})
export class CardComponent {

  @Input() card: Card;
  showBilling: boolean = false;

  constructor() { }

  toggleBillingAddressView(event: MouseEvent) {
    event.preventDefault();
    this.showBilling = !this.showBilling;
  }"><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">'@angular/core'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-smi">Card</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./card.model'</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">moduleId</span>: <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">,</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'app-card'</span><span class="pl-kos">,</span>
  <span class="pl-c1">templateUrl</span>: <span class="pl-s">'./card.component.html'</span><span class="pl-kos">,</span>
  <span class="pl-c1">styleUrls</span>: <span class="pl-kos">[</span><span class="pl-s">'./card.component.scss'</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">export</span> <span class="pl-k">class</span> <span class="pl-smi">CardComponent</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">card</span>: <span class="pl-smi">Card</span><span class="pl-kos">;</span>
  <span class="pl-c1">showBilling</span>: <span class="pl-smi">boolean</span> <span class="pl-c1">=</span> <span class="pl-c1">false</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-kos">}</span>

  <span class="pl-en">toggleBillingAddressView</span><span class="pl-kos">(</span><span class="pl-s1">event</span>: <span class="pl-smi">MouseEvent</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-en">preventDefault</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">showBilling</span> <span class="pl-c1">=</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">showBilling</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos"></span></pre></div>
<p dir="auto">Transpiled ES5 commonJS code</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;use strict&quot;;
var __decorate = (this &amp;&amp; this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c &lt; 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === &quot;object&quot; &amp;&amp; typeof Reflect.decorate === &quot;function&quot;) r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i &gt;= 0; i--) if (d = decorators[i]) r = (c &lt; 3 ? d(r) : c &gt; 3 ? d(target, key, r) : d(target, key)) || r;
    return c &gt; 3 &amp;&amp; r &amp;&amp; Object.defineProperty(target, key, r), r;
};
var __metadata = (this &amp;&amp; this.__metadata) || function (k, v) {
    if (typeof Reflect === &quot;object&quot; &amp;&amp; typeof Reflect.metadata === &quot;function&quot;) return Reflect.metadata(k, v);
};
var core_1 = require('@angular/core');
var card_model_1 = require('./card.model');
var CardComponent = (function () {
    function CardComponent() {
        this.showBilling = false;
    }
    CardComponent.prototype.toggleBillingAddressView = function (event) {
        event.preventDefault();
        this.showBilling = !this.showBilling;
    };
    __decorate([
        core_1.Input(),
        __metadata('design:type', card_model_1.Card)
    ], CardComponent.prototype, &quot;card&quot;, void 0);
    CardComponent = __decorate([
        core_1.Component({
            moduleId: module.id,
            selector: 'app-card',
            templateUrl: 'card.component.html',
            styleUrls: ['card.component.scss'],
        }),
        __metadata('design:paramtypes', [])
    ], CardComponent);
    return CardComponent;
}());
exports.CardComponent = CardComponent;
//# sourceMappingURL=card.component.js.map"><pre class="notranslate"><span class="pl-s">"use strict"</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">__decorate</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-smi">this</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">__decorate</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">decorators</span><span class="pl-kos">,</span> <span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">,</span> <span class="pl-s1">desc</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">c</span> <span class="pl-c1">=</span> <span class="pl-smi">arguments</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">,</span> <span class="pl-s1">r</span> <span class="pl-c1">=</span> <span class="pl-s1">c</span> <span class="pl-c1">&lt;</span> <span class="pl-c1">3</span> ? <span class="pl-s1">target</span> : <span class="pl-s1">desc</span> <span class="pl-c1">===</span> <span class="pl-c1">null</span> ? <span class="pl-s1">desc</span> <span class="pl-c1">=</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">getOwnPropertyDescriptor</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">)</span> : <span class="pl-s1">desc</span><span class="pl-kos">,</span> <span class="pl-s1">d</span><span class="pl-kos">;</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-v">Reflect</span> <span class="pl-c1">===</span> <span class="pl-s">"object"</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-k">typeof</span> <span class="pl-v">Reflect</span><span class="pl-kos">.</span><span class="pl-c1">decorate</span> <span class="pl-c1">===</span> <span class="pl-s">"function"</span><span class="pl-kos">)</span> <span class="pl-s1">r</span> <span class="pl-c1">=</span> <span class="pl-v">Reflect</span><span class="pl-kos">.</span><span class="pl-en">decorate</span><span class="pl-kos">(</span><span class="pl-s1">decorators</span><span class="pl-kos">,</span> <span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">,</span> <span class="pl-s1">desc</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">else</span> <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">var</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-s1">decorators</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">-</span> <span class="pl-c1">1</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> <span class="pl-c1">&gt;=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">i</span><span class="pl-c1">--</span><span class="pl-kos">)</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">d</span> <span class="pl-c1">=</span> <span class="pl-s1">decorators</span><span class="pl-kos">[</span><span class="pl-s1">i</span><span class="pl-kos">]</span><span class="pl-kos">)</span> <span class="pl-s1">r</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">c</span> <span class="pl-c1">&lt;</span> <span class="pl-c1">3</span> ? <span class="pl-s1">d</span><span class="pl-kos">(</span><span class="pl-s1">r</span><span class="pl-kos">)</span> : <span class="pl-s1">c</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">3</span> ? <span class="pl-s1">d</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">,</span> <span class="pl-s1">r</span><span class="pl-kos">)</span> : <span class="pl-s1">d</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-s1">r</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-s1">c</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">3</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">r</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">defineProperty</span><span class="pl-kos">(</span><span class="pl-s1">target</span><span class="pl-kos">,</span> <span class="pl-s1">key</span><span class="pl-kos">,</span> <span class="pl-s1">r</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">r</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">__metadata</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-smi">this</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">__metadata</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">k</span><span class="pl-kos">,</span> <span class="pl-s1">v</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-k">typeof</span> <span class="pl-v">Reflect</span> <span class="pl-c1">===</span> <span class="pl-s">"object"</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-k">typeof</span> <span class="pl-v">Reflect</span><span class="pl-kos">.</span><span class="pl-c1">metadata</span> <span class="pl-c1">===</span> <span class="pl-s">"function"</span><span class="pl-kos">)</span> <span class="pl-k">return</span> <span class="pl-v">Reflect</span><span class="pl-kos">.</span><span class="pl-en">metadata</span><span class="pl-kos">(</span><span class="pl-s1">k</span><span class="pl-kos">,</span> <span class="pl-s1">v</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">var</span> <span class="pl-s1">core_1</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'@angular/core'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">card_model_1</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./card.model'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-v">CardComponent</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">function</span> <span class="pl-v">CardComponent</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">showBilling</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-v">CardComponent</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-en">toggleBillingAddressView</span> <span class="pl-c1">=</span> <span class="pl-k">function</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-s1">event</span><span class="pl-kos">.</span><span class="pl-en">preventDefault</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">showBilling</span> <span class="pl-c1">=</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">showBilling</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-s1">__decorate</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
        <span class="pl-s1">core_1</span><span class="pl-kos">.</span><span class="pl-en">Input</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-s1">__metadata</span><span class="pl-kos">(</span><span class="pl-s">'design:type'</span><span class="pl-kos">,</span> <span class="pl-s1">card_model_1</span><span class="pl-kos">.</span><span class="pl-c1">Card</span><span class="pl-kos">)</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-v">CardComponent</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">,</span> <span class="pl-s">"card"</span><span class="pl-kos">,</span> <span class="pl-k">void</span> <span class="pl-c1">0</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-v">CardComponent</span> <span class="pl-c1">=</span> <span class="pl-s1">__decorate</span><span class="pl-kos">(</span><span class="pl-kos">[</span>
        <span class="pl-s1">core_1</span><span class="pl-kos">.</span><span class="pl-en">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
            <span class="pl-c1">moduleId</span>: <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">,</span>
            <span class="pl-c1">selector</span>: <span class="pl-s">'app-card'</span><span class="pl-kos">,</span>
            <span class="pl-c1">templateUrl</span>: <span class="pl-s">'card.component.html'</span><span class="pl-kos">,</span>
            <span class="pl-c1">styleUrls</span>: <span class="pl-kos">[</span><span class="pl-s">'card.component.scss'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
        <span class="pl-s1">__metadata</span><span class="pl-kos">(</span><span class="pl-s">'design:paramtypes'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">)</span>
    <span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-v">CardComponent</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-v">CardComponent</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">exports</span><span class="pl-kos">.</span><span class="pl-c1">CardComponent</span> <span class="pl-c1">=</span> <span class="pl-v">CardComponent</span><span class="pl-kos">;</span>
<span class="pl-c">//# sourceMappingURL=card.component.js.map</span></pre></div>
<p dir="auto">Screenshot</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/581097/17535797/c2752be8-5e5e-11e6-956f-ba2cf3e25193.png"><img src="https://cloud.githubusercontent.com/assets/581097/17535797/c2752be8-5e5e-11e6-956f-ba2cf3e25193.png" alt="image" style="max-width: 100%;"></a></p>
<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><br>
Currently when you have a <em>boolean property</em> and bind it to <code class="notranslate">true|false</code> you have to use property binding, i.e</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;my-button [rounded]=&quot;true&quot;&gt;&lt;/my-button&gt;"><pre class="notranslate"><code class="notranslate">&lt;my-button [rounded]="true"&gt;&lt;/my-button&gt;
</code></pre></div>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">The following code snippet should set the <code class="notranslate">rounded</code> property to <code class="notranslate">true</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;my-button rounded&gt;&lt;/my-button&gt;"><pre class="notranslate"><code class="notranslate">&lt;my-button rounded&gt;&lt;/my-button&gt;
</code></pre></div>
<p dir="auto">while the snippet bellow should bind it to <code class="notranslate">false</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;my-button &gt;&lt;/my-button&gt;"><pre class="notranslate"><code class="notranslate">&lt;my-button &gt;&lt;/my-button&gt;
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
This mimics the behavior of HTML binary attributes as well as how React threads such properties.</p>
<p dir="auto">Of course property binding to should still works.</p>