如何制作与WebPack.js和System.js兼容的Angular 2库

Question

我正在做我的第一个Angular 2库。目前，它只是一个组件库。我想要一个与WebPack和SystemJS兼容的库。我设法编写了一个与SystemJ兼容的代码的第一个组件，并重写了与WebPack兼容的代码，但是哪个是强迫它与两者兼容的正确代码？

import {Component} from '@angular/core';
@Component({
  selector: 'foo',
  moduleId: typeof module.id == "string" ? module.id : null,
  templateUrl: 'foo.component.html',
  styleUrls: ['foo.component.css']
})
export class FooComponent {
 logo: String;
 name: String;
 constructor() {
  this.logo = '';
  this.name = 'My name';
 }
}

目前，我发现这个技巧可以解决相对路径问题的一部分。它可以与SystemJS一起使用，但我仍然使用WebPack的项目存在此错误：

Cannot GET /application.component.html
Unhandled Promise rejection: Failed to load foo.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load  foo.component.html undefined
Error: Uncaught (in promise): Failed to load foo.component.html

Answer 1

我找到了基于NPM软件包NG2-Inline-Require的解决方案。该工具编译SCSS和HTML外部文件，并将代码注入样式 and template 属性，与SystemJS和WebPack兼容。

。

import {Component} from '@angular/core';
@Component({
 selector: 'foo',
 moduleId: typeof module.id == "string" ? module.id : null,
 template: require('./foo.component.html'),
 styles: [ require('./foo.component.css') ]
})
export class FooComponent {
 logo: String;
 name: String;
 constructor() {
   this.logo = '';
   this.name = 'My name';
 }
}

和这样的编译：

ng2-inline-require -i ./src/foo.component.ts -o ./dist/foo.component.ts