如何使用單獨的templateUrl html文件發佈Angular2組件？

Question

我正在構建一個定義一些組件的Angular2庫。我試圖將這個庫作爲npm模塊發佈，然後npm install，並在我的其他Angular2項目中使用它。

我遵循教程如[1]和[2]。這讓我可以成功導入服務和組件，這些服務和組件從我的庫中內聯定義了模板（如template: '<p>hello world</p>'）。

但是，當我使用templateUrl: 'app/hello-world.component.html'導入在單獨文件中定義其模板的組件時，導入此組件的應用程序嘗試在我的項目目錄中加載模板文件，而不是在已安裝庫的node_modules/目錄中加載模板文件。顯然，這將導致一個錯誤：

404 Not Found - http://localhost:3000/app/hello-world.component.html

有沒有一種方法來發布，在組件使用templateUrl秒的Angular2庫？ 還是有解決方法，就像一個工具，當我的TypeScript組件翻譯成JavaScript時可以自動內聯任何templateUrl引用？

如果這是相關的：我目前正在使用SystemJS。

Answer 1

內聯模板是出於性能的考慮也很重要，所以它確實讓，讓他們發佈包之前內聯感。只是爲了快速發展，這是一個障礙。

我的解決方案是使用gulp擴展gulp-inline-ng2-template創建我的代碼的內聯版本，並引用dist中的庫而不是我的其他項目中的app文件夾。

gulpfile.js：

var gulp = require('gulp'), 
    inlineNg2Template = require('gulp-inline-ng2-template'); 

gulp.task('inline-templates', function() { 
    return gulp.src('app/**/*.ts') 
     .pipe(inlineNg2Template({useRelativePaths: true, indent: 0, removeLineBreaks: true})) 
     .pipe(gulp.dest('dist')); 
}); 

Answer 2

如果您正在使用gulp，則會有一個名爲gulp-angular2-embed-templates的程序包，它會將您的templateUrl屬性並將其嵌入到template屬性中。

https://www.npmjs.com/package/gulp-angular2-embed-templates