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?

Create a directive is the simplest way. You can then require in the directive - otherwise look for a loader — Callum Linington, Oct 30 '15 at 13:32
http://stackoverflow.com/questions/30605266/include-an-angular-template-in-another-using-webpack — Callum Linington, Oct 30 '15 at 13:33

score 26 · Answer 1 · answered Dec 13 '16 at 11:15

26

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>

answered Dec 13 '16 at 11:15

simon04

3,054
29
25

1

Thanks for the advice! IMO and for my use case, simplier than the other answers :) – troig Sep 16 '17 at 18:26
It is good response however it is not answering the question: What about the ng-include condition? – SchemeSonic May 12 '19 at 22:25

score 22 · Answer 2 · edited Apr 02 '16 at 19:49

22

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

edited Apr 02 '16 at 19:49

rajesh

41
7

answered Mar 15 '16 at 08:47

shengbeiniao

221
2
3

1

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 https://github.com/preboot/angular-webpack To be tested (dev / prod) for other configs if the included fragment references images. – PhiLho Jun 21 '16 at 10:33
For the record, I made a variant of the above project at https://github.com/PhiLhoSoft/Angular-Webpack-Playground where I added ng-include as you show. – PhiLho Jun 21 '16 at 11:21

score 16 · Accepted Answer · edited May 23 '17 at 05:02

16

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

edited May 23 '17 at 05:02

Nick Res

2,154
5
30
48

answered Dec 26 '15 at 16:54

shanhaichik

2,436
2
11
12

How did you setup the loaders? – ave Apr 01 '16 at 12:39
@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);` – shanhaichik Apr 03 '16 at 08:33
@ave , if there are any questions or suggestions you have. Write [here](https://github.com/shanhaichik/webpack-require-loader/issues), I'll try to answer it. – shanhaichik Apr 03 '16 at 08:37
thanks for your great answer. but why you not update your answer with -Ave question and put it in comments? :) – Mojtaba Pourmirzaei Nov 02 '16 at 06:46
1

@MojtabaPourmirzaei, hi. Add link, how config loaders :) – shanhaichik Nov 02 '16 at 12:21
1

Seems to be out of date with newer webpack errors like: use must use require-loader not just require. – davidbuttar Jan 05 '17 at 15:00
1

Hi, @davidbuttar! I do not understand you – shanhaichik Jan 05 '17 at 15:33
2

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. – davidbuttar Jan 05 '17 at 16:52

score 3 · Answer 4 · edited May 23 '17 at 12:26

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>

Webpack: using require for ng-include

4 Answers4

Linked