Search code examples
angulartypescriptnpmsystemjsangular2-components

Angular2 component templateUrl in npm package


I am writing a common used component in an npm module, and I don't know what is the best way to refer to templateUrl, it is working but I don't want to include node_modules in templateUrl, because node_module direcotry can be renamed.

Is there an other working way to use it?

For instance: "npm:my-commons-ts/my-commons/components/BootstrapAlert/BootstrapAlert.html"

@Component({
    selector: "bs-alert",
    templateUrl: "node_modules/my-commons-ts/my-commons/components/BootstrapAlert/BootstrapAlert.html",
})
export class BootstrapAlertComponent {

  public errors: DisplayMessage[] = [];
  public successes: DisplayMessage[] = [];
  public warnings: DisplayMessage[] = [];
  public infos: DisplayMessage[] = [];

  @Input()
  public bcn: string = null;

  ...
}

I use systemjs to load modules.


Solution

  • Templates aren't loaded via SystemJS so you can't use its mapping.

    Note that you can use relative paths, for example ../BootstrapAlert/BootstrapAlert.html and there are also template inliners for certain build tools such as gulp-angular-embed-templates for gulp.