如何将JS HTML文件添加到Angular 2中的@Template(如$ templateCache)？

Question

这可能措辞不多,但在我现有的Angular 1项目中,我使用了一堆HTML资源,这些资源使用HTML2JS预编译到JS文件中.这很好用,所以现在我正在考虑我对Angular 2的方法.由于HTML2JS尚未更新,所有内容似乎都围绕着两种策略.

首先,在@tempate atScript中添加HTML内联.这会缓存它,所以我不是一直都去服务器,但它也很难在IDE中格式化并降低可读性恕我直言.

第二种是使用外部文件并使用@template中的url.这似乎使事情更具可读性,但限制了缓存的数量.这意味着我需要进行更大的服务器调用,这是我想避免的.

有没有办法让文件从HTML开始然后编译成.js文件并包含在Angular2组件中？

Answer 1

如果您使用gulp进行编译,则可以使用angular-embed-templates插件.这里我将templateUrl加载到模板中,然后使用源映射编译到dist文件夹中的javascript:

var gulp           = require('gulp');
var ts             = require('gulp-typescript');
var sourcemaps     = require('gulp-sourcemaps');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('ts:build', function () {
    gulp.src('app/**/*.ts')
        .pipe(embedTemplates())
        .pipe(sourcemaps.init())
        .pipe(ts({
            noImplicitAny: true,
            module: 'system',
            target: 'ES5',
            experimentalDecorators: true,
            moduleResolution: 'node',
            emitDecoratorMetadata: true
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist'));
});