如何創建一個與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