Alternatives to $templateCache in Angular2

Question

When we think of using template in Angular2 or Angular1.X, we know below is one of the basic way of writing:

template: './template-ninja.html'

and with Angular1.X, we can previously cache all of templates with $templateCache.put() as follows:

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

which will lessen the number of http requests. I'd like to know how can I implement the same with Angular2. Could anyone help? Thanks.

Answer 1

gulp-inline-ng2-template

Currently the best solution is gulp-inline-ng2-template.

This takes a component with a templateUrl attribute, plus an html file, and turns it into a component with an inlined template.

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

Answer 2

I don't know of a library or tool that will cache templates for Angular 2 yet, but so far, I have been happy to just use inline templates instead of external files. Using the es6 backtick character for a template, it allows you to write multiline HTML in the JavaScript and keeps everything in one file.

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

Answer 3

gulp-ng2-template-wrap

Hi,

Hope this will be helpful to you: I just wrote a small module that allows you to bundle all of your html files into single ES6 module.

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