如何使用单独的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