Component relative paths are not being respected

[adamduren]

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

[adamduren]

I ran some tests with boilerplate projects from different versions of angular-cli. It seems to have worked pre webpack. See angular/angular-cli#1624

[adamduren]

That being said this issue may not belong here but leaving it open until someone more informed says otherwise.

[opsxcq]

A possible workaround would be use require on template

@Component({
  moduleId: module.id,
  selector: 'app-card',
  template: require('./card.component.html')
  ....

[adamduren]

Thanks @opsxcq. I've tried that work around but there's another bug that's preventing us from making publishable reusable components and that's that some of the components have static assets which get served from the root and not relative to the package (node_modules/package_path/path/to/assets) nor does the bundler pick it up. Maybe I'm missing something but this appears to be a pretty big issue in terms of reusability.

[pkozlowski-opensource]

Duplicate of angular/angular-cli#1624

[pkozlowski-opensource]

Relative assets are tracked in #6637

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}