Альтернативы $templateCache в Angular2

Когда мы думаем использовать template в Angular2 или Angular1.X, мы знаем ниже, это один из основных способов написания:

template: './template-ninja.html'

и с Angular1.X, мы можем предварительно кэшировать все шаблоны с помощью $templateCache.put() следующим образом:

var myApp = angular.module('Ninja', []);
myApp.run(function($templateCache) {
  $templateCache.put('templateNinja.html', 'This is the content of the template-ninja');
});

что уменьшит количество HTTP-запросов. Я хотел бы знать, как я могу реализовать то же самое с Angular2. Может ли кто-нибудь помочь? Спасибо.

Ответ 1

gulp -inline-NG2-шаблон

В настоящее время лучшим решением является gulp -inline-ng2-template.

Это принимает компонент с атрибутом templateUrl плюс html файл и превращает его в компонент со встроенным шаблоном.

https://github.com/ludohenin/gulp-inline-ng2-template

Ответ 2

Я не знаю библиотеки или инструмента, которые будут кэшировать шаблоны для Angular 2, но до сих пор я был счастлив просто использовать встроенные шаблоны вместо внешних файлов. Используя символ обратной ссылки es6 для шаблона, он позволяет писать многострочный HTML в JavaScript и хранить все в одном файле.

https://github.com/angular-in-action/chapter2/blob/master/client/components/dashboard.ts#L12

Ответ 3

Используйте следующую альтернативу:

Импорт RuntimeCompiler, отражателя, ComponentFactory, ComponentResolver, ReflectorComponentResolver и ReflectionInfo
Inject RuntimeCompiler
Создайте экземпляр ComponentResolver
Вызов ComponentResolver.resolveComponent(SomeComponent)
Проверить отражение .propMetadata для кэшированного результата

    it('should cache the result', inject([AsyncTestCompleter], (async) => {
         PromiseWrapper
             .all([ComponentResolver.resolveComponent(SomeComponent), ComponentResolver.resolveComponent(SomeComponent)])
             .then((protoViewRefs) => {
               expect(protoViewRefs[0]).toBe(protoViewRefs[1]);
               async.done();
             });
       }));

Аннотации - это другой способ сделать это:

    it('should read the template from an annotation',
       inject([AsyncTestCompleter, Compiler], (async, compiler) => {
         ComponentResolver.resolveComponent(SomeComponent)
             .then((hostViewFactoryRef) => {
               expect(hostViewFactoryRef.internalHostViewFactory).toBe(someHostViewFactory);
               async.done();
             });
       }));

Ссылки

Ответ 4

gulp -ng2-шаблон-обертка

Привет,

Надеюсь, это вам будет полезно: я написал небольшой модуль, который позволяет объединить все ваши html файлы в один модуль ES6.

https://github.com/evgenys91/gulp-ng2-template-wrap