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\'

Answer 1

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 2

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

Answer 3

Use the following alternative:

• Import RuntimeCompiler, reflector, ComponentFactory, ComponentResolver, ReflectorComponentResolver, and ReflectionInfo
• Inject RuntimeCompiler
• Create a ComponentResolver instance
• Invoke ComponentResolver.resolveComponent(SomeComponent)
• Check reflector.propMetadata for the cached result

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

Annotation is the other way to do it:

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

References

• Angular2 Source: RuntimeCompiler Spec - runtime_compiler_spec.ts
• Angular2 API: ProtoViewRef Class
• Angular2 Source: Public API Specs
• npm modules: ng2cli - CLI util to generate Angular 2 files
• Angular2 Issue #6317, Feature offer: some annotation inside templates to indicate the interface they require.

Answer 4

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