如何创建一个与webpack.js和system.js兼容的Angular 2组件库？

Question

我正在做我的第一个Angular 2库。目前，这只是一个组件库。我想要一个兼容Webpack和SystemJS的库。我设法编写了一个与SystemJs兼容的代码的第一个组件，并将代码重写为与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'; 
} 
} 

目前我发现this trick解决了相对路径问题的一部分。该工程与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

我发现基于故宫包ng2-inline-require的解决方案。该工具编译scss和html外部文件并注入代码风格和模板与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