Struggling to automatically link templates to an inversifyjs container, but all attempts have failed. Seeking assistance!
private templates = [
{file: './component.html.tpl', obj: 'HtmlTemplate'},
{file: './component.tpl.ts', obj: 'ComponentTemplate'}
];
private container = new Container();
bind(){
// original and working code
// this.container.bind<ITemplate>('HtmlTemplate').to(HtmlTemplate);
// this.container.bind<ITemplate>('ComponentTemplate').to(ComponentTemplate);
this.templates.forEach(template => {
import(template.file).then(mod => {
console.log(mod.default, template);
// is this correct (seems to work) =>
this.container.bind<ITemplate>(template.obj).to(mod.default);
console.log('bound =>', mod.default);
});
});
}
and files ./component.html.tpl
@injectable() export default class HtmlTemplate implements ITemplate { ... }
and ./component.ts.tpl
@injectable() export default class ComponentTemplate implements ITemplate { ... }
Displayed as expected in the console:
[Function: HtmlTemplate] { file: './component.html.tpl', obj: 'HtmlTemplate' }
[Function: ComponentTemplate] { file: './component.tpl.ts', obj: 'ComponentTemplate' }
However, expected the following code snippet within the foreach statement:
this.container.bind<ITemplate>(template.obj).to(mod.default);
to be similar to this:
this.container.bind<HtmlTemplate>('HtmlTemplate').to(HtmlTemplate);
this.container.bind<ComponentTemplate>('ComponentTemplate').to(ComponentTemplate);
When trying to access it in another loop:
this.templates.forEach(template => {
const tpl = this.container.get<ITemplate>(template.obj);
...
An error is thrown:
Error: No matching bindings found for serviceIdentifier HtmlTemplate
Any solutions to this problem?