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

Question

这可能措辞不当，但在我现有的 Angular 1 个项目中，我使用了一堆 HTML 资源，这些资源使用 HTML2JS 预编译到 JS 文件中。这很好用，所以现在我正在考虑 Angular 2 的方法。由于 HTML2JS 还没有更新，一切似乎都围绕着 2 个策略。

首先在@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'));
});

Answer 2

因为 Webpack 是新的 Gulp (also Gulp needs some help), here is what I came up with (uses stylus and jade)...

像这样使用 Webpack 加载器...

loaders: [
  {
    include: /\.pug/,
    loader: 'pug-html-loader'
  },
  {
    test: /\.styl$/,
    loader: 'style-loader!css-loader!stylus-loader'
  },
  {
    test: /\.ts$/,
    loader: 'ts'
  }
]

然后像这样在你的组件中使用 require...

@Component({
    ...
    template: String(require('./navbar.component.pug')),
    styles: [String(require('./navbar.component.styl'))],
    ...
})

确保使用 styles 和 template 而不是 templateUrl 和 styleUrls

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

How do I add JS HTML files to a @Template in Angular 2 (Like $templateCache)?

angular