UPDATE: I haven't come across a method to import templates using an import statement rather than require, but I have realized that I can streamline my configuration.
In the webpack config, opt for html-loader over ngtemplate-loader for /\.html$/. Then, within the component, include the template at the beginning of the file as we did in the original post, but alter "templateUrl" to "template" in the component definition. Webpack will take care of the rest for you.
const template = require('./component.html');
class Example(){
...
}
export const component = {
bindings: {},
controller: Example,
template: template
};
Original Post:
I've got a solution working with ngtemplate-loader:
const template = require('./component.html');
import ExampleService from './example.service';
class Example() {
constructor(private exampleService: ExampleService) {
}
...
}
export const component = {
bindings: {},
controller: Example,
templateUrl: template
};
However, I'm concerned that my coworkers may not approve of the require syntax. Our application is transitioning from Grunt to Webpack2, and the current app solely relies on the import foo from './bar' syntax.
In our present build, we don't import templates in the javascript files; instead, we utilize a callback in the templateUrl to fetch a string.
import ExampleService from './example.service';
class Example() {
constructor(private exampleService: ExampleService) {
}
...
}
export const component = {
bindings: {},
controller: Example,
templateUrl: ['constantsFactory', function(constantsFactory) {
return `${constantsFactory.path}/component.html`;
}]
};
Is there a webpack loader that can populate $templateCache without using require?
If not, is there a way to import templates in Typescript using the import syntax?