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

I've already posted this on https://stackoverflow.com/a/34815472/833093 but:

To enable you must to configure the "relativeTo" parameter, otherwise your template partials get loaded at "/home/username/path/to/project/path/to/template/" (Check your bundle.js you're probably leaking your username in your projects)

var ngTemplateLoader = (
    'ngtemplate?relativeTo=' + path.resolve(__dirname, './src/') +
    '!html'
);

module.exports = {
    ...
    module: {
        loaders: [
            {test: /\.html$/, loader: ngTemplateLoader},
        ],
    },
    ...
}

Then in your code, do a side-effect only require:

// src/webapp/admin/js/foo.js
require('../../templates/path/to/template.html');

Then you can load the html:

<div ng-include src="'/webapp/templates/path/to/template.html'"</div>

Answer 2

You can use webpack-required-loader on npm.

In your app js or module js add comment:

//@require "./**/*.html" 

And in your template you can use

<div ng-include="'my-template.html'"></div>

Ngtemplate will works fine. Ng-cache works too.

Also note that there is no need for a relative path in the ng-include directive because that is taken care of by adding the //@require command at the head of your entry file.

Lastly, note that you have to use double and single quotes to get ng-include to work. So you'd do "'template-name.html'", not "template-name.html", or 'template-name.html'.

How config loaders

Answer 3

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>

Answer 4

You can use HTML loader and angular $templateCache service

angular
    .module('template',[])
    .run(['$templateCache', function($templateCache) {
        var url = 'views/common/navigation.html';
        $templateCache.put(url, require(url));
    }]);

webpack loader config:

{
    test: /\.html$/,
    loader: 'html',
    query: {
        root:sourceRoot
    }
}