Prerequisite: #595

Goal

A given Component needs to be able to use different templates per locale, device type (and test). This requires that we decouple @Component definition from TemplateConfig (and rename TemplateConfig to @Template)

Example

Simple Component (with separate Template annotation)

@Component({ selector: 'my-component' })
@Template({ 
  url: 'some/url'
})
class MyComponent {
}

As more local devices get added to the system we can add @Template()

@Component({ selector: 'my-component' })
@Template({ 
  url: 'some/url',
  directives: [DirA, DirB]
})
@Template({
  locale: 'en',
  device: 'mobile',
  url: 'some/url_en',
  directives: [DirA, DirC]
})
class MyComponent {
}

NOTE: different Templates can have different directive imports.

This works with existing Reflector Since the above can be rewritten as:

class MyComponent{}

Reflector.addAnnotation(MyComponent, new Component({ selector: 'my-component' }));
Reflector.addAnnotation(MyComponent, new Template({url: 'some/url',  directives: [DirA, DirB]});
Reflector.addAnnotation(MyComponent, new Template({locale: 'en', url: 'some/url_en', directives: [DirA, DirC]});

Because it can be rewritten into the Reflector form, it can be properly tree shaken, based on locale

Compiler

To support this the Compiler needs to be aware of current locale/device while compiling the templates. The compiler will need a new TemplateResolver dependency which will select the right @Template per each ComponentType. The TemplateResolver can than also be used in tests to override the templates.

export class TemplateResolver {
  resolve(component: Type): Template {
    // ...
  } 
}

Compilation Pipeline

1. We start with component Type
2. We use TemplateResolver to convert Type to Template
3. We use the TemplateLoader to covert the Template into HTML.