I'm refactoring an Angular 2 component that does some template nesting.
The original code was something like this:
(component.ts)
let subItemTemplate = require('./sub-item-template.html');
@Component({
selector: 'my-component',
template: `
<div *ngIf="isSingle">
${subItemTemplate}
</div>
<div *ngIf="isMulti">
${subItemTemplate}
</div>
`
})
export default class MyComponent{
}
With an inline template, this works great - the string interpolation for my subItemTemplate is successfully parsed and my component works.
When I move the component template into an external file, this stops working:
let subItemTemplate = require('./sub-item-template.html');
@Component({
selector: 'my-component',
template: require('./my.component.html')
})
export default class MyComponent{
}
Now I get a runtime exception in my browser:
zone.min.js:1 Unhandled Promise rejection: Template parse errors: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
The only change is from moving my template to an external file.
I'm thinking this can be one of 2 major issues. Either it's an Angular limitation I'm not understanding, or Angular is a red herring and this is actually an issue in my compilation scripts (ultimately bundling with browserify).