我正在建立一个定义一些组件的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
有没有办法发布templateUrl在Component中使用的Angular2库？还是有一种解决方法，例如一种在将TypeScript组件转换为JavaScript时可以自动内联任何templateUrl引用的工具？
如果这是相关的：我当前正在使用SystemJS。
内联模板出于性能原因也很重要，因此在发布程序包之前将其内联确实很有意义。仅为了快速发展，这是一个障碍。
我的解决方案是使用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'));
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句