Include an angular template in another using webpack

Question

I have an issue using angular and webpack. My project is composed of multiples views with controllers.

For example, I have a view userSummary.tmpl.html which load the list of all users. I would like to reuse this template in another groupSummary.tmpl.html which display all users too.

I can't use ng-include because all my views are contained in a bundle.js, nothing else. I would like to use WebPack to include my views directly in another.

Is that possible?

Why using webpack when you can go for routing and nested views? Take a look here https://github.com/angular-ui/ui-router — Michelangelo, Jun 02 '15 at 19:48
Thanks @Mikey . I use the ui-router plugin but it seems to doesn't work in my case. I already use a template in my state and I'm not able to add a view with an ui-view in the html. — Donovan Charpin, Jun 02 '15 at 19:59
Odd. Works everytime for me. What you want is nested views or not? — Michelangelo, Jun 02 '15 at 21:18
You can use `ng-include` when using something like `ngtemplate-loader` or `ng-cache-loader`, I've worked out — marksyzm, Oct 08 '15 at 16:02
Possible duplicate of [Webpack: using require for ng-include](http://stackoverflow.com/questions/33436729/webpack-using-require-for-ng-include) — Thomas Grainger, Jan 15 '16 at 16:11

score 3 · Accepted Answer · answered Jan 15 '16 at 16:22

3

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>

answered Jan 15 '16 at 16:22

Thomas Grainger

2,271
27
34

Interesting, I'm gonna try that. Thanks – Donovan Charpin Jan 26 '16 at 19:48
@DonovanCharpin if this works you can select this as the approved answer. – Thomas Grainger Mar 24 '16 at 10:04
If this uses a specific loader (as it seems), it would be nice to give a link (and a NPM name) to this loader... – PhiLho Jun 21 '16 at 09:02
It's ngtemplate. webpack automatically appends "-loader" to get the NPM name. – Thomas Grainger Jun 21 '16 at 16:30

score 0 · Answer 2 · answered Oct 08 '15 at 20:31

0

You can use ng-include when using something like ngtemplate-loader or ng-cache-loader. This will bundle it all into the file, as you mentioned.

Although you can also separate stuff out into separate files with file-loader which will clone the file in the bundle directory and supply you paths to each HTML file and will work just the same in angular.

answered Oct 08 '15 at 20:31

marksyzm

5,281
2
29
27

I'm using ngtemplate-loader but it's not triggering on ng-include at all – Thomas Grainger Jan 15 '16 at 15:26
You must use it outside the angular component, else it won't include. Was that really worth a downvote? – marksyzm Jan 16 '16 at 08:30

score 0 · Answer 3 · answered Aug 04 '17 at 16:24

In Webpack.config file you can add main html like below

   plugins: [ 
    new HtmlWebpackPlugin({
    template: 'index.html'
    }),
    new ExtractTextPlugin('bundle.css')
    ],

Include html-loader in package.json and use the below method in config block alone is enough.

$stateProvider.state('app', {
    url: '/app',
    template: require('html-loader!root/app/Common/templates/role.html'),
    controller: 'roleController'
})

So all the partials will be bundled within the bundle.js itself.No need to add the loaders in webpack-config as well

Please don't post [identical](http://stackoverflow.com/a/45511348) [answers](http://stackoverflow.com/a/45511404) to multiple questions. Post one good answer, then vote/flag to close the other questions as duplicates. If the question is not a duplicate, *tailor your answers to the question.* — Paul Roub, Aug 04 '17 at 16:37

score 0 · Answer 4 · answered Feb 06 '18 at 16:16

Updtaed the config for Webpack 3

  {
    test: /\.html$/,
    exclude: /node_modules/,
    use: [
      { loader: 'ngtemplate-loader?relativeTo=' + __dirname + '/app' },
      { loader: 'html-loader' }
    ]
  },

The html can then be imported by using a require in your component js file.

require('../../templates/path/to/template.html');

and in your components html file

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

Include an angular template in another using webpack

4 Answers4

Linked