Summary
I'm trying to convert my angularjs components/directives over to TypeScript. Unfortunately, the templateUrl property doesn't display the template that's passed to it. Instead, it literally displays a partial path the template.
Code
class JumpPagerController {
...
}
}
JumpPagerController.$inject = ['$timeout'];
export const jumpPagerComponent = {
templateUrl: './jump-pager.component.html',
controller: JumpPagerController,
bindings: {
pagerPlaceholder: '@?',
pagerCurrentPage: '=',
pagerItemsPerPage: '=',
pagerTotalItems: '=',
pagerChange: '&'
}
};
Expected
Actual
What I've Tried
- Passing in the baseUrl (didn't have high hopes here:
templateUrl: `${baseUrl}/jump-pager.component.html`templateUrl: localhost:8080/jump-pager.component.html
template: require('...')works, but would require me to reconfigure webpack and then modify all other cases oftemplateUrlin.jsfiles. This isn't an option- I've reviewed similar questions but no one else seems to be having quite the same issue. They're all either using JavaScript instead of TypeScript, or they're only having an issue with the template not rendering and don't seem to be getting the weird problem with the template path being displayed.
Recap
So you can see that I'm at a loss. What is the correct way to use templateUrl on an angularjs component using typescript and webpack?
/prefix will make the path relative to the domain, if that's where the file really is—have you tried this? (i.e./jump-pager.component.html) Though something tells me you've got this template file nested in a folder for the component.'jump-pager.component.html'./jump-pager.component.htmlorjump-pager.component.htmlwould work.template: require('./jump-pager.html')in my TypeScript without breaking other components still written in JavaScript by adding a secondhtml-loaderconfiguration in my webpack.config.js. One hasissuer: /\.js$/and the unchanged configuration, while the other one hasissuer: /\.ts$/with the recommended boilerplate configuration for html-loader. It seems to work as expected.