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?

Gawen

Create a directive is the simplest way. You can then require in the directive - otherwise look for a loader – Peasecod

#30605766 – Peasecod

Answer 1

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

Culminate

How did you setup the loaders? – Spread

@ave, Hi. In my last project I use this config: Webpack config loaders: ['ng-annotate','babel','required?import[]=angular'] In app import angular from 'angular'; ... //@require "./components/**/index.js" //@require "./views/**/*.html" ... angular.module('sep', requiresModules) .config(onConfig) .run(onRun); – Culminate

@Spread , if there are any questions or suggestions you have. Write here, I'll try to answer it. – Culminate

thanks for your great answer. but why you not update your answer with -Ave question and put it in comments? :) – Heedless

@MojtabaPourmirzaei, hi. Add link, how config loaders :) – Culminate

Seems to be out of date with newer webpack errors like: use must use require-loader not just require. – Routh

Hi, @davidbuttar! I do not understand you – Culminate

In your docs you say things like 'loader: "ng-cache"' but when I run that it says something like breaking change you must include -loader e.g. 'loader: "ng-cache-loader"' so assuming this helper is out of date. I'm avoiding ng-include now, so don't need this but thought I mention it. – Routh

Answer 2

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>

Enlargement

Thanks for the advice! IMO and for my use case, simplier than the other answers :) – Strafford

It is good response however it is not answering the question: What about the ng-include condition? – Diclinous

Answer 3

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
    }
}

Storage

Thanks, it works and it is simple, without additional loader (well html loader is pretty standard, I mean). For the record, it also works with the raw loader, according to the configuration found in github.com/preboot/angular-webpack To be tested (dev / prod) for other configs if the included fragment references images. – Hajji

For the record, I made a variant of the above project at github.com/PhiLhoSoft/Angular-Webpack-Playground where I added ng-include as you show. – Hajji

Answer 4

I've already posted this on https://mcmap.net/q/501504/-include-an-angular-template-in-another-using-webpack 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>

Freewill