如何使用单独的Angular2 html文件发布templateUrl组件？
如何使用单独的Angular2 html文件发布templateUrl组件？
提问于 2016-08-14 10:19:43
我正在构建一个定义一些组件的Angular2库。我正在尝试将这个库发布为一个npm模块，然后将其发布到npm install中，并在我的其他Angular2项目中使用它。
我学习了像[1]和[2]这样的教程。这使我可以成功地从库中导入定义模板的服务和组件(如template: '<p>hello world</p>')。
但是，当我使用templateUrl: 'app/hello-world.component.html'导入在单独文件中定义模板的组件时，导入该组件的应用程序尝试将模板文件相对加载到我的项目目录中，而不是在已安装库的node_modules/目录中。显然，这会导致一个错误：
找不到- http://localhost:3000/app/hello-world.component.html
有什么方法可以发布在组件中使用templateUrl**s的Angular2库吗？或者有解决办法，比如在将我的templateUrl组件转到JavaScript时自动内联任何TypeScript引用的工具？**
如果这与此相关:我目前正在使用SystemJS。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-08-20 08:59:32
由于性能原因，内联模板也很重要，所以在发布包之前让它们内联是有意义的。只有为了快速发展，这才是一个障碍。
我的解决方案是使用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'));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38941245
复制相关文章
相似问题
腾讯云开发者
