Issue 1:
I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I am trying to create a custom component which I install using npm install ./package_path. However the templateUrl is loaded relative to the root of the dev server instead of relative to the package.

I have read the documentation on component relative paths on the Angular 2 Docs as well as on Thoughtram.

The component is being bundled as a commonjs module and module.id is added on the Component decorator.

The only thought that came to mind is maybe it has something to do with the fact that angular-cli 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 angular and angular-cli I'm at a loss.

Expected/desired behavior

To load relatively to the package.

Please tell us about your environment:

Angular version: 2.0.0-rc.4

Browser: all

Language: Typescript 2.0

Typescript Code

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;
}

Transpiled ES5 commonJS code

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") 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, "card", 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

Screenshot

Issue 2:
I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Currently when you have a boolean property and bind it to true|false you have to use property binding, i.e

<my-button [rounded]="true"></my-button>

Expected behavior

The following code snippet should set the rounded property to true:

<my-button rounded></my-button>

while the snippet bellow should bind it to false:

<my-button ></my-button>

What is the motivation / use case for changing the behavior?

This mimics the behavior of HTML binary attributes as well as how React threads such properties.

Of course property binding to should still works.