Как добавить JS файлы HTML в @Template в Angular 2 (например, $templateCache)

Это, вероятно, плохо сформулировано, но в моих существующих проектах Angular 1 я использую кучу ресурсов HTML, которые предварительно скомпилированы в JS файл с использованием HTML2JS. Это отлично работает, поэтому теперь я рассматриваю свой подход для Angular 2. Поскольку HTML2JS не обновлен, все, кажется, вращается вокруг двух стратегий.

Сначала вы добавляете встроенную строку HTML внутри @tempate atScript. Это кэширует его, поэтому я не хожу на сервер все время, но это также затрудняет форматирование в IDE и уменьшает читаемость IMHO.

Второй способ - использовать внешний файл и использовать URL-адрес внутри @template. Это, по-видимому, делает вещи более читабельными, но ограничивает количество кеширования. Это означает, что мне нужно делать большие серверные вызовы, которые я бы хотел избежать.

Есть ли способ запустить файл в HTML, затем скомпилироваться в файл .js и включен в компонент Angular2?

Ответы

Ответ 1

Так как Webpack является новым Gulp (также Gulp нуждается в некоторой помощи), вот что я придумал (использует стилус и нефрит)...

Используйте такие загрузчики Webpack, как это...

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

Затем использование требует в ваших компонентах, как это...

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

Обязательно используйте styles и template вместо templateUrl и styleUrls

Ответ 2

Если вы используете gulp для компиляции, вы можете использовать плагин angular -embed-templates. Здесь я загружаю templateUrl в шаблон, перед компиляцией в javascript в папке dist с исходными картами:

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