Question

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

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

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

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

有没有办法发布在Component中使用node_modules/的Angular2库？或者是否有一种解决方法，比如在将我的TypeScript组件转换为JavaScript时可以自动内联任何templateUrl引用的工具？

如果这是相关的：我目前正在使用SystemJS。

Answer 1

为了性能原因，内联模板也很重要，因此在发布包之前让它们内联是有意义的。只是为了快速发展，这是一个障碍。

我的解决方案是使用gulp扩展gulp-inline-ng2-template来创建我的代码的内联版本，并引用dist中的库而不是我其他项目中的app文件夹。< / p>

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'));
});

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

1 个答案: