如何使用单独的 templateUrl html 文件 npm 发布 Angular2 组件？

Question

我正在构建一个定义一些组件的 Angular2 库。我正在尝试将此库发布为 npm 模块，然后发布为 npm install 并在我的其他 Angular2 项目中使用它。

我遵循了 [1] 和 [2] 之类的教程。这让我可以成功地从我的库中导入定义其模板内联（如template: '<p>hello world</p>'）的服务和组件。

但是，当我使用 templateUrl: 'app/hello-world.component.html' 在单独的文件中导入定义其模板的组件时，正在导入此组件的应用程序会尝试将模板文件相对加载到我的项目目录而不是 node_modules/ 目录中安装的库。显然这会导致错误：

404 未找到 - http://localhost:3000/app/hello-world.component.html

有没有办法发布在组件中使用templateUrls 的 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'));
});