Webpack: using require for ng-include

Question

I'm new to webpack and right now I'm using it for the first time in one of my angular projects.

I want to use the require function in my html file in order to require the template for an ng-include like so:

<div ng-include="require(./my-template.html)"></div>

I know there are loaders like ng-cache and ngtemplate, but they do not work the way I need it. With them, I have to require the template in an js first and than use the template name in my html file.

How to accomplish this?

Answer 1

Another approach would be to transform my-template.html into a angular component: Assuming you use html-loader to load your HTML files (loaders: {test: /\.html/, loader: 'html'}), define a component myTemplate in your module JavaScript file:

import myTemplate from './my-template.html';
angular.module(...)
  .component('myTemplate', {template: myTemplate})

Afterwards use it:

<my-template></my-template>