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

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.